JavaScript Theory: Closures

Description

In JavaScript a function is considered to be a first-class citizen, which means that it can be passed as an argument to other function, returned from a function or assigned to a variable. If it weren’t for the aforementioned feature, closures wouldn’t exist. I’ve come across several definitions of closures in JavaScript, but only the following three are worth paying attention to:

• a closure is a technique to persist a state,
• a closure simply means that a function has an access to its lexical scope as long as there is a reference to that function,
• a closure is an additional place (a backpack) to look for a variable’s value together with both local and global execution contexts.

Goal

The main aim of today’s article is to understand what a closure is by taking a look at the most common scenarios wherein it’s present.

Function returns function

In the following example you need to greet guests in a different language. You know that a greeting will consist of a language specific message followed by a visitor’s name. It seems that a function needs two arguments (an initial message and a guest’s name), but thanks to closures you can set a parameter which value is the same for all calls and get a tailored function for a given nationality which expects only one argument (a guest’s name).

Note that when you call a tailored function, a local execution context for the getGreeting function (which includes the initialMessage variable) has already been destroyed. However, you still have an access to the variable’s value due to the closure(you get the value from the backpack attached to the returned function).

Module pattern

Another common scenario wherein you deal with closures is the module pattern.

In the above example, the getAccount function creates a bank account and return an object enabling the account’s basic manipulation (its public API). As a result, you have references to three functions returned from the getAccount function’s call. Since you keep the references to the functions, the closure is present and when you call any of them, they can easily access the balance variable. Note that the variable is private, namely it can only be accessed via a call to the returned object’s method. Closure is the only way to create a private variable in JavaScript.

Event listener

Last but not least, you can keep a reference to a function by registering it as an event listener.

In the above example, you don’t return any object representing a public API. However, you expose the inner functions by providing them as event listeners for the buttons’ events.

Remarks

• the question about closures is very common during job interviews, since it’s a must-have knowledge of a JavaScript developer,
• closure is the only way to accomplish a private variable,
• a reference to a function can be kept by storing it in a variable, object’s property or registering it as an event handler,
• the most concise explanation is that as long as you keep a reference to a function, it has an access to its lexical scope (which includes calling context).

Like, love, hate, clap!