Please Explain Closures!

(This article is part of an ongoing series on soft skills and technical wizardry from Nathan Thomas, a software engineer working in San Francisco. Click here for the previous article in the series, "Building Your First GraphQL Server." Click here for the next article in the series, a piece called "Building Your First GraphQL Server.")

Starting From the Outside In

Explaining closures is a frequently-used JavaScript interview question, but many engineers still don’t fully understand how they work. There’s a fog that surrounds it, much like the feeling you get when you eat too much during the holidays. 🥧

When I first started learning closures, my first impulse was to close my laptop screen and go stare existentially at the local pond. But don’t worry; closures trip up a lot of people, but you’ll understand how they work and the concepts behind them by the end of this article.

I’m going to walk you through a really cool (and more importantly, simple) example. You'll get it in no time at all.

Grab your favorite coffee, apple cider, hot chocolate, or wintery beverage, and let’s get started. ☕️

"I'll use any excuse to buy a new backpack." - Michael Potts

Grab Your Backpack

Closures are an interesting concept. They are truly invisible in your code, and yet they are very real. If you've written any JavaScript, you've almost certainly used them without even realizing it.

If nothing else, that should give you comfort; if you're already accidentally using them successfully, half the battle will just be learning the ideas behind them to fill in the gaps of how they work.

At a very base level, a closure is an invisible compartmentalization of variables that are accessible to your code at various levels (e.g. the global scope, local function scope, etc.).

Each time you write a function, a closure is created for the scope available to it. JavaScript does this automatically, so all we need to do is understand it.

For instance, let's say we have the following code:

const globalVariable = 1;

function createClosure() {
  const localVariable = 2;
  return function() {
    return globalVariable + localVariable;
  }
}

const closure = createClosure();

console.log(closure()); // returns 3

This code will log the number

3

globalVariable

localVariable

globalVariable

Here's the same code with comments included to indicate which parts are global and local scopes:

// global scope with globalVariable available
const globalVariable = 1;

function createClosure() {
  // local scope with localVariable and globalVariable available
  const localVariable = 2;
  return function() {
    // local scope with localVariable and globalVariable available
    return globalVariable + localVariable;
  }
}

const closure = createClosure();

console.log(closure()); // returns 3

Stop and think about what's happening here for a moment; the createClosure function can access both variables.

What if I told you that this ability of closures to access all variables in scope at time of the function's creation could be used later when the function is used elsewhere, even another file?

I know. Has science gone too far?

Let's find out. 🧪

“A good traveler has no fixed plans and is not intent on arriving." - Lao Tzu

Counting with Closures

Here's the code we're going to be working through for the rest of the article. Go ahead and read through it. 👍

Don't worry if you don't understand how it relates to closures yet. Just get an idea of what code is actually doing:

function createCountingClosure(startingNum) {
  if (typeof startingNum !== "number") return null;
  let num = startingNum;
  function increment() {
    num++;
    return num;
  }
  function decrement() {
    num--;
    return num;
  }
  function getNum() {
    return num;
  }
  return [increment, decrement, getNum];
}

When we invoke that function, here's what we get out of it:

const [increment, decrement, getNum] = createCountingClosure(0);

Furthermore, we can invoke those

increment

decrement

getNum

increment(); // 1
increment(); // 2
increment(); // 3
decrement(); // 2
increment(); // 3
getNum(); // 3

Whoa.

Don't worry. We're about to work through this code in detail to figure out exactly what's going on.

