Javascript Closures Explained

August 03, 2019

You must have heard of the term closures in Javascript & found it really difficult to understand this topic. Well! Don’t worry. By the end of this article, you will grasp a firm understanding of Javascript closures.



I found a lot of articles on closures, but none of them explained to me what closure is in isolation.

Nested Functions

A closure can be imagined as a function returning another function.
Unable to understand? Let’s start learning this with an example.
Consider the following method:
function outer() {
    var temp = 10;    function inner() {
        return temp;
    }
}
This is an example of nested methods where one method is inside the other. The method outer() has a variable named temp with value 10. The outer()method also contains a function in it with the name inner()Since the inner function has access to the variable temp, the inner function can operate on the variable temp in any way it wants. Here, it is just returning the value of temp.

Closures

We will use the above example of nested functions & the scope management (like temp is accessible in the inner() above) to understand the concept of closures.
Now, we will modify the above outer() method in the following way:
function outer() {
    var temp = 10;
    var innerFn = function() {
        return temp;
    }
    return innerFn;
}
Here, everything is same. The only difference is that we kept the reference of the inner() method in a variable & we returned that function reference from the outer().
So, when we try to call method outer(), we will get a function reference in return like:
var demo = outer();
Here, the variable demo will contain a reference to the inner function as it has a function reference as a return value.
So, we have a function reference in the variable demo & we can call the inner() by calling the demo().

As you can see in the image, when we try to print the value of demo it returned the function definition & when we call the demo()we get the value 10.

One more example

Now consider the following method
function initializer() {
    var counter = 0;
    var incrementFn = function increment() {
        counter++;
        return counter;
    }    
    return incrementFn;
}
Here, we have an inner function named increment() that will act upon the variable named counteravailable in the scope. The outer function named initializer returns the increment function reference.
We can have the inner function reference in a variable like:
var incrementer = initializer();
Where variable incrementer will have the reference to the function increment() & which we will call as a function to increment the value each time as we call it.
We will call it like:
incrementer();

As you can see in the screenshot, as the image shown above, incrementer is a function that increments the value counter & returns its value.
Also notice, when we call the incrementer() again & again, the value gets incremented each time we call it.
This is because we have a reference to the increment method & every time we call that method, the variable named counter is incremented by 1.The same variable is updated every time we call the method incrementer().
This is what closure is.
A function maintaining its own state.
In the above case, the incrementer function maintains the state of variable counter & is referred to as closure in Javascript.

Multiple Closures Initializations

Now consider these two statements:
var incrementerA = initializer();
var incrementerB = initializer();
What if we first call incrementerA, then incrementerB?
Will calling incrementerB will give value 2 or something else?
Try to find out on your own & then look for answers below…
….. try to think
.
.
.
.
….. try to think
.
.
.
.
done?

As you can see in the image, both returned the value 1. But why? This is because we created two different initializers & both are independent of one another. Although, both when called again, will return the value each, since both are isolated, calling incrementerA() will not affect incrementerB or vice versa.

You Might Also Like

0 comments

Follow by Email