Lexical Scope Example

JavaScript allows us to create functions inside functions ( neste functions ), block statements inside another block statement, block statements inside afunction or functions inside a block statement, etc.

JavaScript creates new scope for every function and code block that it executes. When we create a nested function (or inner function) inside another function (outer function), the scope of the outer function becomes the parent scope of the inner function.

In the following example, when we invoke the greeting function it creates a new scope. Inside the greeting functions scope, we have created the sayHi function.

        

let greetText="Hello from global"
 
 function greeting() {
  
   let greetText="Hello"
  
   //Creation of sayHi function inside the greeting Scope
   //Hence the greeting scope is the parent scope of sayHi
   sayHi= function() {
     console.log(greetText);
   }
  
   //Invoking sayHi
   sayHi();   //Hello
 }
  
 //Invoking the greeting function. 
 //A new scope is created for greeting
 greeting(); 
  
    
        
    

But there is a catch

The above are simple examples. We create a function inside another function and then we immediately invoked it.

In JavaScript, we can assign a function to a variable and pass it around. This enables us to invoke the function in a different scope than the original scope in which we created it.

Take a look at the following code

In the code below we have declared the sayHi function inside the greeting1. But we have invoked it inside the greeting2 function. Both greeting1 & greeting2 contain the variable greetText.

        

let greetText="Hello from global"
 
function greeting1() {
 
  let greetText="Hello"
 
  // creating the sayHi function. We will not invoke it
  sayHi= function() {
    console.log(greetText);
  }
 
  return sayHi;
}
 
 
sayHi=greeting1();   //new scope is created here 
 
function greeting2() {
 
  let greetText="Hi"
 
  sayHi();    //invoking it inside the scope of greeting2
 
}
 
 
greeting2(); // new scope is created here
    
        
    

JavaScript creates a global scope when we execute the above code. The codelet greetText="Hello from global" creates the global variable greetText because we are inside the global scope.

The greeting1 scope is created when we invoke the greeting1 function sayHi=greeting1();

The greeting1 function creates the variable greetText and sayHi function. Hence both will belong to the greeting1‘s scope

When we invoke greeting2(), we create a new scope for greeting2.

The greeting2 function also creates greetText variable let greetText="Hi". This greetText will not overwrite the greetText in the greeting1 as they are part of different scopes.

Now, we invoke the sayHi from the scope of greeting2. This will create a new scope for sayHi function.

The search for the variable greetText inside the sayHi function starts from the scope of the sayHi function. Since we have not declared it there, It looks for it in its parent scope. The parent scope of sayHi is the greeting1 scope, so the search continues there and it finds the variable and prints “Hello” in the console.

Alternatively, if when we determine the scope based on where we have invoked the function, we call that dynamic scope. In a dynamically scoped language, the value of the greetText in the sayHi function will come from the greeting2 function Because that is where we invoked it. Dynamically scoped language determines the scope dynamically at run time and scope may also change from one invocation to another.

How Closures work

JavaScript creates a closure every time we create a function, at the time of the creation of the function.

The functions are objects in JavaScript. Just like any other object, you can store them in a variable. So when we create a function, it creates a variable sayHi and stores the code of the function there. The function also has a hidden property named [[Environment]]. We cannot access it from the code. JavaScript uses it to store the reference to the current executing parent scope of the function.

For Example, in the code above invoking the sayHi = greeting1(); creates a new scope. The code inside the greeting1 runs in that new scope. So when we create the sayHi function, JavaScript saves the reference to the greeting1 along with the function in the sayHi variable

Hence a function always carries a reference to its parent scope. and stay connected to their parent scope always. Since the function carries a reference to its parent scope, JavaScript will not be able to clean up the parent scope. Parent scope stays in memory as long there is a function that has a reference to it.

When we invoke a function, the Javascript first searches for the variables in the scope of the function itself. If it does not find it then it will look for it in the parent scope. To determine the parent scope it will always use the closure and not the current executing scope.

Creating Private Variables

