Javascript Closures

Photo by Peter Gombos on Unsplash

There are few things that are certain in life; one of them, though, is that if you’re a web developer, you will at some point find yourself having to discuss Javascript closures in an interview.

Developers new to Javascript often see closures as something that they do; a developer creates a closure on purpose by typing something specific. But that’s not the whole picture. Closures are a feature of the Javascript language and developers merely take advantage of them when writing code.

In simple terms, a closure consists of a function associated with references to its lexical environment (in other words, its surrounding state). You can think of a closure as an inner function having access to the scope of an outer function; every time a function is created, a closure is created. Closures allow JavaScript to approximate object-oriented programming, which makes them incredibly useful and powerful.

To understand closures, it’s useful to look at an example:

function command(dog){
return function(action){
console.log(dog + ", " + action + ".")
};
};
var giveCommand = command("Harper")
giveCommand("sit") 
// Harper, sit.

The Global Execution Context is created when the code initially runs. The command function is invoked when the line

var giveCommand = command(dog)

is reached and whatever variable is passed to the command function at that point (in our example, the name “Harper”) is placed in its variable environment. It is at that point that a new function object is returned, but after that return, the command execution context is removed from the stack. When the execution context is removed, the memory space that holds its variables and functions sticks around for a very short period of time. Keep that in mind for a second.

When we invoke the function to which that command function points, the inner anonymous function, we create yet another execution context with another variable, which also sits in memory. And now, the important part:

console.log(dog + ", " + action + ".")

When Javascript sees that dog variable, it goes UP THE SCOPE CHAIN if it cannot find the variable inside that inner anonymous function. That’s just a feature of the Javascript language, that ability to search up that scope chain. Despite the fact that the execution context of the command function is gone, the giveCommand execution context can still reference the variables of its outer environment. This is important: despite the fact that the outer function ended, any inner functions that are being returned will have access to that outer function’s memory. And this is where the name “closure” comes in…we say that the execution context has CLOSED IN its outer variables.

So the three important things to remember about closures:

1. The outer function must return the inner function.
2. The inner function will have access to the outer function’s execution context.
3. The variables created by or passed into the outer function will persist.