Closures in JavaScript

JavaScript has some very features which sometimes makes the newbies scared. One of them is closures. It is one of the unique features of JavaScript.

To define closure we can say that, it is a feature where the inner function has the access of the property/variable of the outer function. The important thing closure only works for a function nested inside another function, since we can write functions inside functions in JavaScript.

But the thing is the inner function can access the property/variables of the outer function, not the parameters.

So, closure has two prerequisites,

· There will be nested functions

· The inner function can access only the properties/variables of the outer function

Let’s look at an example,

function Hello(){
var a=”Hello”
function Zero(){
console.log(a)
}
Zero()
}
Hello()
//output
//Hello

Here, Hello() is a function which has returned another function named Zero(). Outside Zero() and inside Hello() there is variable named ‘a’ which holds a string. We called Zero() inside Hello() since Zero() is defined inside Hello(). So, when we call Hello() both Hello() and Zero() will execute. Inside Zero(), there is console.log(a) which print the value of ‘a’.

Remember, ‘a’ was outside Zero() but it can access the variable because of closure.

This is closure. Easy right?

Now let’s dive deeper by looking at the following code,

function outer(){
var b = 20
return function inner(){
var a = 10
console.log(“a = “+a)
console.log(“b = “+b)
console.log(“”)
a++
b++
}
}
var in1= outer()
var in2= outer()
in1()
in1()
in1()
in2()
The output,
a = 10
b = 20
a = 10
b = 21
a = 10
b = 22
a = 10
b = 20

Here, we stored the returned function. This outer() function has a variable ‘b’ and a function inner() that is returned. When we call the function outer() to a variable, it returns and store the inner() function to the variable.

Now, that’s the tricky part. After storing the inner function inside in1, we called it three times. The function inner() prints the value of ‘a’ and ‘b’ and increments those. In the first call, the output was 10 and 20.

In the second time, the output was 10 and 21. Because, ‘a’ was inside inner() but b was outside inner() but inside outer(). In each call of a specific variable, like in1, ‘b’ remains because the outer function existed but the inner function gets destroyed after execution. Because of closure ‘b’ gets incremented by the inner function. So, after each call ‘a’ is newly created but ‘b’ stays.

So, every time you call in1 here, the value of ‘a’ always remains constant but, ‘b’ always gets increased by 1. No matter how many times we call in1, the inner() function gets executed.

In the third time the output will be 10 and 22.

We called outer() to another variable in2. Just like earlier, after calling in2 for the first time, the output will be 10 and 20.

So, the summery is,

1. When in1 is invoked for the first time, the a is created and set to 10 and b shows 20 and gets incremented.

2. When in1 is invoked for the second time, a is created and set to 10 and b shows 21(from the previous increment) and gets incremented.

3. When in1 is invoked for the second time, a is created and set to 10 and b shows 22(from the previous increment) and gets incremented.

4. When in1 is invoked for the first time, the a is created and set to 10 and b shows 20 and gets incremented.

Conclusion

Closures are one of the confusing features of JavaScript. But it is very essential. Once understood, it will look like a piece of cake.

Hopefully this helps you understand the concepts of closure.