Closures in JavaScript

How does a closure work in JavaScript

What is a closure 🤔💭 ?

A function that is returned with its lexical scope forms a closure 👌

Before jumping directly into closures we will discuss a little bit about the lexical scope

A lexical scope is an environment that is determined based on where the function has been declared. It means if a function is declared inside another function then the child function will have access to its parent function scope as well.

Image 1 — Lexical Scope Example

In the above example, the function is giving output as “30”, because when you call parentFunction() it creates a variable “a” in its local scope (function scope) and it has childFunction() in it and we are calling the childFunction() in an image — 1 line no — 7.

When you call childFunction() it creates variable “c” in its local scope and in an image — 1 line No — 5, we are returning the output by adding the “variable a” and “variable c” values which give you value 30 as an output.

Here the question is “How childFunction is getting access to the variable that is not there in its scope (local scope) and how it is accessing the variable from its parent scope (Lexical scope)?

Image 2 — Scope Chain Example

Explanation: In the above example when childFunction() tries to access variable c, so first it will check for the variable in its local scope, and the variable c is present in its local scope so it will take from there and when it tries to access variable a, then it will first check in its local scope and if it is not finding the variable then it will search in its lexical scope (You can see the scope chain and variables present in it with the help of image 2 Ex: variable a ) and the variable a is there in the lexical scope and it takes the value from there and uses it.

For childFunction() → parentFunction() scope and Global scope will be the lexical scope.

For parentFunction() → Global scope will be the lexical scope.

Now we will see an example of Closure 😍

Image 3 — Closure Example

Now you will understand why we discussed lexical scope before this

Explanation: When we call the outerFunction() it will create “variable nameOne” in its local scope and it is having innerFunction() in it and it returns innerFunction() as output.

And when you try to execute the innerFunction() then it will give you the output as mentioned in the above Image — 3 line No — 7.

As discussed before, a closure is formed when you return a function with its lexical scope

By this time, you should have a clear understanding of why we are getting the output mentioned in Image — 3 line No — 7.

Image 4 — Scope Chain Screenshot

Explanation: In closure example line No — 9, When you return the innerFunction(), it means the innerFunction() forms a closure with its lexical scope (Parent Scope) where it has access to all the variables of its parent scope (You can see the closure and the variables present in the parent scope with the help of Image 4 Ex: variable nameOne). so when you try to execute the innerFunction() even after the outerFunction() has completed its execution. You can get access to all the variables present in its parent scope and global scope as well. (Thanks to Scope chain and Closures 😊😍)

If you didn’t understand, read the explanation once again with the help of mentioned screenshots, which will help you to better understand.

Having issues? Please do let me know if you have any questions in the comment section

Thanks for reading ❤️

Happy Coding 😊