The closure is useful in creating Private variables or hiding implementation detail from the user, which is not possible only using the objects.

In the following example, makeCounter function creates a new instance of the counterObj and returns it. The object has two functions increment & decrement. Since they are created inside the makeCounter function, they share the same parent scope.

        
function makeCounter(counterName) {
  let count = 0;
  let name= counterName
 
  let counterObj = {
      
      increment: function () {
          ++count;
          console.log("%s :  %d",name,count)
          return count
      },
      decrement: function () {
        --count;
        console.log("%s :  %d",name,count)
        return count
    },
  }
 
  return counterObj 
}
 
 
counter1=makeCounter("Counter1")
 
counter1.increment()   //Counter1 : 1
counter1.increment()   //Counter1 : 2
counter1.increment()   //Counter1 : 3
counter1.decrement()   //Counter1 : 2
counter1.decrement()   //Counter1 : 1
    
    
        
    

Here we make two calls to the makeCounter. Each call to makeCounter function to creates a new closure and returns the new counter object. Both the counters run independently of each other.

        
 
counter1 = makeCounter("Counter1")
counter2 = makeCounter("Counter2")
 
counter1.increment()   //Counter1 : 1
counter1.increment()   //Counter1 : 2
counter1.increment()   //Counter1 : 3
counter2.increment()   //Counter2 : 1
counter2.decrement()   //Counter2 : 0
counter2.increment()   //Counter2 : 1
counter2.increment()   //Counter2 : 2
counter1.decrement()   //Counter1 : 2
counter1.decrement()   //Counter1 : 1
    
    
        
    

Closures inside loops

In the following example, the makeFunctions creates an anonymous function and pushes it to the results array inside a For loop.

The code blocks ( { } ) in JavaScript creates new scope (block scope). Each iteration of the For loop creates a new scope and they become the parent scope of the anonymous function. Hence we end up with three anonymous functions each with the separate block scopes as their parent.

But all three block scopes share the makeFunctions as their parent scope as they are created inside the makeFunctions scope.

When you run executeFunctions you will see the output as 2, 2, 2 instead of 1, 2, 3.

        
function makeFunctions() {
 
  var result=[];
  for (let i = 0; i < 3; i++) {
    var item = i;
 
    //annonymous function is created here. Under the block scope of For Loop
    result.push( function() {console.log(item)} );
  }
  return result;
 
}
 
function executeFunctions() {
  var result = makeFunctions();
  
  for (var j = 0; j < result.length; j++) {
    //function invoked here
    result[j]();  
  }
}
 
 
executeFunctions();
 
//**** Result *****/
    
    
        
    

Unexpected results due to the fact that the variables declared with var will not become part of the block scope. It will become part of the functioUnexpected results due to the fact that the variables declared with var will not become part of the block scope. It will become part of the function scope or global scope. Hence in our example above item variable is part of the makeFunctions scope. our example above item variable is part of the makeFunctions scope.

So when the for iteration is complete, the value of the item is already 2 in the makeFunctions. When we run the anonymous functions they print that.

We can solve this problem using let instead of var, which is block scoped.

        
function makeFunctions() {
 
  var result=[];
  for (let i = 0; i < 3; i++) {
    let item = i;
 
    //annonymous function is created here. Under the scope of BuildList
    result.push( function() {console.log(item)} );
  }
  return result;
 
}
 
..
..
    
    
        
    

Closures in Callback

Event callbacks are one of the most commonly used use cases for closures. In the following code, we register an anonymous callback function. JavaScript creates a closure around it and allows us to access the clicked variable

        
        <!DOCTYPE html>
<html>
<head>
<title> Functions as callbacks </title>
<meta charset="utf-8"
</head>


<body>
<buuton>button id="buttonRef">Click Me </button>
</body>


    <script>
        let buttonRef = document.getElementById("buttonRef")
        let clicked=0
 
    buttonRef.addEventListener("click", function() {
        clicked++;
        buttonRef.innerHTML="Clicked "+clicked
    }, false);


    </script>