A closure can be defined as a JavaScript feature in which the inner function has access to the outer function variable. In JavaScript, every time a closure is created with the creation of a function.
The closure has three scope chains listed as follows:
- Access to its own scope.
- Access to the variables of the outer function.
- Access to the global variables.
Let’s understand the closure by using an example.
<!DOCTYPE html>
<html>
<head>
<script>
function fun()
{
var a = 4; // 'a' is the local variable, created by the fun()
function innerfun() // the innerfun() is the inner function, or a closure
{
return a;
}
return innerfun;
}
var output = fun();
document.write(output());
document.write(" ");
document.write(output());
</script>
</head>
<body>
</body>
</html> Output
4 4In the above program we have two functions: fun() and innerfun(). The function fun() creates the local variable a and the function innerfun(). The inner function innerfun() is only present in the body of fun(). The inner function can access the outer function’s variable, so the function innerfun() can access the variable ‘a’, which is declared and defined in fun().
This is the closure in action in which the inner function can have access to the global variables and outer function variables.
In the output, the code will display the value of the variable ‘a’, defined in the parent function.
Now, there is another example in which we will use the parameterized function
Example2
<!DOCTYPE html>
<html>
<head>
<script>
function fun(a)
{
function innerfun(b){
return a*b;
}
return innerfun;
}
var output = fun(4);
document.write(output(4));
document.write(" ");
document.write(output(5));
</script>
</head>
<body>
</body>
</html>
Output
16 20In the above program there are two parameterized functions: fun() and innerfun(). The function fun() has a parameter a, and the function innerfun() has the parameter b. The function fun() returns a function innerfun() which takes an argument and returns the multiplication of a and b. In the program, the output is the closure.
Closures are one of the slightly difficult to understand concept of JavaScript, but try to practice the closure in different scenarios like to create callbacks, getters/setter.
