DEV Community

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

Posted on • Edited on

10 4

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

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 .

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series