Closure in Javascript

Photo by Claudio Schwarz | @purzlbaum on Unsplash

What is closure?

The closure is a feature which allows the functions to remember the environment where it was created. Let’s get into an example and understand it together.

Overall view of the above code is, the outerFunc() function is defined which has a variable n inside its scope that is its local scope. It then returns a function which in turn returns results after some arithmetic operation.

Let’s understand the above code step by step:

1. When the outerFunc() function is called, variable n is created and its scope is limited within the outerFunc().
2. The next line is a function declaration for innerFunc().
3. Within innerFunc() ,variable z is defined& declared whose scope is limited to innerFunc()
4. The next line return innerFunc , returns the whole body of innerFunc() as this is the only thing which is defined within the outerFunc()
5. Now the body of innerFunc() is stored in the outerCall variable
6. Finally outerFunc() finishes its execution and variables within that scope no longer exist.

You might be thinking that how then after the execution of outerFunc() ,innerFunc returned to the outerCall variable gets access to the local variable of outerFunc(). See the below image

When the console.dir(outerCall) executes it prints something on the console of the browser. The local variable n of outerFunc is still there with a tag “Closure” even though the outerFunc has already been executed. Hence the innerFunc gets its access. We can also see from above that innerFunc has access to its scope, to its global scope, and the function in which it is enclosed.

Let’s take one more example

The output of the above code

Here we see that the local variable n remains same for the all the calls of outerCall() and for the nextCall() the local variable value changes. The local variable of outerFunc remains preserved as closure and it is accessed by the innerFunc for every outerCall.When the outerFunc() is again invoked in nextCall it creates a new local variable and its access is given to its inner function,

From the above we can see that for the first three, the local variable of the outerFunc is preserved as closure for its innerFunc, and as soon as the new call of outerFunc takes place a new local variable is created, and that preserves for its new innerFunc.

If we go to the point where we started that function remembers the environment in which it was created is hence proved. And this is what closure is !!!

Use cases of closure

1. For writing callbacks
2. Event handlers
3. On using setTimeout and setInterval
4. Keeping variables private within a function

I hope you understood the closure.

Thank you ✨✨

Happy Coding !!