Understanding JavaScript Closure in depth

Srishti Prasad - Jun 18 '22 - - Dev Community

What is Closure in JavaScript?

It is a function bundled together with its lexical environment that is function along with its lexical scope is called closure.

So, let's understand closure and lexical scope with some examples:-

Example-1:

var y=2;
function sum(){
    var x=1;
    return x+y;
}
var z=sum();
console.log(z);

Enter fullscreen mode Exit fullscreen mode

ss152

In JavaScript, a variable defined outside the function is accessible from inside the function. This is possible because something called Lexical Scoping in JavaScript means anything defined outside can be accessed from inside of function but an inner variable can’t be accessed from outside function.

Example 2:

function x(){
    var a=7;
    function y(){
        console.log(a);
    }
   y();
}
x();
Enter fullscreen mode Exit fullscreen mode

ss148

The function y was bind to the variables of x that means it forms a closure and it has access to its parent’s lexical scope.

Example 3:

function x(){
    var a=7;
    function y(){
        console.log(a);
    }
   return y;
}
var z=x();
console.log(z);

Enter fullscreen mode Exit fullscreen mode

This will return the whole function y and print it in the console.

ss149

Example 4:

function x()
{
    var a=7;
    function y()
    {
        console.log(a);
    }
    a=100;
   return y;
}
var z=x();
console.log(z);
z();

Enter fullscreen mode Exit fullscreen mode

Function along with the reference to that value is passed not just the value.

Hence when we change the value of “a” it changes coz reference is being passed over the function.
Irrespective when we call that function ,it will maintain its lexical scope and will print the value.

ss150

Example 4:
Extending the above example to understand lexical scope in parent of parent function.

function z()
{
    var b=500;
    function x(){
        var a=7;
        function y(){
            console.log(a,b);
        }
        a=100;
         y();
    }
    x();
}
z();
Enter fullscreen mode Exit fullscreen mode

ss151

We can call function z anywhere it will sustain its lexical parent scope variable and we can call it anywhere ,it will maintain the values of variable of its parent.

If you have any questions, leave a comment and I'll do my best to respond.
Give this article a like if you found it helpful and follow me for more articles like this.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .