What is a Closure in JavaScript — A Comprehensive Guide

“What is a closure…?” This question must be very familiar to you if you have gone to interviews which test your JavaScript knowledge.

YES…. That is very common question in JS interviews. But the bad thing is, lot of JS developers failed to give a proper answer for this. Don’t worry…! Let’s learn today..

According to MDN,
“A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time”

Seems bit complicated right. Let’s simplified it…
“A closure is the function along with its lexical scope/environment bundled together”
Simple like below image, isn’t it…😎

In above circumference function has below qualities,
1. Returning a function and that anonymous function keeping a reference to pi which is in the lexical environment.
2. Here, pi act as private property of circumference function and Only can be accessed via privilege function. Here it is an anonymous function.

So… circumference is a Closure.

Languages such as Java, C# allow us to create private methods. JavaScript previously didn’t have a native way of declaring private methods, but it was possible to emulate private methods using closures. Private methods aren’t just useful for restricting access to code. They also provide a powerful way of managing your global namespace. Below code sample shows how to use closures to do that.

In above code, privateCounter variable and changeBy function in makeCounter function can’t be accessed from the outside of makeCounter function. But makeCounter function is exposing three functions to outside from it: increment , decrement and value. Those 3 functions are closures that share the same lexical scope and privateCounter and changeBy() can be accessed through those 3 functions.

Now create two instances from makeCounter function and use increment , decrement and value functions as below and check how it behaves.

Notice how the two counters maintain their independence from one another. Each closure references a different version of the privateCounter variable through its own closure. Each time one of the counters is called, its lexical environment changes by changing the value of this variable. Changes to the variable value in one closure don't affect the value in the other closure.

Use cases of Closures

1. Data privacy
2. Event handlers and callback functions
3. Functional programming patterns
4. Module design pattern
5. Partial applications
6. Currying

Now you are going to read most interesting thing in this article.
How your closures knowledge will be tested in an interview…

Interviewer: What is a closure?
Me: ☝️☝️☝️……..💪😂

Interviewer: What is the output of above code?
Me: 20
Interviewer: Can you explain how you got it?
Me: Inside y function keeping reference to z , not its value.

Interviewer: What is the output of above code?
Me: It will log five times 4 to the console.
Interviewer: WRONG…! not 4.. It is 5..😏

Me: Impossible. How it was 5…?
Interviewer:😎..(Himself: That was the answer in the article which I found after googling JavaScript interview questions😟)

Just for fun…😂 He is not that type of guy. He is very smart.

Interviewer: I want to change above code to print 0–4 in five lines. How do you change it?
Me: We can change it like below…😎

Interviewer: Okay… That is correct. But you can’t remove var from initialisation . How to do it?
Me: …..😭
Interviewer: Please don’t cry. I will tell you. You can do this with the help of JS Closures as below.

Interviewer: How many closures are in above code sample?
Me: 2

Interviewer: Now How many closures?
Me: Please comment the answer…😎

Hey, I am Sudarshana. I am available for freelance work. Say Hi on LinkedIn