DEV Community

Cover image for Understanding JavaScript Closure in depth
Srishti Prasad
Srishti Prasad

Posted on • Edited on

Understanding JavaScript Closure in depth

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.

Top comments (2)

Collapse
 
midhul profile image
Midhul P • Edited

Good one @srishtikprasad !

Now lets read - How to use this practically

Collapse
 
srishtikprasad profile image
Srishti Prasad

@midhul Thanks ! I would definitely go through this .