6. Closures: functions that remember

A counter anyone can break

You want a function that hands out ticket numbers: 1, then 2, then 3. It has to remember the last number between calls, so you keep it outside:

let count = 0;

function next() {
  count = count + 1;
  return count;
}

next(); // 1
next(); // 2
count = 500; // any code can do this
next(); // 501

Two problems. Any line of the program can change count by accident. And there’s only one counter: a second ticket queue would need a second variable and a second function. A local variable would be private, but chapter 1 said it’s thrown away when the call ends, so it can’t remember. You want both: private and remembered. To get there, you first need to know exactly where a name can be seen.

Scope: where a name is visible

function price(n) {
  if (n > 9) {
    const extra = 1;
    console.log(n + extra); // fine
  }
  console.log(extra);
  // ReferenceError: extra is not defined
}

extra lives in the if block’s braces. Once those braces close, the name is gone. The same goes for the i in for (let i = 0; ...): it only exists inside that loop.

Functions inside functions

A function is a value, so you can create one inside another function, just as you’d create a number there. It is then a local name of the outer function, and it can see the outer function’s names:

function greetAll(names, hi) {
  const greet = (name) => {
    console.log(hi + ', ' + name);
  };
  for (let i = 0; i < names.length; i++) {
    greet(names[i]);
  }
}

greetAll(['Ada', 'Alan'], 'Hello');
// Hello, Ada
// Hello, Alan

greet never receives hi as an argument. It just uses it, because it was written inside the room where hi lives. The rule is about where code is written, not where it is called from:

const x = 'outer';

function show() {
  console.log(x);
}

function run() {
  const x = 'inner';
  show();
}

run(); // outer

show is called from inside run, but show was written out in the program, and the only x it can see from there is 'outer'.

Closures

Now put the pieces together. Here is the counter again, with count moved inside a function:

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

const a = makeCounter();
console.log(a()); // 1
console.log(a()); // 2

By chapter 1’s rule, makeCounter’s page should vanish when it returns. But the arrow function it returns still uses count. Step through to see what really happens:

function makeCounter() {
  let count = 0;
  return () => {
    count = count + 1;
    return count;
  };
}
const a = makeCounter();
a();
a();
const b = makeCounter();
b();

So chapter 1’s rule needs one correction. A call’s page is thrown away only once nothing points at it any more. A function made inside the call points at it, so as long as that function is alive, the page is too.

This also answers last chapter’s puzzle: times(3) returned a function that closed over the page where k is 3.

A closure holds on to the variable, not a snapshot of its value. If the variable changes, the closure sees the new value:

let n = 1;
const getN = () => n;
n = 2;
console.log(getN()); // 2

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

const a = makeCounter();
const b = makeCounter();
console.log(a(), a(), a());
console.log(b());
console.log(a());

Closures in a loop

Block scope and closures meet in one common situation. Each pass of a for (let i ...) loop gets its own fresh i, so a function made in that pass closes over that pass’s i:

const fs = [];
for (let i = 0; i < 3; i++) {
  fs.push(() => i);
}
console.log(fs[0](), fs[2]()); // 0 2

Three functions, three different is. (Older JavaScript code uses var instead of let. A var isn’t block-scoped, so all three functions would share one variable and every call would give 3. That’s one reason this book uses only let and const.)

Your turn

function makeTotal() {
  // your code here
}

const add = makeTotal();
console.log(add(5));
console.log(add(3));

function once(f) {
  // your code here
}

const hi = once(() => {
  console.log('working...');
  return 42;
});
console.log(hi());
console.log(hi());

What you learned

• The scope of a name is where it can be used. let and const are block-scoped: they live until the closing }.
• Inner code sees outer names; outer code never sees inner ones.
• Lexical scope: what a function can see is decided by where it is written, not where it is called.
• A nested function can use the names of the function around it.
• A closure is a function plus the variables it captured. They outlive the call that made them, stay private, and are shared live, not copied.
• Each call makes a new page, so each closure gets its own variables.

Next: classes, a built-in way to make many objects of the same shape and give them shared behaviour.