Which Loop, and When switch Beats if

Three prices walked six ways. prices.length is how many items the array holds, and prices[i] is the item at position i, counted from 0 (Module 7).

const prices = [120, 450, 1300];
const out = [];

let line = "for:";
for (let i = 0; i < prices.length; i++) {
  line += " " + i + "=" + prices[i];
}
out.push(line);

line = "while:";
let w = 0;
while (w < prices.length) {
  line += " " + prices[w];
  w++;
}
out.push(line);

line = "do...while:";
let d = 0;
do {
  line += " " + prices[d];
  d++;
} while (d < prices.length);
out.push(line);

line = "for...of:";
for (const price of prices) {
  line += " " + price;
}
out.push(line);

line = "for...in:";
for (const key in prices) {
  line += " " + key + " (" + typeof key + ")";
}
out.push(line);

line = "forEach:";
prices.forEach((price, index) => {
  line += " " + index + "=" + price;
});
out.push(line);

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

for: 0=120 1=450 2=1300
while: 120 450 1300
do...while: 120 450 1300
for...of: 120 450 1300
for...in: 0 (string) 1 (string) 2 (string)
forEach: 0=120 1=450 2=1300

The for loop and forEach hand you the index; the while loops make you keep one. for...of is the shortest, because the job is "every value". for...in gives the keys, and typeof shows each is a string, not a number. Common mistake 4 shows what that does to a sum.

Each test compares the same value with one constant.

const out = [];
for (const size of ["S", "M", "L", "XL", "constructor"]) {
  let ml;
  if (size === "S") {
    ml = 250;
  } else if (size === "M") {
    ml = 350;
  } else if (size === "L") {
    ml = 500;
  } else {
    ml = "unknown";
  }
  out.push(size + ": " + ml);
}
console.log(out.join("\n"));

S: 250
M: 350
L: 500
XL: unknown
constructor: unknown

It works, but size === is written three times. The shape says "one value, many constants", which is exactly what a switch is for.

The value is named once, and each case holds one constant.

const out = [];
for (const size of ["S", "M", "L", "XL", "constructor"]) {
  let ml;
  switch (size) {
    case "S":
      ml = 250;
      break;
    case "M":
      ml = 350;
      break;
    case "L":
      ml = 500;
      break;
    default:
      ml = "unknown";
  }
  out.push(size + ": " + ml);
}
console.log(out.join("\n"));

S: 250
M: 350
L: 500
XL: unknown
constructor: unknown

The same output. A reader sees at once that only size is tested. The cost is a break per case, and a missing one is a real bug, which is why linters watch for it.

The mapping becomes data. { S: 250, M: 350, L: 500 } is an object, a set of named values, and cupMl[size] reads the value named by size; Module 8 teaches objects. Object.hasOwn(cupMl, size) asks whether the object itself holds that name.

const cupMl = { S: 250, M: 350, L: 500 };
const out = [];
for (const size of ["S", "M", "L", "XL", "constructor"]) {
  const ml = Object.hasOwn(cupMl, size) ? cupMl[size] : "unknown";
  out.push(size + ": " + ml);
}
console.log(out.join("\n"));

S: 250
M: 350
L: 500
XL: unknown
constructor: unknown

The loop body is one line, and a new size is one more entry, not one more branch. Zara's edge case is why the guard is there. Every object inherits a few names it never declared, and constructor is one, so cupMl["constructor"] finds a function instead of undefined. Without Object.hasOwn, the last line prints constructor: function Object() { [native code] }.

Three numbers near a million, each checked three ways. The counters record how many divisions each way performs.

const out = [];
for (const n of [999983, 999999, 1000000]) {
  let noBreak = 0;
  let isPrime = true;
  for (let d = 2; d < n; d++) {
    noBreak++;
    if (n % d === 0) {
      isPrime = false;
    }
  }

  let withBreak = 0;
  for (let d = 2; d < n; d++) {
    withBreak++;
    if (n % d === 0) {
      break;
    }
  }

  let withRoot = 0;
  for (let d = 2; d * d <= n; d++) {
    withRoot++;
    if (n % d === 0) {
      break;
    }
  }

  out.push(n + (isPrime ? " prime" : " composite") + ": no break " + noBreak + ", break " + withBreak + ", break and root " + withRoot);
}
console.log(out.join("\n"));

999983 prime: no break 999981, break 999981, break and root 998
999999 composite: no break 999997, break 2, break and root 2
1000000 composite: no break 999998, break 1, break and root 1

The two exits help different numbers. break turns almost a million divisions into one or two for a composite, but cannot help a prime, which has no divisor to find. The square-root test helps the prime: 998 divisions instead of 999,981. Together they cover both cases, and neither changes the answer.

Amara's loop, with a counter to show how far it reads, and find beside it.

const orders = [120, 450, 1300, 80, 2500, 60];
const limit = 1000;
const out = [];

let looked = 0;
let first;
for (const amount of orders) {
  looked++;
  if (amount > limit) {
    first = amount;
    break;
  }
}
out.push("for...of with break: " + first + ", looked at " + looked);

const found = orders.find((amount) => amount > limit);
out.push("find: " + found);

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

for...of with break: 1300, looked at 3
find: 1300

The loop reads three of the six orders and stops. find returns the first item for which the arrow function is true, and it also stops there. Common mistake 2 shows Kenji's forEach version and its real output.