Javascript Closures

I have seen many blogs and videos trying to explain closures but in a very complicated way. Here is the easiest and simplest way to get them in your mind. I will start off simply and magically (if there was such a thing) land up explaining you closure.

Basics

Firstly , just look at this piece of code below:

Here we can clearly see that timmy function can access the variable b.

Now what if I change the value of variable b to 3 on line 2 and run the code again?

Of course the output would be 3.

The thing here to notice is that , you might have thought that when I made a call to function timmy on line 8 , it must have gone to variable b above to check its value and log it out. But that is not the case. What happens is that when the function timmy was created , javascript attached a copy of outer scope variable b to it and at time of calling, it uses that copy of b.

So we need to remember that in javascript functions has its own copy of outer scope variables(outer scope wrt function creation location).

Lets dive deeper

Now look at this piece of code now:

What happens here ?

When javascript encounters fun(3) , a new timmy function will be created and a copy of c having value 3 is made and attached to it. In fun(4), again a new timmy function will be made and a copy of c having value 4 will be attached to it .

But why are we attaching values of the outer scope to the created function? The answer is what if we want to call a function outside its scope(through reference). Lets see how.

Take a look at this code:

Here, c is not in the reach of function a and b but still they show c as 3 and 4. Surprised?How did this happen?

Think a bit and you will notice that the returned anonymous function in both the cases have their own copies of c attached to them and when they are called, they use their own copy of c .

Well ,in simple words that is closure. A function has a copy of the whole chain of variables in outer scope , and when it is called anywhere(through reference) it will easily recall all its outer scope variable at the time of its creation.

In the above code when you add the following code:

You would see the copies that were made.

Crome (console)

Now I hope you have understood what closures are .

Global

Allow me to recall the first example :

Do you really think there is need for copies of global variables to be attached with functions? The answer is no. Why?

Its because global variable are created once and that is when we run the program .Its new copy can only be made by running the program again (because they are not inside any function they are in a program global space) , so attaching them to function might be a waste of memory . That is why javascript function do not attach global variables with them , they are accessed directly as they are made once for the whole program.

so if you do a console.dir(timmy) for above code then you would see global variable b under global tag:

In the beginning, I said that I’ll explain closure to you in the most simplified way. Here we are at the end and I hope I did a good job.

Well this sums up this post.

Explore more , code more.