Function, Block and Lexical Scope. What's the difference?

What is Scope?

Scope is the location where a variable is defined and the context where other pieces of your code can access and manipulate it. In this post I'll outline the three different types of scopes and how they behave in JavaScript.

Function Scope

In the below example a function called helpMe has a variable called msg. Msg is function scoped meaning that if you call it outside the helpMe function you'll get undefined.

If you have two variables with the same name their location matters. In the below example a bird variable is declared outside of a function (pink box) and then a bird variable is function scoped to birdWatch. When bird is outside the function the 'mandarin duck' is printed.

Block Scope

Blocks of code are defined with curly braces. It's important to note that Let and Const are block scoped. This means when you declare a variable using Let or Const those variables can't be accessed outside that block.

In contrast, if you use var you can still access a variable that is declared inside a block scope.

// let & const are BLOCK SCOPED

if (true) {
const animal = 'eel';
console.log(animal); //'eel'
}
console.log(animal); //NOT DEFINED!

// Var is not BLOCK SCOPES
if (true) {
var animal = 'eel';
console.log(animal); //'eel'
}
console.log(animal); //'eel'

Lexical Scope

Lexical scope refers to the fact that nested functions are scoped to their parent/outer functions (but it's a one way relationship).

In the below example the inner function is nested inside the outer function. As you can see we have access to hero inside the inner function. But outside this function we do not have access to inner.

Below is another example of how lexical scope works. When we call outer() the below example prints out 'AMADEUS'. This is because movie isn't defined inside the extraInner function so the function looks for the nearest movie which is Amadeus. If The Shining wasn't commented out the console would print it.

function outer() {
  let movie = 'Amadeus';

 function inner() {
   // let movie = "The Shining"; 

   function extraInner() { 
   //movie is not defined in this function 
   //but it has access to parent function's variables
     console.log(movie.toUpperCase()) 
   } 
    extraInner();
  }
  inner();
}

outer(); //'AMADEUS'

--------
//Order of how the function is called

2. function outer() {
   3. let movie = 'Amadeus';

  5. function inner() {
     6. let movie = "The Shining";

     8. function extraInner() {
        9. console.log(movie.toUpperCase())
    }
    7. extraInner();
    }
4. inner();
}
 
1. outer();
 
10. >>>'THE SHINING'

Originally posted here.

*The graphics are screenshots from Colt Steele's Modern Javascript course.