Closures in Javascript
What Is a closure?
Closure is nothing but the inner function having the access to variables and parameters of its outer function. Even after outer function has returned.
To understand closures better you should be familiar with the fundamental terms scope and lexical scope. Once you are familiar with scope and lexical scope you are one step ahead from closures.
Scope
scope is limiting the accessibility of variable and not having availability everywhere in the code. One of the major advantage of scope is some sort of security to the code, Scopes can be layered in a hierarchy in which child scopes have access to parent scopes.
function exampleFunction() {
var x = "declared inside function"; // x can only be used in exampleFunction
console.log("Inside function");
console.log(x);
}
console.log(x); // Causes error
The lexical Scope
Lexical scope has a set of rules for defining a variable in a program, when the program is compiled. These rules cannot be changed while the program is executing.
Javascript has a mechanism for scoping called lexical scoping.lexical scoping means the accessibility of variables and also the position of the variable inside the nested scopes.
function foo(a) {
var b = a*2;
function bar(c) {
console.log(a, b, c);
}
bar(b*3);
}
foo(2);
closure
Lexical scope allows to access the variables of the outer scope, we are one step to the closure!
Take a look at the outerFunc() and innerFunc() in the example:
function outerFunc() {
let outerVar = 'I am outside!';
function innerFunc() {
console.log(outerVar); // => logs "I am outside!"
}
innerFunc();
}
outerFunc();
In the innerFunc() Scope, the variable is accessed from lexical scope.
Inside the innerFunc() the invocation happens at its lexical scope ( outerFunc() )
We will try to make a change innerFunc() to be invoked outside of its lexical scope (outerFunc()).
function outerFunc() {
let outerVar = 'I am outside!';
function innerFunc() {
console.log(outerVar); // => logs "I am outside!"
} return innerFunc;
}
const myInnerFunc = outerFunc();
myInnerFunc();
- innerFunc() is executed outside of its lexical scope.
- innerFunc() still has access to outerVar from its lexical scope. Even being executed of its lexical scope.
Advantages
- Closures permit us to store data in different scope and allow it only when needed.
- Closures allows us public varibles that are available even after the function task is completed.
DisAdvantages
- closures allows us to create function inside a function,which leads to decrease memory speed due to duplication.
- Closures make it complex to run Garbage collections,Which also leads to memory leak.
When to use Closures?
As we learned closures have advantages and disadvantages, it is also important to understand when we should use them.
- when we are using reusable states.
- Creating private namespace.
- When implementing the module design pattern.
Conclusion
A closure is bundling of function together with reference to its surrounding state(lexical environment).In other words closure give access to outer scope of a function from an inner function.
4.png)
