Every Statement, One by One

Bob writes a switch that turns a day number into its name. For day 6 he expects one line, Saturday. His program prints three: Saturday, Sunday and not a day. No error appears, because JavaScript did exactly what he wrote. The switch section shows why, and the one-word fix.

Control flow is the order in which statements run. Lesson 01 drew the picture: if, else, the for loop and for...of. This lesson visits every statement once: its syntax, a small example, its real output and its cost. The cost is a one-line table under the example: how many times the test and the body run.

if and else

if (condition) {
  runs when condition is truthy
} else {
  runs when condition is falsy
}

const stock = 0;
if (stock > 0) {
  console.log("in stock:", stock);
} else {
  console.log("sold out");
}
if ("0") {
  console.log("the string \"0\" is truthy");
}

sold out
the string "0" is truthy

The one thing to watch: a non-empty string is truthy, even "0". Module 2 has the full falsy list. So if asks "truthy or falsy?", never "is this the number 0?".

else if chains: the first true condition wins

if (first) {
  ...
} else if (second) {
  ...
} else {
  runs when no condition was truthy
}

const temp = 31;
if (temp >= 35) {
  console.log("very hot");
} else if (temp >= 25) {
  console.log("warm");
} else if (temp >= 15) {
  console.log("mild");
} else {
  console.log("cold");
}
if (temp >= 15) {
  console.log("Bob's order says: mild");
} else if (temp >= 25) {
  console.log("Bob's order says: warm");
}

warm
Bob's order says: mild

The one thing to watch: the order. 31 is at least 15, so Bob's chain stops at its first test and never reaches temp >= 25. With ranges, test the highest bound first, or the lowest first with <.

switch: one value against many cases

switch (value) {
  case A:
    runs when value === A
    break;
  case B:
  case C:
    shared by B and C
    break;
  default:
    runs when no case matched
}

Here is Bob's program, run for real.

const day = 6;
switch (day) {
  case 5:
    console.log("Friday");
  case 6:
    console.log("Saturday");
  case 7:
    console.log("Sunday");
  default:
    console.log("not a day");
}

Saturday
Sunday
not a day

A case is only a place to start. The switch finds the first case equal to day, jumps there, and runs every line below it. It stops at a break or at the closing brace. This is called fall-through. Add break; as the last line of each case, and the same program prints only Saturday.

Fall-through has one honest use: several cases that share one body. Stack the cases with nothing between them, as the months below do. A case that does have lines and falls on purpose gets a // falls through comment, so the next reader knows it is not Bob's bug.

const month = 4;
let days;
switch (month) {
  case 2:
    days = 28;
    break;
  case 4:
  case 6:
  case 9:
  case 11:
    days = 30;
    break;
  default:
    days = 31;
}
console.log("month", month, "has", days, "days");

const plan = "pro";
switch (plan) {
  case "pro":
    console.log("cloud backup");
    // falls through
  case "basic":
    console.log("email support");
    break;
  default:
    console.log("no extras");
}

month 4 has 30 days
cloud backup
email support

The one thing to watch: === means the string "6" never matches case 6, so the default runs (Common mistake 3). The month code ignores leap years, and default is reached only after every case fails.

while: test first, then the body

while (condition) {
  body
}

let height = 16;
let bounces = 0;
while (height >= 1) {
  console.log("bounce to", height);
  height = height / 2;
  bounces++;
}
console.log("bounces:", bounces, "height now:", height);

bounce to 16
bounce to 8
bounce to 4
bounce to 2
bounce to 1
bounces: 5 height now: 0.5

A while loop suits an unknown count: you know when to stop, not how many passes it takes. The one thing to watch: the body must move the condition towards false. Delete height = height / 2; and the loop never ends. On the Playground, a run like that stops at the time limit, about 10 seconds, with "Time Limit Exceeded".

do...while: the body runs at least once

do {
  body
} while (condition);

let n = 10;
while (n < 5) {
  console.log("while body, n =", n);
  n++;
}
do {
  console.log("do body, n =", n);
  n++;
} while (n < 5);
console.log("after both loops, n =", n);

do body, n = 10
after both loops, n = 11

The condition n < 5 is false from the start. The while loop asks first, so its body never runs. The do...while loop runs its body, then asks. Step through it.

Here are the two loops as flowcharts. The only difference is where the test sits.

The one thing to watch: reach for do...while only when the body must run before the question makes sense. A menu shown once before the first choice, or counting the digits of 0, are the classic cases (Example 2).

for: start, test, step

for (start; test; step) {
  body
}
for (;;) { ... }   all three parts empty: runs until a break

for (let i = 3; i >= 1; i--) {
  console.log("countdown", i);
}
let k = 0;
for (; k < 5; ) {
  k += 2;
}
console.log("k is", k);

countdown 3
countdown 2
countdown 1
k is 6

The second loop has no start and no step: k was made before it, and the body changes it. That is a while loop wearing a for loop's clothes, so write while (k < 5) instead. for (;;) is a loop with no test at all. It is not a typo: it runs until a break inside it, as the break section shows.

The one thing to watch: the counter is a let. A const counter throws TypeError: Assignment to constant variable. at the first step (lesson 01).

for...of: every value of an array or a string

for (const item of list) {
  body, with item holding the next value
}

const prices = [120, 45, 300];
let total = 0;
for (const price of prices) {
  total += price;
}
console.log("total:", total);
for (const ch of "hi!") {
  console.log(ch);
}

