Closures in JS 🔥

In this blog, we are going to learn about closure the most important topic in javascript. Now if we try to understand the theoretical part and definitions then
we may remember this topic week or max month. So rather than going with the
theoretical part let's understand with different examples.

WHAT IS CLOSURE?
Definition: Function along with its lexical environment forms a closure. Yep it's
hard to understand from the definition even but I promise if we will see a few examples and try to understand closures from there then it will be really easy to understand.

Let's understand closures with the below example.

index.js

function a(){
 var x = 10; // line 1
 function b() {
    console.log(x) // line 2
  }
  return b; // line 3
}
const z = a() ; // line 4
console.log(z); // What do you thing will happen here line 5
console.log(z()); // line 6

Now in the example, we can see one thing we are returning the function at line number 3 and this is one of the most incredible features of javascript that in
javascript you can return functions from one function and also you pass functions as parameters.

So here in line 4, we are invoking the function a() and from function a() we are returning function b(). So what do you think the output will be here? If you would
have an idea of SCOPE CHAIN AND LEXICAL ENVIRONMENT then you would have
guess it correctly but if not then let's learn together.

As we know as soon as the function is done executing all the lines of code then it
will be popped out of the call stack. Let's see how the function a() will be executed.

Function a() execution :
Execution context for function a() will be created.
In the memory creation phase, memory will be assigned to variable a with a value undefined.
In the code execution phase, value 10 will be assigned to variable a and apart from
that we are just returning function b() as soon as we reach line number 4 function
a() is done with its work and it will return function b().

Now real questions come will variable a will still be in function b() because function a() is done with its work and it's already popped out from the call stack. Let's simple
yes it will be in function b() BECAUSE WHEN YOU RETURN THE FUNCTION THEN NOT ONLY THAT FUNCTION GET RETURNED BUT ALSO LEXICAL ENVIRONMENT
OF THAT FUNCTION WILL BE RETURN.

// output of line 5 nothing intersting it will just print the
// entire function code.
// This is output of line 5
 function b() {
    console.log(x) // line 2
  }
// And as soon as we run the line 6 it will print the value of of
// x which is 7

Now how I understand this concept is see before function a() gets popped out from stack javascript check if any of the variables of the function a() is used outside or
still in need then don't remove those variable from stack because in the future may be function b() get invoked and use that value of x. Let's take one more example and
understand it in a better way.

function a(){
  var x = 10;
  function b(){
    console.log(x)
  }
  x = 100;  // This is the only line we added in above program
 return b; 
}
console.log(a()); // Question is what will be the value of x 10 or 100

In the above example, we are assigning a new value to variable x and then we are returning the function so the question comes to mind will it print the value 10 or 100? And the answer is it will print a value of 100 because when you return the function at that time with the lexical environment reference of variable x will be stored not the value so even if you change the value of x 10 times in the program then the recent update value will be printed in function b() because it holds the reference of variable x, not the value.

One last thing to learn about closure is that it not only works for imidate parent function but for any level for the nested function. See the example.

function a(){
  var x = 10;
  var out = 100; // New thing to learn
  function b() {
   var y = 100;
     function c (){
      console.log(x); // using variable of function a
      console.log(y); // using variable of function b
    }
    c()
  }
  b(); 
  console.log(out); // Only used inside function a()
}

a();

Here function c() is using variable x from function a() and variable y from function b() and even after functions a() and b() will be popped out from the stack still function c() will hold the reference of those variables. And we can see that we have one more
variable with a name out and this variable is used only inside function a() so in that
the case when function a() will be popped out from the stack then the variable will also get removed from memory because javascript understands that it's used nowhere in the program now.

That's all about Closures in JS. And thanks to Akshay Saini for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.