What the hell is Closure in JS?

Solid defination as per doc
"A closure is a combination of function bundled together with references to its surronding state (the lexical enviromenet). In other words closure give access to outer function scope from inner function."

No i am going to break down this defination in detail step by step and I believe after reading this blog you will never get confused while giving answer to closure in your next interview.

A closure is a combination of function bundled together with references to its surronding state (the lexical enviromenet)

okey so what does it mean I am writing a JS code then you will get idea what does it mean !

function outerFunction(){

    // lexical enviroment 
    console.log("outer function")
    function innerFunction(){
        console.log("inner function ")
    }
    // lexical enviroment 
}

Inner functions and Outer function are combination of two functions Ineer function is enclosed in the lexical enviroment of Outer function.

In other words closure give access to outer function scope from inner function

aha now you get the defination that how the innerFunction take access to outerfunction scope by printing the name variable Sameer in inner Function we are going to deep dive more.

Inner Function take reference to OuterFunction variable i repeat take reference let me show you how !

I have update the name after the innerFunction you might be thinking its going to print name Sameer in console but No as i said it takes the reference of the variable not going to create a new memory in a stack just take the reference of the variable that what a closure is.

You noticed something i am envoking a innerFunction in OuterFunction scope and then envoking a OuterFunction.

remember innerFunction always remember or maintined the reference of outer enviroment even after the execution of outerFunction see an example below in a code where i first execute a outerFunction and then calling a innerFunction.

Pro Tip🚀
An inner function can be directly called using two parenthesis ()() check code i mentioned.

Use case of closures
Closures can also be used for encapsulate data by allowing you to create private variables that are not be accessible from outside the scope that can only accessed or modified through specific functions .

here is the perfect example of code where we are modifying the values of counter with only the specific provided functions.
.

Okay now i have a question for you what if i create a new reference of the function and then again ivoke the incrementCounter guess !! lets look in the code.

hell Yes.. The counter is getting start from 0 and you know the answer right.

I hope now you got familiar with the closures and you can easily cracked interview questions about closure in JS.

well thats for it and I see you in the next one.😉