total: 465
h
i
!

The one thing to watch: for...of gives values, not positions. When you need the position too, use a classic for loop with i. A plain object has no order of values to give, so for...of refuses it (Common mistake 4).

for...in: the keys of an object, and the array trap

for (const key in object) {
  body, with key holding the next key, always a string
}

const stock = { pens: 12, books: 0, bags: 5 };
for (const item in stock) {
  console.log(item, stock[item]);
}
const marks = [90, 75];
for (const i in marks) {
  console.log(i, typeof i, i + 1);
}

pens 12
books 0
bags 5
0 string 01
1 string 11

stock[item] reads the part whose name is in item. The second loop is the trap. On an array, for...in gives the positions as strings, "0" and "1". So i + 1 joins text and gives "01", Module 2's + rule.

The one thing to watch: for...in is for an object's keys. Over an array, use for...of for values, or a classic for loop for positions.

break: leave the loop now

break;   leaves the innermost loop or switch around it

const queue = [4, 9, -1, 7];
for (const ticket of queue) {
  if (ticket < 0) {
    console.log("bad ticket, stop");
    break;
  }
  console.log("serve", ticket);
}
let rounds = 0;
for (;;) {
  rounds++;
  if (rounds === 3) {
    break;
  }
}
console.log("rounds:", rounds);

serve 4
serve 9
bad ticket, stop
rounds: 3

The ticket 7 is never read: the loop ended at -1. The for (;;) loop has no test, so its break is the only way out.

The one thing to watch: break must sit inside a loop or a switch. Anywhere else, the program does not start (Common mistake 1).

continue: skip to the next pass

continue;   skips the rest of this pass; the loop goes on

for (let seat = 1; seat <= 6; seat++) {
  if (seat % 3 === 0) {
    continue;
  }
  console.log("seat", seat);
}

seat 1
seat 2
seat 4
seat 5

Seats 3 and 6 are skipped. In a for loop, continue jumps to the step, so seat++ still runs and the loop moves on.

The one thing to watch: a while loop has no step part. A continue placed before the line that changes the counter skips that line too, and the loop never ends.

Labelled break and continue Intermediate

name: for (...) {
  for (...) {
    break name;      leaves the loop called name
    continue name;   goes to the next pass of the loop called name
  }
}

outer: for (let row = 1; row <= 9; row++) {
  for (let col = 1; col <= 9; col++) {
    if (row * col > 20) {
      console.log("first product above 20:", row, "x", col);
      break outer;
    }
  }
}
rows: for (let row = 1; row <= 3; row++) {
  for (let col = 1; col <= 3; col++) {
    if (col > row) {
      continue rows;
    }
    console.log(row, col);
  }
}

first product above 20: 3 x 7
1 1
2 1
2 2
3 1
3 2
3 3

A plain break would leave only the inner loop, and the outer one would start row 4. break outer leaves both at once. continue rows abandons the rest of a row and starts the next one, which prints a triangle.

The one thing to watch: a label names a loop, and it must be spelled the same at both ends (Common mistake 2). A small function with return (Module 5) often does the same job; a label fits when the loops share many variables.

const pages = 130;
const perDay = 20;
let read = 0;
let days = 0;
while (read < pages) {
  read += perDay;
  days++;
}
console.log("days:", days);
console.log("pages on the last day:", pages - (read - perDay));

days: 7
pages on the last day: 10

const numbers = [0, 7, 42, 90210];
for (const number of numbers) {
  let n = number;
  let digits = 0;
  do {
    digits++;
    n = Math.floor(n / 10);
  } while (n > 0);
  console.log(number, "has", digits, "digit(s)");
}

0 has 1 digit(s)
7 has 1 digit(s)
42 has 2 digit(s)
90210 has 5 digit(s)

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 = [];

let balance = nextInt();
const rides = nextInt();
let paid = 0;
for (let ride = 1; ride <= rides; ride++) {
  const fare = nextInt();
  if (fare > balance) {
    out.push("ride " + ride + ": refused, balance " + balance);
    continue;
  }
  balance -= fare;
  paid++;
  out.push("ride " + ride + ": paid " + fare + ", balance " + balance);
  if (balance === 0) {
    out.push("card empty after ride " + ride);
    break;
  }
}
out.push("rides paid: " + paid);

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

ride 1: paid 30, balance 70
ride 2: paid 50, balance 20
ride 3: refused, balance 20
ride 4: paid 20, balance 0
card empty after ride 4
rides paid: 3

const stock = 0;
if (stock === 0) {
  console.log("sold out");
  break;
}

rows: for (let r = 1; r <= 2; r++) {
  for (let c = 1; c <= 2; c++) {
    if (c === 2) {
      continue row;
    }
    console.log(r, 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 = [];

const choice = next();
switch (choice) {
  case 1:
    out.push("new game");
    break;
  case 2:
    out.push("quit");
    break;
  default:
    out.push("unknown option");
}

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

unknown option

const week = { mon: 7500, tue: 8000 };
for (const steps of week) {
  console.log(steps);
}

TypeError: week is not iterable

for (let i = 1; i <= 3; i++) {
  switch (i) {
    case 2:
      console.log("two, so break");
      break;
    default:
      console.log("pass", i);
  }
}
console.log("after the loop");

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"));

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 03 puts these statements to work in seven full programs, from FizzBuzz to a prime sieve.