How Closures work in Javascript

What is Closure?

Closure is nothing but a function which is enclosed with its lexical scope. Lexical scope simply means a variable defined outside a function can be accessible inside another function defined after the variable declaration. In our day to day life we used closures so many times, it might be possible that you are not aware about it. It is a very powerful feature of javascript.

In simple words we can say closure is a function which is having inner function and that inner function is having access of all the variables or parameters of outer function even though it is returned.

Lets understand this by some examples. Will go step by step as we said in the definition part.
Firstly lets create one function. Let’s say i am creating function with name first witch is having one variable called a with value 100.

function first() {
    var a = 100;
}

As we said this function should have another function as well right? So let’s create one inner function inside this with name second. And inside this function we will display the value of a.

function first() {
  var a = 100;
  function second() {
    console.log(a);
  }
}

Now let’s call these function and what is the output of it.

function first() { 
  var a = 100; 
  function second() { 
    console.log(a); 
  }
  second();
}
first();

Output: 100

So yes output will be 100. And this is due to the closure. So this function forms a closure. You know how we got the output 100 even though the second function is not having its own variable a. Its due to the lexical scope. As we mentioned above lexical scope is nothing the variable defined in the outer function, can be accessible inside the inner function.

In lexical scope basically when we execute the second function, it will search for the variable a inside it and if it will not find the variable a there  it will search in its lexical parent and if it will not find that variable inside parent as well then it will go to its upper-level function. And this is how the lexical scope is.

If you don’t believe its a closure then you can just see in the debug mode. It will be closure. Let see in below diagram.

On the right hand side you can see the function first is forming a closure.

Now let’s do some modification in our code.

function first() { 
  var a = 100; 
  function second() { 
    console.log(a); 
  }
  return second;
}
var third = first();
console.log(third)

Here when we will call the function first() , it will return the function second. So its output will be.

Output: function second() { console.log(a); }

So here after running var third = first(); this line of code , second function is returned and then first() function is totally vanished.
And whatever the value is return from first() , it is assigned to the variable third. All the execution context for the first() function will be clear from the call stack.

Now lets call the third now.

function first() { 
  var a = 100; 
  function second() { 
    console.log(a); 
  }
  return second;
}
var third = first();
third();

Now can you guess what will be the output here. Yes the output will 100.

But how it is possible. In the above statement we have seen that after execution of var third = first(); first will be vanished and if first is vanished then whatever the parameters and function are inside it, it should also vanished right?

But here is the closure comes into the picture. In the definition part as we said that even the function is returns still its having the access of outer functions variables or parameters.  And this is the example of that. And this is the beauty of function that if the function is returned from the another function still they mentioned its lexical scope. They remember where they are actually present.

As first() function execution is done , second function is returned still the second function remembered its lexical scope. Hence when we return the second function , not just the function is returned, actually it retuned the closure as well. Means function along with its lexical scope is returned.And it put inside the third variable. And whenever you will execute the third , it still remember variable a.

So this is how the closure works in javascript.