Closures in JavaScript

What is a closure?

A closure is a function that keeps using the variables from the place where it was written. Here is what that means:

• An outer function runs and makes some variables.
• Inside it, an inner function is made. The inner function uses those variables.
• The outer function ends. The inner function can still read and change those variables later.

We'll start with a function that remembers a short message. Then we'll use a counter to see that a remembered variable can change, too.

You don't write anything special to make a closure. Every JavaScript function keeps a link to the variables around the place where it was written. Returning a function from another function just makes this easy to see.

You can run the examples below one step at a time. Click the blue line, or press Step, to run the next step. Each step says what happened: a jump into a function, a variable change, or a return. Press Back to go one step back and compare.

Start with a nested function

A nested function is a function written inside another function. The inner function can read the variables of the outer function. This rule is called lexical scope. "Lexical" means "about where the code is written". So a function can use the variables around the place where it is written.

Here is a small example. makeGreeter takes a name and returns a new function. The new function makes a greeting from that name.

function makeGreeter(name) {
  return () => `Hello, ${name}!`;
}

const greetAsha = makeGreeter("Asha");
console.log(greetAsha());

Line by line:

1. Line 1 starts makeGreeter. Its parameter, name, is a variable that belongs to this call.
2. Line 2 returns a new arrow function. The arrow function uses name, but it does not run yet.
3. Line 5 calls makeGreeter("Asha"), so name is "Asha". The call returns the arrow function, and we save it as greetAsha. Now makeGreeter has ended.
4. Line 6 calls greetAsha(). It still reads name, so it prints Hello, Asha!.

The step-through below uses a very similar function, createGreeting. It takes a message and returns a function called greet, which gives the message back. You can change the message on line 7. Step into the first call and watch it return. Then follow the second call back to the message.

1function createGreeting(message) {2  return function greet() {3    return message;4  };5}6 7const greet = createGreeting("Hello!");Run8greet();

Keep these two moments apart:

1. Line 7 makes the function. createGreeting("Hello!") runs and returns a function. We save that function as greet. The call to createGreeting has now ended.
2. Line 8 calls the function. greet() runs the inner function. It still reads message from the call that has already ended.

That kept access to message is the closure. message is not a global variable (a variable that all code can see). And we did not pass it to greet().

The greeting only reads a variable. A counter goes one step further. It changes a variable, and the next call sees the new value.

makeCounter makes a variable, count, that starts at 0. It returns a function that adds 1 to count and returns the new number. Press Step to follow each call into the function. Watch the value of count appear beside line 2. When the walkthrough ends, use the buttons to call a() or b() again.

1function makeCounter() {2  let count = 0;3  return function increment() {4    count += 1;5    return count;6  };7}8 9const a = makeCounter();Run10a();11a();12 13const b = makeCounter();14b();

Each call makes new variables

A function that makes and returns other functions is often called a factory. makeCounter is a factory. Each call to makeCounter() makes a new count, starting at 0.

The code below makes two counters, first and second.

function makeCounter() {
  let count = 0;
  return () => ++count;
}

const first = makeCounter();
const second = makeCounter();
console.log(first(), second(), first());

Line by line:

1. Lines 1 to 4 are the same makeCounter as before, written shorter. ++count adds 1 to count and gives back the new value.
2. Line 6 calls makeCounter(). This call makes one count, and first uses it.
3. Line 7 calls makeCounter() again. This call makes a second count, and second uses it.
4. Line 8 calls first(), then second(), then first() again. It prints 1 1 2. second() gives 1 because its count is new.

But const b = a is different. It does not call makeCounter(). It gives the same function a second name. Two names for one function means one count.

In the step-through below, you choose what line 10 says. Pick one option. Then follow a(), b(), and a() again. With const b = a, notice that JavaScript never goes into makeCounter() a second time.

1function makeCounter() {2  let count = 0;3  return function increment() {4    count += 1;5    return count;6  };7}8 9const a = makeCounter();Run10const b = makeCounter();11a === b;12a();13b();14a();

The rule to remember: a new call to the factory makes new variables. A second name for the same function shares the old ones.

A practical use: a private count

Imagine a shopping cart. Its item count should change only through an add method. Nothing else should be able to set it. A closure can do this. The count lives inside a function, so it is private: code outside cannot see it or change it directly.

createCart makes a variable, items. It returns an object with two methods (functions stored on an object): add and getCount. Step through the code. First watch items being made. Then watch add() change it. At line 16, use Back and Step to compare the object's new items property with the private items variable.

1function createCart() {2  let items = 0;3  return {4    add() {5      items += 1;6      return items;7    },8    getCount() {9      return items;10    }11  };12}13 14const cart = createCart();Run15cart.add();16cart.items = 99;17cart.getCount();

add and getCount were made in the same call to createCart. So they share one items variable. Neither method has its own copy.

Line 16, cart.items = 99, adds a new property called items to the object. It does not touch the private variable, so getCount() still returns 1. Calling createCart() again would make a new cart with its own items.

function once(action) {
  let used = false;
  return () => {
    if (used) return "Already paid";
    used = true;
    return action();
  };
}

const payOnce = once(() => "Payment sent");
console.log(payOnce(), payOnce());

