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.
Example1
<!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 4
In 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.
The entire body of function innerfun() is returned and stored in the variable output, due to the statement return innerfun. The inner function is not executed only by using the return statement; it is executed only when followed by the braces ().
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
4 4
In 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.
Now, there is another example of closure within a loop.
Example3
<!DOCTYPE html>
<html>
<head>
<script>
function fun()
{
function closure(val)
{
return function()
{
return val;
}
}
var a = [];
var i;
for (i = 0; i < 5; i++)
{
a[i] = closure(i);
}
return a;
}
var output = fun();
document.write(output[0]());
document.write(" ");
document.write(output[1]());
document.write(" ");
document.write(output[2]());
document.write(" ");
document.write(output[3]());
document.write(" ");
document.write(output[4]());
</script>
</head>
<body>
</body>
</html>
Leave a Reply