Understanding Closures in JavaScript!

Let's learn How Closures Work in JavaScript

Understanding Closures in JavaScript!

Closure is considered an advanced concept in JavaScript. It may take while to understand the concept fully.

Understanding closures will help you to write better, efficient and clean code. Which will in turn help you become a better JavaScript developer.

In this article, I will try to explain the internals of closure and how it really works in JavaScript.

So without further ado, Let's get started giphy.gif

What are Closures?

A closure is the combination of a function bundled together with reference to its surrounding state (the lexical environment).

In other words a closure gives each function in JavaScript access to its parent function's scope or outer function's scope.This means closure can remember and access variables and arguments of its outer function.

Suggestion: Read about Execution Context, Scope and Scope Chain in JavaScript to get better understanding

Let us start with a simple code example,

carbon(1).png

Here we have a function parent() which consists of function child() and a variable a. We know that a function can access variables and arguments declared in its scope. Here you can see that the child function can access var a when we invoke the function i.e parent()() will console log a=0.

confused-unga.gif

Fair enough. But, we have few questions to ask and get clarifications about,

  • How did the child function gain access to variable of parent function?

  • What about scope here? The var a variable is in no way in the scope of child function. Then whys is it not showing error?

The answer is, it is working with the help of a JavaScript feature called closure

In JavaScript,

  • When a JavaScript program runs, a global execution context gets created.

  • When a function is invoked, a function execution context gets created.

  • All the function execution contexts refer to its outer environment, i.e the execution context of the function that has created is the currently running function.

  • Using the outer reference, the JavaScript engine determines the accessibility of a variable. This is called Scoping.

  • The variable's scope can be found by traversing through the scope chain leading up to the global execution context.

Anatomy Of Closure

In JavaScript, a function can be nested inside another function. The nested function is called inner function. This inner function can access the variables defined in the outer function's context. It is done by Closure. So, it is the inner function that creates a closure to the outer function.

Let us understand the execution steps of the above example in detail. Here is the code again,

carbon(2).png

  • A global execution contest gets created during the program execution phase, the function parent() gets invoked.

  • A function execution context gets created for parent() and it is added to execution stack. In parent()'s scope it has a variable a and it will be available in its execution context.

  • parent() returns the child function and pop out of execution stack.

  • But, hold on parent() returns child(). It means, the child function will create closure to parent function's execution context. With that, child() will have access to the variables and arguments present in the parent(). In this case the variable is a=10.

This is how closure helps retain access to the parent's execution context even after the parent function get executed and removed from the execution stack.

Tip: To get better understanding of the Execution Context and Scope in JavaScript play with JavaScript Visualizer

Conclusion

Closure is much easy to understand when you get to it conceptually with execution context and scope. I hope I made it easy for you and you will try many more examples with understanding we got here.

its-done-frodo.gif

Did you find this article valuable?

Support Arun Kumar by becoming a sponsor. Any amount is appreciated!