Skip to main content
HashnodeMansoor Ameen's Blog

Command Palette

Search for a command to run...

Understanding "Closures" and Lexical Environment

Couldn't understand closures? Let's clear this.

Updated
•2 min read
Understanding "Closures" and Lexical Environment
M
Mansoor Ameen

What is Closure ??

Heard someone saying "this piece of code is possible because of closure" ?!

Most probably you encountered this word somewhere in your coding journey.
One of the core concepts that every JS developer should know.

Well, what is closure anyway?

Here is the definition:

Functions along with its lexical environment(surrounding state) are called Closures

oh wow wait wait.... what is lexical environment??
There is no going further without knowing this one.

Lexical environment is the local memory plus the lexical environment of the parent

...That ain't helping! I know.

So whenever an execution context is created a lexical environment is also created internally.
Say for a function, this lexical environment has all the values of that function(local memory) plus a reference to its parent.

If all these terminologies like execution context, seems confusing, I suggest you read the below blog-
How JavaScript works 👈 It has more than 1K views.

Le's see an example: 

function a() {
    var num = 10;
    function b() {
        var newNum = num + 5;
        console.log(newNum)
    }
}

Here we can say that function b is sitting lexically inside function a.

So, lexical environment of function b is the local memory of b (which has those two lines of b) plus the lexical environment of function a(which has var num).

Okay, so what is the lexical environment of function a? Local memory of that function with a reference(lexical environment) to its parent, which is the global memory.

Now you got what is Lexical Environment ( I guess...if confused, drop in comments )

Okay, that was something, but hey, what's closure?
Yo, please don't give me another big explanation!

This itself is Closure!! In JavaScript, functions form closures. Hence the inner functions can access variables that are outside the function.
[updated on 30/7/21]

That's it for now :) Let's catchup on twitter

#javascript#programming#functional-programming#js#closure
225 views

Comments (1)

Join the discussion
P
Paarth Bajaj4y ago

Now if you combine all those functions (not one, but all) with each of their lexical environment, that is called Closure! Explain this in the code please.

1
M
Mansoor Ameen4y ago

If you see the code mentioned in this post on the top, that itself is a closure(the function b has access to var num that is outside the function b, which is also its lexical environment). What I meant by "combine all those functions (not one, but all)" is that, if you had many nested functions here like:

function a() {
    var num = 10;

    function b() {
        var newNum = num + 5;
        console.log(newNum)

        function c() {
            console.log(num)

            function d() {
                console.log(num)
            }
        }
    }
}

each of these functions has its own lexical environment, right? And this whole code is called closure[ combine all the lexical environments, you get a closure]. As it is closure, all these functions will have access to var num, and also any variables declared in the global scope.

I think that last line in my post is confusing. Will update it.

1
P
Paarth Bajaj4y ago

Which one is a closure? function a or function b or function c or function d ? Which one ? If not function then from which part to which part, I should say that it is closure? Mansoor Ameen

M
Mansoor Ameen4y ago

Paarth Bajaj Functions form closures. Here each function forms a closure, and that's why they can access var num.

1
P
Paarth Bajaj4y ago

Thank you for answering my stupid doubts! Mansoor Ameen

1
M
Mansoor Ameen4y ago

Paarth Bajaj Glad to be of some help :)

1

More from this blog

M

Mansoor Ameen's Blog

6 posts