How JavaScript Closures Work

In this short tutorial, we are going to explain how JavaScript closures work.

In general, a closure is a unique link between a function and its Outer Lexical Environment.

A closure can be considered a way of supporting first-class functions. It’s an expression, capable of referencing variables within its scope.

Here is an example of a closure:

Javascript closure

The code mentioned above returns a reference to a function.

It forms a closure because the anonymous <kbd class="highlighted">function () { console.log(message); }</kbd> is declared within another function.

So, in JavaScript, whenever a function references variables from an outer scope, it creates a closure.

If you declare a function inside another one, then the outer function’s local variables remain accessible after returning from it. It is shown above because the function <kbd class="highlighted">welcome1()</kbd> is called after the return from <kbd class="highlighted">sayWelcome()</kbd>.

The code that was called references the variable <kbd class="highlighted">message</kbd> that was a local variable of the <kbd class="highlighted">sayWelcome()</kbd> function:

javascript closure

If you look at the output of <kbd class="highlighted">welcome1.toString()</kbd>, you will see that the code refers to the variable <kbd class="highlighted">message</kbd>.

The next example demonstrates that the local variables are not copied but kept by reference:

Javascript closure

The next example shows that the JavaScript closure includes any local variables declared within the outer function before its existence.

Please note that the variable <kbd class="highlighted">account</kbd> may be declared after the anonymous function as <kbd class="highlighted">account</kbd> is in the same scope. Moreover, <kbd class="highlighted">sayWelcome()()</kbd> may directly call the function reference returned from <kbd class="highlighted">sayWelcome()</kbd>:

Javascript closure

In the final example, we demonstrate how each call to the main function creates a separate closure:

Javascript closure

So, it can be assumed that whenever a function captures variables from an outer scope, a closure is used. There is another option, as well. Anytime applying <kbd class="highlighted">eval()</kbd> inside a function, a closure is used. The text that you <kbd class="highlighted">eval</kbd> may reference local variables of the function. Inside <kbd class="highlighted">eval</kbd> you can create new local variables using eval (<kbd class="highlighted">'var foo = …'</kbd>).

In JavaScript, a closure is like keeping references to all the local variables as they were at the time of the function's creation.

It is best to think that a closure is always made as an entry to a function, and the local variables are added to the closure.