Where a Name Lives: Scope and Closures, the Picture

Kenji's bookshop page counts its visitors in a variable called count, at the top of the file. Bob adds a like button and also needs a counter, so he writes count = 0 when the likes reset. Now every reset of the likes wipes out the day's visitors, and nobody sees an error. Two features share one name, and any line in the file can change it. This lesson gives each counter a private count that only its own code can reach.

Kenji's shared count

Here is the bug, cut down to a few lines. Kenji's addView and Bob's resetLikes both write the same count.

let count = 0;

function addView() {
  count++;
}
function resetLikes() {
  count = 0;
}

addView();
addView();
addView();
resetLikes();
addView();
console.log("views: " + count);

views: 1

Four visitors came, and the page says one. Nothing is wrong with either function on its own. The trouble is where count lives: at the top of the file, where every function can see it and change it. So the fix is not a better function. It is a better place for the name, a place only the counter's own code can reach. JavaScript calls that place a scope.

A scope is a box around lines of code

A scope is the part of a program where a name can be seen. Draw it as a box around some lines of code. A name declared inside the box belongs to that box. There are three kinds of box.

• The file. A name declared at the top level of a file can be seen anywhere in that file.
• A function. A name declared inside a function, and every parameter, can be seen only inside that function.
• A block. A block is a pair of curly braces, such as the body of an if or a for. A let or const declared inside it can be seen only inside those braces.

You have met the block already. In Module 4, the i of a for loop lived only inside the loop, and reading it afterwards stopped the program. The program below has all three boxes.

const shop = "Progsity Books";

function openShop() {
  const hours = "9 to 5";
  console.log(shop + " opens " + hours);
}

openShop();
if (shop.length > 5) {
  const note = "long name";
  console.log(note);
}
console.log(typeof hours, typeof note);

Progsity Books opens 9 to 5
long name
undefined undefined

shop lives in the file, so openShop can read it. hours lives in the function and note lives in the block. On the last line, outside both boxes, neither name exists. typeof answers "undefined" for a name that does not exist instead of stopping the program, which makes it a safe way to look. So a name can be seen inside its own box, and nowhere outside it.

Looking a name up, from the inside out

Boxes sit inside other boxes. A function's box sits inside the file's box, and a block inside a function sits inside the function's box. When a line uses a name, JavaScript runs a lookup. It searches the box the line is in, then the box around that one, and so on outward. The first box that has the name wins. If even the file does not have it, the program stops with a ReferenceError.

So an inner box can see every name in the boxes around it, and an outer box can see nothing inside an inner one. The next program shows both directions.

const rate = 0.05;

function addTax(price) {
  const tax = price * rate;
  return price + tax;
}

console.log(addTax(200));
console.log(tax);

210
ReferenceError: tax is not defined

Inside addTax, the lookup for rate found nothing in the function's box, stepped out, and found it in the file. On the last line, the lookup for tax started in the file, the outermost box, and had nowhere left to go. So a lookup walks outward and stops at the first match, or at the file with an error.

Each call makes a fresh box

A function's box is not made once, when the function is written. A new box is made every time the function is called, and its names start fresh in it. When the call ends, the box is usually thrown away. You saw calls stack up in Module 5. Each of those calls had a box of its own.

function visit(name) {
  let cups = 0;
  cups++;
  console.log(name + " has had " + cups + " cup");
}

visit("Zara");
visit("Zara");

Zara has had 1 cup
Zara has had 1 cup

The second call does not remember the first. Its let cups = 0 ran again in a new box. So a name inside a function starts over on every call. That is exactly what Kenji's counter must not do, and the next section shows the way out.

A closure keeps its box alive

Here is the trick. A function made inside another function remembers the box it was made in. If the outer function returns that inner function, the outer call ends, but its box cannot be thrown away. The inner function still points at it. A function together with the box it remembers is called a closure.

Step through the program below. Watch the box of makeCounter() call 1. It survives after makeCounter returns, and count grows inside it on every call of ticket.

Here is the same program, run.

const shop = "Progsity Books";
function makeCounter() {
  let count = 0;
  return function next() {
    count++;
    return shop + " #" + count;
  };
}
const ticket = makeCounter();
console.log(ticket());
console.log(ticket());
console.log(count);

Progsity Books #1
Progsity Books #2
ReferenceError: count is not defined

Three facts come out of it. count lives in the box of the makeCounter call, so it survives between calls of ticket. The file cannot read count, so no other code can reset it. And let count = 0 ran once, when makeCounter was called, not on every ticket. So a closure is a private variable that lives as long as the function that uses it.

Two calls, two counters

Every call of makeCounter makes a new box with a new count. So two counters from one factory never share a count, and Kenji and Bob can each have one.

So the factory is written once and called once per counter. Each call hands back a function that remembers its own box.

const a = 1;              // the file's scope: seen by every line below

function outer(p) {       // outer's scope: p and b, made fresh on every call
  const b = 2;
  if (b > 1) {
    const c = 3;          // a block's scope: c is seen only inside these braces
  }
}

function makeCounter() {  // the factory
  let count = 0;          // the private variable, one per call of makeCounter
  return function () {    // the inner function, which remembers this call's scope
    count++;
    return count;
  };
}
const next = makeCounter(); // the closure: call it, and count survives between calls

const price = 450;
if (price > 400) {
  const discount = 45;
  console.log("pay " + (price - discount));
}
console.log("listed at " + price);

pay 405
listed at 450

function receipt(item, price) {
  const total = price + price * 0.05;
  return item + ": " + total;
}
function stock(item, count) {
  const total = count * 12;
  return item + ": " + total + " pieces";
}
console.log(receipt("pen", 20));
console.log(stock("pen", 3));
console.log(typeof total);

pen: 21
pen: 36 pieces
undefined

function makeCounter() {
  let count = 0;
  return {
    add: () => ++count,
    reset: () => {
      count = 0;
    },
    read: () => count,
  };
}

const views = makeCounter();
const likes = makeCounter();
views.add();
views.add();
likes.add();
views.add();
likes.reset();
views.add();
console.log("views: " + views.read());
console.log("likes: " + likes.read());

views: 4
likes: 0

const marks = 72;
if (marks >= 40) {
  let result = "pass";
}
console.log(result);

ReferenceError: result is not defined

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

TypeError: ticket is not a function

let count = 0;
function makeCounter() {
  return () => ++count;
}
const tea = makeCounter();
const coffee = makeCounter();
tea();
tea();
console.log("coffee " + coffee());

coffee 3

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

1
1

function makeCounter() {
  let count = 0;
  return () => (count += 10);
}
const a = makeCounter();
const b = a;
const c = makeCounter();
console.log(a(), b(), c());

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

Next, lesson 02 takes every rule one at a time: the global object, var and its function scope, shadowing, hoisting and the dead zone.