Closure
A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).
If you want to know about closure for an interview or exam-related purpose, you can learn the above definition and stop, but if you want to know, What is closure? How does closure work? Why closure is important? Where to use closure? Then let's take a deep dive into it and decode Closure.
Let's Decode Closure
Closure is like your Ex-Girlfriend or Ex-Boyfriend, Even though you are not with each other but you still have memories of each other.
Or In Technical Word
Closure means that an Inner(Child) Function always has access to the variables and parameters of its Outer(Parent) Function, even after the outer function has returned.
Let's understand it with some code
const counter = function () {
let initial = 0;
return function () {
initial ++;
console.log(initial );
};
};
const count = counter();
Here, The function counter is returning another function when we call the counter function and its value is stored inside count which is also a function now.
Before our code runs, Our code will be stored in the Global Execution Context, and there we will only have a counter function.
When the counter function is executed a new execution context is put on top of the execution stack and each execution stack has a variable environment that contains all its local variables.
When the counter function is executed it returns a new function which is stored in the count variable and now Global Scope contains counter = {function} and count = {function} when the counter function return (execution is complete) its execution stack pops off the stack and disappears. So the counter function has done its job and is gone now.
As of yet, we haven't met closure all we did is understand behind the scene of counter function.
Now let's call the count function.
count(); // 1
count(); // 2
count(); // 3
So this means the count function was able to increment itself to 1,2, and 3, But if we think about this then how is this even possible? How can the count function update the initial variable which is defined inside the counter function and which has **already finished executing? **As its execution context is no longer in the stack.
You beautiful and smart people must have guessed it, So what makes this possible is Closure*.*
The **counter **is simply a function that exists in the global environment or global scope, and the environment (Basically counter environment) in which this function was created is no longer active but still, the count function somehow continues to have **access **to the variable that was present at the time function was created in this case **initial **variable and that's exactly what closure does.
We can say closure makes a function remember all the variables that existed at the function birthplace and Any function will have access to the variable environment in which the function was created.
In this case, the count function was created in the execution context of the counter. So therefore the **count **will have access to the variable environment and this is how the count function was able to read the variable(initial). So this system or method or process is called Closure.
Till now, We have understood What is a closure? and How does closure work? now let's understand Why closure is important? Where to use closure?*
Why closure is important?
Closures are important because they control what is and isn’t in scope in a particular function, along with which variables are shared between sibling functions in the same containing scope.
Where to use closure?
Closures can be used in JavaScript for** object data privacy**, in event handlers and callback functions, and in **partial applications, currying, **and other functional programming patterns.
Let's connect!
Follow for more articles :)