(Side note - We're doing some destructuring here. If you don't know what destructuring is, no worries. Check out MDN's excellent article on it here.)

Let's look at that

createCountingClosure

function createCountingClosure(startingNum) {
  if (typeof startingNum !== "number") return null;
  let num = startingNum;
  function increment() {
    num++;
    return num;
  }
  function decrement() {
    num--;
    return num;
  }
  function getNum() {
    return num;
  }
  return [increment, decrement, getNum];
}

First, we're taking in an argument called

startingNum

null

Next, we're assigning the value of

startingNum

num

We then proceed to declare three functions:

1. increment

   , which increases the value of

   num

   and returns its value

2. decrement

   , which decreases the value of

   num

   and returns its value

3. getNum

   , which returns the current value of

   num

Finally, we return these three functions inside an array. As functions are "first class citizens" in JavaScript, we can pass functions around like this to be returned from our function and used elsewhere.

This is why, later on, we can invoke createCountingClosure and destructure out these three functions:

const [increment, decrement, getNum] = createCountingClosure(0);

As you can see, we're also passing

0

startingNum

0

With all of that out of the way, we're now at the part of discussing the

createCountingClosure

Hold on to your butts.

What's in the Bag?

Let's take a look at the

createCountingClosure

function createCountingClosure(startingNum) {
  if (typeof startingNum !== "number") return null;
  let num = startingNum;
  function increment() {
    num++;
    return num;
  }
  function decrement() {
    num--;
    return num;
  }
  function getNum() {
    return num;
  }
  return [increment, decrement, getNum];
}

When we declared

increment

decrement

getNum

Remember at the start of this article how we had global and local scope? Remember how the function we created had a local scope that retained access to the

globalVariable

Well, the same thing is happening here. For instances, the

increment

num

For example, remember how we destructured out all of these functions when we invoked

createCountingClosure

const [increment, decrement, getNum] = createCountingClosure(0);

Here's what the

increment

let num = startingNum;
function increment() {
  num++;
  return num;
}

Even though we've only destructured out

increment

num

What this means is that we can access and modify our

num

Isn't that wild? 🦁

This same thing is true for

decrement

getNum

num

Let's go ahead and use our code to see how this works.

"I would gladly live out of a backpack if it meant I could see the world." - Unknown

Updating Your Backpack

We're going to use our code and walk through it step by step to observe what it does. Here's a refresh of the entire thing before we get started:

function createCountingClosure(startingNum) {
  if (typeof startingNum !== "number") return null;
  let num = startingNum;
  function increment() {
    num++;
    return num;
  }
  function decrement() {
    num--;
    return num;
  }
  function getNum() {
    return num;
  }
  return [increment, decrement, getNum];
}

In addition, we're going to invoke our

createCountingClosures

const [increment, decrement, getNum] = createCountingClosure(0);

With this setup, we're now ready to go. If you want to play around with this while we walk through the rest of this article, here's a codepen link that will allow you to interact with the code.

First off, we're going to invoke the increment function:

increment(); // should return 1

As we've previously discussed, the

increment

increment

num

Since we passed in the value of

0

createCountingClosures

1

(If you're following along in the CodePen I provided, you'll see that pop up in the console because I've wrapped the function call in a

console.log

Next, we'll invoke increment two more times like so:

increment(); // should return 2
increment(); // should return 3

Notice that the value being returned each time is not starting at

1

num

increment

Next, we're going to call the function

decrement

num

decrement(); // should return 2

Notice that the value is, once again, not starting at

0

decrement

increment

num

Finally, we're going to call

increment

getNum

num

increment(); // should return 3
getNum(); // 3

All of these function calls have access to the num variable as all of them have the reference to it stored away in their little scope "backpack."

The final

getNum

num

num

If you're still having some trouble grasping how closures work, here's an excellent short video from MPJ (who runs the Fun Fun Function channel on YouTube) about how closures work:

Conclusion

I hope that this brief overlook of how closures work helps you grasp them.

By imagining them as little backpacks that functions can wear as they move around your application, you can build a framework in your mind for how you can access and manipulate variables contained inside of closures.

Also, now that we've stepped through how they work, you can be confident in your closure knowledge and crush your next job interview.

Thanks for reading. 🔥

Nathan

(Twitter, LinkedIn, GitHub, and Portfolio Site)