If you are working on javascript so you have heard the word Closure.It is a concept in javascript which is important in many ways.

I am writing this blog to help you, so you have clarity in your mind about how it works

so, let's dive into it

Prerequisites

You should have an idea of how javascript run's the code, know the concept of let and const.

How does javascript run the code?

When our functions get called, we create live data for that function execution context.

 function outerFunc(){
        let counter = 0;
        function innerFunc(){
         counter++
    }
  innerFunc()
}

outerFunc();
//Global Memory 
outerFunc: function // function outerFunc will be store

so what will happen local execution context will be created for the outer function.

• Outer function local memory will be created, counter and innerFunc will be hosted
• then innerFunc will be called it local execution context will be created
• Then counter will be increment at the innerFunc execution context.

Counter = 1

But How do we get a counter?

• It will find a counter in the local memory of the outerFunc? It is where we define the function
• where the function is called?

Let's try a different way

way to run a function outside to store in the variable

function outerFunc(){
      let counter = 0 ; 
      function innerFunc{
          counter++
      } 
      return innerFunc
}
const myNewFunc =  outerFunc();
myNewFunc()

// Global Memory(Memory Allocation) 
outerFunc : function // function outer func will be store 
myNewFunc: undefined

Let's go step by step how javascript will run the code :

• outerFunc will be called, then outerFunc will be on the top of the call stack. outerFunc execution context will be created.
• Local Memory will allocate memory to counter and innerFunc
• return statement will give a sign to javascript to return the innerFunc to MyNewFunc.outerFunc execution context will be deleted. It will pop off from the call stack.
• myNewFunc() will be on the top of the call stack. Execution context will be created for MyNewFunc, so it will increment counter again

How it will happen? so what is your intuition?

Nothing will happen. code may break.

but

Counter = 1

Javascript has a feature known as persistent local scope reference aka Closure.

so it works in a lexical environment? lexical means kind of ordering things. how counter++ can increment the value because it has the access of variable of parent function it is known as lexical scope, the existence of innerFunc and local scope is known as lexical environment.

When any function comes into existence it has the hidden property known as [[Environment]] or [[Scope]] (both are the same called differently), it is the bond between local memory through the scope. It has reference to the local scope.

so, will 1000 variables in lexical scope will be in memory all the time no Javascript engines are too smart they will delete all variables that are not in use, it is known as garbage collection.

const myNewFunc = outerFunc()
const myNewFuncTwo = outerFunc()
myNewFunc()
myNewFuncTwo()

//Global Memory(before call)

myNewFunc:{
   counter:0
   function(){
        counter++
   } 
}
myNewFuncTwo:{
   counter:0
   function(){
        counter++
   } 
}
//Global Memory(after call)
myNewFunc:{
   counter:1
   function(){
        counter++
   } 
}
myNewFuncTwo:{
   counter:1
   function(){
        counter++
   } 
}

so what does it means each function have own cache.

Finally complete!🥳

Conclusion

we learn about closure with how Javascript runs code, and know the magic lexical environment and hidden property [[environment]] or [[scope]]. If you want to know Garbage Collection

Love to know the views on this blog. Please comment down