Do you know what is Closures in Javascript?

Hey guys, This is my second as a blog and first as a tech blog.

I wrote this blog to measure how I understand the closures and how I can explain them to others as well. Sometimes it happens to some of you that you can understand the topic but can't explain it to others as well, so writing a blog is good practice. So lets' start...

Note: If you are aware of basic functions behavior and execution context in javascript then it will be easy to understand closures.

What is closure?

According to MDN: A function bundled together with its lexical scope forms a closure. In simple words, A function that uses a value that is outside of its context(scope) is closure.

For example:

function outer(){
    var number=33;
     function inner(){
         console.log(number);
     }
     inner();
}
outer();

-> Even though the number variable is not in the scope of inner(), we can access it inside it. It is possible due to closures in js.

Let's dive deep into what's happening inside functions:

Scenario 1:

1.   function outer() {
2.     var number = 33;
3.       return function inner() {
4.           console.log(number);
5.       }
6.  }
7.  let functionReference = outer();
8.  functionReference();
// Output:
// 33

• The First 6 lines are a function definition so look at line number 7.

• In line 7 execution context and memory for the outer() will be created. variable number will be assigned to 33 at this stage.

• Reference of inner() will store in the functionReference variable and execution of outer() will be completed. so execution context and memory for the outer() will be empty after execution of line 7.

• After that, in line 8 we are calling inner() (functionReference is the reference of inner()) and it will print 33 at the console.

• Even if the memory for the outer() is empty though inner() will print 33 on the console because of the closures. inner() remembers the lexical scope of the parent's function even if it is outside of its scope.

Scenario 2:

1.  function demo(){
2.     var temp=22;
3.      return function outer() {
4.          var number = 33;
5.           function inner() {
6.              console.log(temp);
7.              console.log(number);
8.          }
9.        inner();
10.    }
11.  }
12.  let functionReference = demo();
13.  functionReference();
// Output:
// 22
// 33

• The above scenario is of nested closures.

• Same as like above scenario, at line 12 execution of demo() is completed and functionReference refers to the outer().

• At line 13 outer() calls and it will call inner() inside it, so outside of demo(), inner() remembers the lexical scope of outer() and its parent function(demo()).

• And it will print both the values of number and temp.

Conclusion:

• Any function which remembers the lexical scope of its parent function is closures. So all the variables and methods inside the parent's function will be remembered by the child function even if the parent's execution is completed.

• It's the very important concept of js in the context of interviews.

• I hope you understand something from this blog, if I was incorrect please give feedback in the comment section so I can improve.