Closures In Javascript

Closures are the super-exciting topic of Javascript but at the same time it’s the most confusing topic too, so let’s dive deep into it in order to simplify it! Firstly define closure:

In Javascript, “Closures are the way to achieve lexically scoped name binding”. Technically, the lexical scope makes it so that every function value (i.e. every time when we return a function or assign a function to a variable) carries with it, the values of all variables that it depends on. The pack of records is what we call “Closures”.

Why do we need closure?

• Closure is the most beautiful part of Javascript and it has a lot of advantages. We can encapsulate the data so that other functions or other parts of the program cannot access it. It preserves local variables within the scope.
• There is something called module patterns and function currying in Javascript, closures are used there also.
• By that logic, if we want a function to always have access to a private piece of state, We must use “Closures”.

Let’s take an example to unpack it, what would be the output of the below function:-

As we all know, in Javascript, there is something called “Lexical Scope”. So when we execute, when y() tries to run, it tries to find “a” inside its local memory store and it doesn’t find it here so it goes to its “Lexical Parent” and it logs 19. So, let me tell you that, this is what  “closure” is!

Let’s dive deep inside the browser and into the console. Let’s just put a debugger right! Where?  Inside the inner function, just before the console.log(a), put a debugger and just hold on in our program then we can find the “Closure” over here!

What does this mean now? Interesting and weird at the same time. So, “Closure basically means that a function binding together with its lexical environment”.Functions along with their lexical scope form a closure. So, inside y(), it forms a closure with the variable which was the part of x()  lexical scope, they() was bound to the variables of x, so that means it forms a closure and it has access to its parent’s lexical scope. That’s what it is!

Let’s move to a little more complicated examples. As we already know that functions are like the heart of Javascript. We can assign functions to a variable and we can pass a function as an argument which many programming languages never allow us to do. This is the beauty of  JavaScript.Even we can return a function out of another function. That is where closure comes into the picture and becomes more complicated i.e. when we return any function outside.

Let’s take an example over here:

Here, we can see that we are returning a function. Let’s see the output for this:

Yes, it prints the function y. Now, if we invoke z(), let’s see with the output:

Output:

In this piece of code what happens is, at some point in our program we just want to call z(), Now it will try to find out ‘a’ but where is ‘a’? We are trying to execute z() outside, a is not there in the global scope and x no longer exists after line no.- 9. So, what will happen to this ‘a’, when we invoke z(), what will it print? It will print 19. Here comes closure into the picture. Functions are so beautiful when they are returned from another function, they still maintain their lexical scope,  They remember where they were actually present. Though x no longer exists still y()  remembers its lexical scope where it came from. They have a strong binding.

In a simpler way, when we returned y, it was not just that the function code was returned but closure was returned. That closure encloses the function along with its lexical scope that was returned. It was put inside z, so, when we execute z somewhere else in our program, it still remembers the reference to ‘a and it tries to find out the value of ‘a’ which is 19, and prints it. This is what closure is!!!