How to Deal with JavaScript Closures–Why, How, & When to Use Them

graphic by me!

JavaScript closures were really hard for me to understand because I was under the misconception that I was being told to understand something new–when actually, closures were just an explanation of how something works, when you already expected them to work that way. Another point of confusion for me was that whenever I read about them, there was never any context. I was told the what, but I never understood the why. Today, I will explain what closures are, go through some examples, then end with points to keep in mind when applying closures in your code.

What is a closure?

A closure is a function object that retains ongoing access to the variables of the context it was created in (even after the outer function calls it was created within have returned. To state this in more general terms, whenever you see a function keyword located within another function, the inner function has ongoing access to the variables in the outer function. Another important thing to note is that a function doesn’t have to be returned in order to qualify as a closure. The ability to retain access to the variables outside of the immediate lexical scope qualifies as a closure.

The best way to understand closures, is to work through examples. Let’s dive in!

Example 1: 
Var multiplyByA = function(a) {
  return function(b) {
    return a * b;
  }
}

Let’s start off with a simpler example. When a JavaScript function is invoked, a new execution context is created. The function arguments, along with the parent object, all are received into the new execution context. In the example above, the inner function retains access to the variables ‘a’ and ‘b’.

Example 2:
var makeIncrementer = function(x) {
  var adder = function() {
    return x += 1;
  }
  return adder;
}
var incrementer = makeIncrementer(4);
console.log(incrementer()) // -> 5
console.log(incrementer()) // -> 6
console.log(incrementer()) // -> 7

In this example, the adder function still has access to the ‘x’ argument from the parent scope.

This is all great, but what’s the point of creating closures? After realizing what opportunities closures offered, I understood why they are necessary. Here is an analogy that really helped me:

Jojo is sitting in a car. The car is inside of a plane. That plane is at the airport. Jojo is still able to access the things in the plane, even if the plane takes off from the airport!

With code, let’s say you have a function that returns functions, a function factory. With closures, you give others access to the output function, without explicitly giving away how those functions are made.

Key points to remember about closures:

• A closure is not only created when you return an inner function
• A closure does not reference a copy of the old values of variables in its scope. The variables themselves are part of the closure, and so the value seen when accessing one of those variables is the latest value at the time it is accessed.
• The variables in a closure include any named functions declared within the function.

I hope this cleared up any confusion there may have been about closures! Feel free to ask any questions or comments. Thank you for reading!

Stephanie