Here is another private variable. once takes an action and returns a new function. Its variable, used, starts as false.

1. The first call sees that used is false. It sets used to true and runs the action, which returns "Payment sent".
2. The second call sees that used is true. It returns "Already paid" and does not run the action.

So line 10 prints Payment sent Already paid.

function makeProductHandler(productId) {
  return () => `Opening product ${productId}`;
}

const openNotebook = makeProductHandler("notebook-7");
console.log(openNotebook());

A click handler is a function that runs when someone clicks a button. On line 5, makeProductHandler("notebook-7") returns a handler that remembers the product ID. A real button could call openNotebook later. Here, line 6 calls it right away and prints Opening product notebook-7. No global variable is needed to hold the product ID.

There are three common places to keep a value that changes. Read each row as: "If I keep it here, this is where it lives, and this is who can change it."

You'll also see closures in these places:

• Click handlers that remember a setting, like the product ID above.
• Debounce helpers. A debounce helper waits until you stop typing before it runs. It keeps its timer in a closure.
• Callbacks that use variables from the code around them.

Common misconceptions

A closure does not freeze a copy of each value. It keeps the variable itself. But a value that was already built from a variable does not update later. The step-through below shows both:

• live() reads count each time it runs, so it sees the newest number.
• saved() returns message. That string was built once, when count was 0.

1function createReaders() {2  let count = 0;3  const message = `Count is ${count}`;4  return {5    increment() {6      count += 1;7      return count;8    },9    live() {10      return `Count is ${count}`;11    },12    saved() {13      return message;14    }15  };16}17 18const readers = createReaders();Run19readers.increment();20readers.live();21readers.saved();

let status = "saving";
const report = () => console.log(status);
status = "saved";
setTimeout(report, 0);

setTimeout(report, 0) asks JavaScript to run report later, after the rest of the code. Line by line:

1. Line 1 sets status to "saving".
2. Line 2 makes report, a function that prints status.
3. Line 3 changes status to "saved".
4. Line 4 runs report later. By then status is "saved", so it prints saved.

report keeps the variable status, not the word "saving".

function makeReaders() {
  let name = "Asha";
  return {
    read: () => name,
    rename: (nextName) => { name = nextName; },
  };
}

const readers = makeReaders();
const readNow = readers.read;
readers.rename("Mina");
console.log(readNow(), readers.read());

makeReaders makes one variable, name, set to "Asha". It returns two functions made in the same call: read and rename.

1. Line 10 saves readers.read as readNow. It is the same function with a second name.
2. Line 11 calls rename("Mina"). This changes the one shared name.
3. Line 12 calls both readers. Both read the same name, so it prints Mina Mina.

for (var i = 0; i < 3; i += 1) {
  setTimeout(() => console.log("var", i), 0);
}

for (let j = 0; j < 3; j += 1) {
  setTimeout(() => console.log("let", j), 0);
}

Each loop sets up three timers. The timers run after both loops have ended.

• The var loop has one i for the whole loop. All three callbacks read that one i, which is 3 by then. They print var 3 three times.
• The let loop makes a new j for each pass. Each callback reads its own j. They print let 0, let 1, and let 2.

The exercises go from reading a counter to building a small helper. Try each one before you open the hints and the worked solution.

function makeCounter() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}
const counter = makeCounter();
console.log(counter());
console.log(counter());

function makeCounter() {
  let count = 0;
  return function () {
    count += 1;
    return count;
  };
}
const counter = makeCounter();
console.log(counter());
console.log(counter());

function makeGreeter(name) {
  return function () {
    return "Hello, " + name + "!";
  };
}
const greet = makeGreeter("Asha");
console.log(greet());

function makeGreeter(name) {
  return function () {
    return "Hello, " + name + "!";
  };
}
const greet = makeGreeter("Asha");
console.log(greet());

const callbacks = [];
for (var index = 0; index < 3; index += 1) {
  callbacks.push(() => index);
}
console.log(callbacks[0]());
console.log(callbacks[1]());
console.log(callbacks[2]());

const callbacks = [];
for (let index = 0; index < 3; index += 1) {
  callbacks.push(() => index);
}
console.log(callbacks[0]());
console.log(callbacks[1]());
console.log(callbacks[2]());

function once(fn) {
  let used = false;
  return function () {
    if (used) return "Already paid";
    used = true;
    return fn();
  };
}
const pay = once(() => "Payment sent");
console.log(pay());
console.log(pay());

function once(fn) {
  let used = false;
  return function () {
    if (used) return "Already paid";
    used = true;
    return fn();
  };
}
const pay = once(() => "Payment sent");
console.log(pay());
console.log(pay());

Predict each output first. Then read why each choice is right or wrong.

const counter = makeCounter();
const alias = counter;

counter(); // ?
alias();   // ?
counter(); // ?

Key takeaways

• A closure is a function plus the variables from the place where it was written.
• The outer function can end, and the function it returned can still use its variables.
• A closure keeps the variable itself, not a frozen copy of its value.
• Each call to a factory makes new variables. Functions made in the same call share them.
• Closures give you private variables, run-once helpers, and click handlers that remember a setting.