If you ever wrote a program in JavaScript, it's 99% likely that you came across closure. You might have used closure, but still might not know what was closure.
Coding in JavaScript without an understanding of closures is like trying to speak English without an understanding of grammar rules — you might be able to get your ideas across, but probably a bit awkwardly.
Therefore, let's try to understand it in this blog.
If we look at the definition of closure in MDN docs, it says,
A closure is a combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.
Let's try to break it down and understand. Look at the code below
function one(){
let a=5;
return function(){
console.log(a);
}
}
const res = one();
/*
Some code in between
*/
res(); //what will be output? 5 | undefined | reference error
Can you guess the output? Let's find out..
If you are aware of how JavaScript execution works, you might know that for each function call, an execution context will be created in the call stack, with its variable environment which also has access to its lexical parent scope. But once the function is completely executed, its execution context vanishes from the call stack and it loses access to the variables defined in that scope.
So if we look at the code shared above, once function one is completely executed you can no longer access "a", so by logic if we run function res, which basically stores the return function of function one, we expect to get a reference error.
But it doesn't happen, we will get 5 as output.
5
Hint: hit control+c anytime to enter REPL.
Here comes the closure in the picture.
A closure gives you access to an outer function’s scope from an inner function. In JavaScript, everytime a function is created, a closure for that function is also created that gives you access to outer function's scope.
There are also some important points to keep in mind, about closures, in the code above, if we do some changes:
function one(){
let a=5;
function b(){
console.log(a);
}
a=50;
return b;
}
const res = one();
/*
Some code in between
*/
res(); //what will be output now? 5 | 50
Now look at function one, just before returning the function we changed the value of a, so now guess the output? Will it be again 5 or this time output will be 50?
So, here another thing to keep in mind is that closures stores the reference of the variable, not the actual value, so whatever changes you do in a, that change will be reflected in function b;
Hence, the output will be 50 here.
This flexibility makes JavaScript so powerful and special compared to other languages.
Some of the areas where closures are being used are:
- Currying
- Memoize
- Iterators
- Timers
Basically every place where you would need to access the outer lexical scope, closures are used.
Thats all for now, If you liked it, share your views in comment and like the blog.