Complete guide to closure

Before learning to the closure please follow the below article to understand the basics of it.

https://manishsoni21.medium.com/javascript-scope-7a43f6255be6

The closure is the most important, and one of the valuable topics that exist in Javascript. To understand closure we should know how the javascript scope works in detail.

The closure is not magic, it's a design choice made by the Javascript designer. To define closure in one sentence it goes like this:

Closure is a capability in JavaScript which allows the function to access its lexical scope even when that function is executing outside its lexical scope.

But this does not give much idea what this sentence is saying at least for the person who has not witnessed closure in action.

We will understand this with an example:

function foo() {
    var a = 2;
    function bar() {
        console.log( a ); // 2
    }
    bar();
}
foo();

When we execute the above code it print 2 to the console.

Surprise?? No, if you know how scope resolution works. Let's discuss this pictorially.

Step 1) we invoked foo from the global execution context. (Remember global execution context is the base execution context from where your javascript code start running)

Step 2) foo created an execution context, and the JS engine declared a variable “a” inside its variable environment (blue box).

Step 3) Inside foo it invoked bar, and JS engine created execution context for this.

Step 4) inside the bar function it found the statement console.log which asks for “a”. Scope resolution found this variable in the enclosing scope of the bar function, i.e inside foo. It returns the value of a to the bar, and we see the value 2 is getting printed over the screen.

No Surprise, and perhaps no closure!!!

Let's discuss this code snippet:

function foo() {
    var a = 2;
    function bar() {
        console.log( a );
    }
    return bar;
}
var func= foo();
func(); // 2

Again the result is 2. Can you answer technically what happened here?

Most of the beginners (especially whoever are coming from those programming language where this is not prevalent) memorize this pattern.

Let's understand pictorially why this is unique.

Step 1) Global execution context declared variable func which points to the return of foo, i.e bar reference.

Step 2) When foo is returned, its execution context will get popped off from the execution stack.

Step 3) When we invoked func (reference of bar function), the JS engine has created an execution context and pushed this on top of the stack.

Step 4) The JS engine encountered the variable “a” for console.log, it consults the scope resolution protocol, and did not find this in the variable environment. but still, it prints the value 2.

Do you ask from where the 2 come?? This is where closure comes to answer.

When we wrapped a function with another function, what the JS engine does is creates a closure (closed over wrapper execution environment) context for that function.

In our example, the JS engine created a closure (context with the enclosing function) for bar with the foo’s context. So whatever the value defined in foo which bar is referencing gets put over a separate memory area (some sort of heap, not on execution stack). This is why even though foo has popped out of the stack we can still access the variable a.

Pictorially it will look like below:-

Did you see it? It refers to some other area (closure) for the value of 2. This is where you have just observed closure!!!

So let's revise the above statement:

Closure is a capability in JavaScript which allows the function to access its lexical scope even when that function is executing outside its lexical scope.

We have just witnessed this sentence. We have a function bar, which is executing outside of its lexical scope environment (lexical means where it was declared. it was declared inside the foo, but we are invoking it from the global environment). bar function is referencing the variable “a” which is declared inside foo. When we invoked the bar function, foo has been done executing, and it has returned. It's due to closure (some sort of capability that allows you to reference variable even its context has been destroyed) we can still access variable 2.

In the Chrome dev tool, you can keep a debugger, and check this.

Now go and check all the JS code which you have written or you are working on. You can now answer why, and how they are working.

Happy Learning!!!