Closures, Lexical Scoping And Scope chain In JavaScript

Closures...You have heard a lot, or might have tried to study from different sources, but failed to get the point.

Well to understand the closure we must have to take deep dive into the basic behavior of JavaScript.

First lets see what is Lexical Scoping.

Like Python, JavaScript also supports Lexical Scoping..means inner functions are able to access the scope (variable/methods) of outer function where it has been defined and not be able to access the scope where it is being called.

Lets understand this with an example:

var a = function () {
      var foo = "Print me";
      var b = function () {
            console.log(foo);
      }
      return b;
}
var catchReturn = a();
catchReturn();      // Says Print me

Lets understand above code line by line.

This is outer function:

var a = function () {
   
}

Variable foo defined inside the outer function a (foo is local variable of outer function a):

var a = function () {
      var foo = "Print me";
}

Inner function b having access of all the variables and methods defined in outer function a:

var b = function () {
      console,log(foo);
}

Since inner function has access of outer function's scope, it will be able to print foo variable inside it.

calling a function and storing result in catchReturn variable.

var catchReturn = a();

Since a function is returning an inner function, catchReturn will be storing inner function.

Calling inner function through catchReturn

catchReturn();

This will execute inner function. Since inner function has access to the scope of outer function it will be able to print foo variable.

Now lets take it to another level.

var foo = "Will it get printed???? ^_~"
var a = function () {
      var foo = "Miracle Happens!!";
      var b = function () {
            console.log(foo);
      }
      return b;
}
var catchReturn = a();
catchReturn();      // what do you think it will print?

Kudos if you say Miracle Happens!!. Others ask why?? Lets see why.

Well because of scope chain or scope hierarchy. Inner function b has access to global variable foo and also local variable foo of parent function. Since catchReturn is getting executed in global context it should print "Will it get printed???? ^_~" (according to the rules of dynamic scoping) but since JavaScript supports Lexical Scoping, it will look into the scope chain of the location where b function is defined i.e inside a (outer function)

Now that we have got good understanding of Lexical Scoping, we can move towards Closures.

Closure is an inner functions that has access to the outer function's variables/scope chain. That means all the inner functions are closures. But what is the point of closure. Can't we directly access outer function's variable through outer function only. Well in some scenarios, NO. Lets take an example.

var i;
for( i = 1; i<= 5; i++ ) {
      setTimeout(function() { console.log(i) }, 1000);
}

what will get printed? BIG NO to those who say 1 2 3 4 5. Actual answer will be 6 6 6 6 6. Why you ask. setTimeout will execute after 1000 mSec. Till then for loop will get iterated completely atlast setting the value of i to 6. Now all the setTimeout functions will get executed printing the value of i which is 6 because of lexical scoping.

What if I want to print 1 2 3 4 5. Here comes Closures in the picture.

var i;
for( i = 1; i<= 5; i++ ) {
      (function(stored_separate_i) {
            setTimeout(function() { console.log(stored_separate_i) }, 1000);
      })(i);
}

This will print the desired output i.e. 1 2 3 4 5.

On each iteration of for loop there is separate individual self executing function in which we are passing i. This separate self executing function will get executed each time storing the value of i in a variable stored_separate_i. Now function inside the setTimeout has seperate value of i in stored_separate_i which will get printed. Here closure is the inner function which is defined in setTimeout and outer function will be self executing function defined inside the for loop.

Make sure to bookmark this post as you will need to revise the concept of closures,