Contents
Closure is a powerful feature in JavaScript that enables you to extend the functionality of existing objects. In this post, we’ll explore what closure is and how it can be used to create more robust and reliable code.
Checkout this video:
What is Closure?
Most programming languages allow you to create variables that are only visible inside a certain block of code, usually within a function. These variables are called local variables. In JavaScript, any variable declared inside a function is local to that function.
When you return a local variable from a function, the local variable is only available inside the function. Once the function has finished executing, the local variable is no longer available. However, there is a way to return a local variable from a function so that it is still available after the function has finished executing. This is called closure.
A closure is a Function object that has access to variables in its lexical scope, even if the function is executed outside of its lexical scope. In other words, a closure is a function that has access to variables in outer functions even after the outer functions have finished execution.
For example, consider the following code:
function foo() {
var x = 10;
return function() {
console.log(x); // 10
};
}
var bar = foo();
bar();
How Does Closure Work?
In JavaScript, closures are created every time a function is defined. A closure is the combination of a function and the lexical environment within which that function was declared. This environment consists of any local variables that were in-scope at the time the closure was created.
In addition to giving us access to outer function variables, closures also give us access to the inner workings of outer functions. For example, we can add properties to a function object or even replace a function’s implementation entirely.
Examples of Closure in JavaScript
A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.
An example of a closure in JavaScript would be:
function outerFunc() {
var outerVar = ‘I am outside!’;
function innerFunc() {
var innerVar = ‘I am inside!’;
console.log(outerVar); // I am outside!
}
innerFunc();
}
outerFunc();
Benefits of Closure
The benefits of closure in JavaScript are that it helps to keep variables and functions private, making them only accessible within the scope of the function, and it also helps to create closures, which can be used to create callback functions. Closure also helps to make code more modular and reusable.
When to Use Closure
There are a few situations where closure is useful:
if you want to make a function that returns a new function with some preset parameters. For example, you might want to make a function that creates functions that multiply by a given number.
if you want to make a function that passes its parameters to another function, but doesn’t return anything itself. You might use this if you need to do some setup before calling another function, or if you need to do something after the other function returns.
if you want to keep track of data without attaching it to any particular object. For example, you might want to make a counter function that counts how many times it’s been called.
