JavaScript Closure Simply Explained

 

A closure is a stateful function that is returned by another function. It acts as a container to remember variables and parameters from its parent scope even if the parent function has finished executing. Consider this simple example.

function sayHello() {
  const greeting = "Hello World";

  return function() { // anonymous function/nameless function
    console.log(greeting)
  }
}


const hello = sayHello(); // hello holds the returned function
hello(); // -> Hello World

Look! we have a function that returns a function! The returned function gets saved to a variable and invoked the line below.

Many ways to write the same code!

Now that you know what a closure is at a basic level, here are few ways to write the same code as above.

// original
function sayHello() {
  const greeting = "Hello World";

  return function() { // anonymous function
    console.log(greeting)
  }
}


// #1
function sayHello() {
  const greeting = "Hello World";

  return function hello() { // named function
    console.log(greeting)
  }
}


// #2
function sayHello() {
  const greeting = "Hello World";

  function hello() { // named function
    console.log(greeting)
  }

  return hello; // return inner function on a different line
}


// #3
function sayHello() {
  const greeting = "Hello World";
  const hello = () => { // arrow function
    console.log(greeting)
  }

  return hello;
}

Pick a style you like the most and stick with it because every one of the above variations will still print the same result!

const hello = sayHello();
hello(); // -> Hello World

 

Benefits of closure and how it can be practical

 

Private Namespace

It's cool that the inner function remembers the environment that it was created in but what use does it have? A couple. First, it can keep your variables private. Here is the classic counter example.

function counter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  }
}


const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2
console.log(count) // Reference error: count is not defined

Trying to access the count variable gives us a reference error because it's not exposed to the global environment. Which helps us reduce bugs because our state is more strictly controlled by specific methods.

Reusable states

Because 'count' is privately scoped, we can create different instances of counter functions and their 'count' variables won't overlap!

function counter() {
  let count = 0;
  return function() {
    count += 1;
    return count;
  }
}

const incrementBananaCount = counter();
const incrementAppleCount = counter();
console.log(incrementBananaCount()); // 1
console.log(incrementBananaCount()); // 2
console.log(incrementAppleCount()); // 1

Module design pattern

The module design pattern is a popular convention to architect your JavaScript apps. It utilizes IIFE(Immediately Invoked Function Expression) to return objects and exposes only the variables and methods that you want to make public.

let Dog1 = (function() {
  let name = "Suzy";

  const getName = () => {
    return name;
  }

  const changeName = (newName) => {
    name = newName;
  }

  return {
    getName: getName,
    changeName: changeName
  }
}())

console.log(name); // undefined
Dog1.getName() // Suzy
Dog1.changeName("Pink")
Dog1.getName() // Pink

As soon as this code runs, the function executes and returns an object which gets saved to Dog1. This pattern goes back to keeping our namespace private and only revealing what we want as public methods and variables via form of an object. The state is encapsulated!

 

The famous interview question

What's the outcome of running the following function?

for(var i=0; i<5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 1000)
}

Why is this such a popular interview question? Because it tests your knowledge of function scope/block scope, closure, setTimeout and anonymous function! The answer prints out five 5s after 1 second.

5
5
5
5
5

How? Well, setTimeout runs 5 times in the loop after 1 second. After the time delay, they execute functions inside, which simply logs out i. By the time 1 second has passed, the loop already finished and i became 5. Five 5s get printed out. Not what you were expecting? You probably want to see number 1 through 5 iteratively.

The solution

There are a few solutions, but let's focus on using closure!

for(var i=0; i<5; i++) {
  setTimeout((function(index) {
    return function() {
      console.log(index);
    }
  }(i)), 1000)
}

We have our closure that is returned by an anonymous function to receive current 'i's as arguments and output them as 'index'. This in doing so captures the current variable i to each function. The result turns out to be

0 (...1000ms have passed)
1 (...1000ms have passed)
2 (...1000ms have passed)
3 (...1000ms have passed)
4 (...1000ms have passed)
5 (loop exits)

 

Congratulations! 🎉🎉 Now you are more prepared for your next interview! 😉 Just remember that closure is a function that has access to the scope that encloses that function.

 

Comments

[Jurian Mergenthal]

Just a small addition:
instead of

for(var i=0; i<5; i++) {
  setTimeout((function(index) {
    console.log(index)
  })(i), 1000)
}

you can also just use let, instead of var here:

for(let i=0; i<5; i++) {
  setTimeout((function() {
    console.log(i)
  }), 1000)
}

since let variables are bound to the block scope :)

[Tim Ermilov]

The code in the final example is actually wrong:

for(var i=0; i<5; i++) {
  setTimeout((function(index) {
    console.log(index)
  })(i), 1000)
}

If you write like this, you might as well remove setTimeout completely as it's not doing anything here (try setting timeout to 10s and see if it prints out the result after 10s).
What you are doing is this:

function printIndex(index) {
  console.log(index)
}

for(var i=0; i<5; i++) {
  setTimeout(printIndex(i), 1000)
}

This will just print out all index immediately and setTimeout will have no effect.
To fix this - you either need to return a function, or using bind when setting a timeout, e.g.:

function printIndex(index) {
  return () => console.log(index)
}

for(var i=0; i<5; i++) {
  setTimeout(printIndex(i), 1000)
}

[Phillip Shim]

Oops. you are totally correct, forgot to return a function!. I appreciate you pointing this out. Will fix the code example!

[bigschatz]

Hi Phillip,

Thank you for writing this great article on closures. The practical examples are easy to understand.

I wonder how, in the last example of the for loop, could you refactor the example so that each index prints out after the setTimeout value has elapsed

Like this:
0 (...1000ms have passed)
1 (...1000ms have passed)
2 (...1000ms have passed)
3 (...1000ms have passed)
4 (...1000ms have passed)
5 (loop exits)

[Phillip Shim]

Sure just made an edit!

[bigschatz]

I see that you made the edit!

But that is not actually what happens when you run the code.

The code you wrote prints 0-4 (all indexes) after 2000ms all at once.

I was curious how to make a loop that prints out each index, one at a time, according to the setTimeout value.

Maybe this isn't possible using a for loop.

I hope that makes sense!!

[Jaydeep Karena]

They print all at once because all setTimeout starts at same time and for all setTimeout 1 second passes at same time. What you want can be achieved by passing timeout values to 1000, 2000, 3000....

Following code will give you that output:

for(var i=0; i<5; i++) {
  setTimeout((function(index) {
    return function() {
      console.log(index);
    }
  }(i)), 1000 * i)
}

[Robert Carlo Tubig]

in the interview question about closure
why does it shows a different result when you use let in the for loops ?

[Saloni Yadav]

let is a block scope. so the value of i gets captured. in case of var its a global scope/scope of where the function is called. so when the function actually executes, the var i value is the last standing value, which is not the case with let.