Closureeeeeee...... before jumping into the closure you should know how the javascript works behind the scene ?

Many developers find this topic difficult to understand, let's find out what the hell this closure is.

First, find out how you gonna understand this topic, the topics I'm going to cover in this blog

1. What closure is?

2. Where can i see this closure ?

What Closure is?

According to the MDN docs, it says "When a function bundled together with its lexical scope forms a closure " >>> What ?? Did you understand that

Here is the easiest definition I got "When a inner function have access and remember the reference of the variable of outer function , even after the execution of outer function forms closure "

one more definition would be "A closure gives a function access to all the variables of it's parent function , even after that parent function has returned . The function keeps a reference of it's outer scop, which preserve the scope chain throughtout time "

if you ever build a project, you saw this closure but you do not recognize, that this is closure

You do not use it as you use Array or object this is automatically happens in your code.

The closure is not a feature of javascript that is going to solve a specific problem

Let's understand with an example

function incrementCount(){
     let counter = 0;
     return function(){
        counter++;
      console.log(counter);
    }
}

const increment = incrementCount();
increment()
increment()
increment()

In the above example we have a outer function incrementCounter which have a variable counter initialize as 0 , this function is returning an anonymous function in which the counter in incremented and printed on console .

After that the function is stored in a variable increment and call it three time .What is going to be the output ? let's see

So you got the incremented counter , did you notice that how the inner anonymous function get access to the variable counter , and also whenever it called it always increment the counter , this is because closure it remembers the reference counter

let's go more in depth , so what happen when this code execute , a global execution context is created and pushed onto the callstack , here the global execution context has the function incrementCount remember that for every function call a new execution context is created , after that when the first function call execute incrementCount() , it forms a function execution context and pushed on the stack for execution , it has a variable counter in it's local memory and then it return the function , after that the function execution context is moved out of the callstack , now the next line execute and a new function execution context is created for increment() , now it doesn't have any variable declared in it , how can it increment the counter then ???

It has access to the lexical environment of it's parent , so now this function got access to the counter variable throught scope chain .

So this function forms a closure and have a counter variable in it , now when it's value incremented , it remembers that it's value incremented .

So that's how the next function call execute one after another

Where can i see this closure ?

Have you heard of function curring , it's a technique in functional programming in which a function with multiple argument is converted into the function with single argument and returned from the outer function.

let's see an example

// without function currying
 function sum(a,b,c){
  return a+b+c
}

sum(1,2,3);
// output 
6
// with function curring
 function sum(a){
  return function(b){
    return function(c){
        return a+b+c;
    }
  } 
}

let result = sum(1)(2)(3)

here you can see that the most inner function have access to the arguments of the outer function , that's because of closure .

So Hope you understand what closure is and where you can see it.

Thank you for reading this article!

If you enjoyed this article and want to learn more about Javascipt , follow me on LinkedIn at Himanshu Singh , where I post regular updates .