Understanding Closures in JavaScript

Photo by frank mckenna on Unsplash

A closure is a concept in JavaScript where one function has access to variables that belong to another function. The main thing about these two functions is that one lives inside the other where the inner one has access to the outer one’s variables. A closure is created whenever a function is created.

When a closure is created, it will have three scope chains: its own scope, the outer function scope, and the global scope.

• It will have access to its own scope where any variable is defined within its body.
• It will have access to the outer function variables.
• It will have access to any global variable.

Let’s just explain this by using a code example of a simple closure that you can run and practice using this link.

function outer() {
    var exterior = 100;
    
    function inner() {
        var interior = 200;
        console.log(exterior + interior);
    }
    
    return inner;
}

You see that there is an outer function and an inner function here.

The outerfunction has the variable exterior and notice that at the end it returns a reference to theinner function.
The inner function has its own variable interior and it also has access to the outer function variable exterior .

The variable exterior is accessible within the outer function scope, and the variable interior is accessible within the inner function scope. Let’s call the the outer function and store its result in another variable.

var result = outer();

Before discussing what result stores, let’s see what happens when you invoke the outer function:

• The variable exterior is created and stores the value 100 in it.
• The inner function is declared without being invoked.
• A reference of the inner function is returned.

Since a reference to the inner function is returned, that is what will be stored in the result variable.

Something you need to pay attention to is once the outer function is done with execution, all its local variables (in our example, exterior) will no longer exist. Ok, now, let’s try to invoke the inner function which we have a reference to it, result by adding parenthesis to it like this:

result();

Let’s go step by step on what will happen here:

• The variable interioris created and stores the value 200 in it.
• There is a console.log(exterior + interior); let’s dive into details for both of these variables, exterior and interior .

The interior variable is defined within the inner function scope, so we will have no problem trying to access this variable here, however, the exterior in the outer function, as we said, no longer exists because the execution of the outer is done. Now when we invoke the inner function, theoretically, we will have an error trying to access a variable that no longer exists.

Here comes the idea of closure, which is how JavaScript handles this situation. Once the inner is declared, JavaScript will preserve variables in the outer function to be available in the inner function and whenever the inner function is called, those outervariables will be saved and ready to use in the inner function. So when we invoke the inner function, result(), the console.log(exterior + interior); will print 300 to the console.

Hope that helps you understand closures in JavaScript. If you have anything you would like to add, please comment below!