JavaScript Loops: The Full Picture

You learned the loop statements back in the Loops section. Since then you have met strings, arrays, objects, Sets, and Maps. This lesson pulls it all together: for each kind of data, which loop fits best, and why.

// Every Way to Loop

// The Classic for, Piece by Piece

The classic for loop is the one to use when you know how many times to repeat. Its parentheses hold three expressions, separated by semicolons:

for (exp1; exp2; exp3) {
  // code block to be executed
}

for (let i = 0; i < 3; i++) {
  console.log("The number is " + i);
}

while checks its condition before each pass, so it may run zero times. do...while checks after, so its body always runs at least once, even if the condition starts out false.

let, const, or var in the loop header

In for...of and for...in, the loop variable can be declared with const, let, or var. const is the usual choice because each pass gets a brand-new variable. The classic for is different: it changes the same variable with i++, so it needs let:

for (const i = 0; i < 3; i++) { }

The body runs once with i as 0, then i++ tries to change a constant. Avoid var in loop headers: it leaks the variable outside the loop (see JS Scope).

// Arrays

const scores = [88, 92, 75];

for (const s of scores) { }                    // just the values: first choice
for (const [i, s] of scores.entries()) { }     // index AND value
for (let i = scores.length - 1; i >= 0; i--) { }  // backwards, or skipping around
scores.forEach((s, i) => { });                  // fine when you never need to stop early

for (const [i, s] of scores.entries()) {
  console.log(`#${i + 1}: ${s}`);
}

// Strings

for (const ch of "Hi!") {
  console.log(ch);
}

// Objects

Plain objects cannot go straight into for...of. Use Object.entries to get [key, value] pairs, or for...in for keys:

const stock = { pens: 40, tape: 6, glue: 0 };

for (const [item, qty] of Object.entries(stock)) {
  if (qty === 0) continue;
  console.log(`${item}: ${qty}`);
}

// Sets and Maps

A Set hands for...of its values. A Map hands it [key, value] pairs, which you can destructure right in the loop header:

const tags = new Set(["js", "css"]);
for (const tag of tags) {
  console.log(tag);
}

const ages = new Map([["Ava", 16], ["Ben", 17]]);
for (const [name, age] of ages) {
  console.log(`${name} is ${age}`);
}

// When You Do Not Know How Many Times

let guesses = 0;
let n;
do {
  n = Math.floor(Math.random() * 10);
  guesses++;
} while (n !== 7);

console.log(`Rolled a 7 after ${guesses} tries`);

// Loop or Array Method?

If the goal is to build something from an array, the array methods from Array Iterations usually say it more clearly than a loop:

// Loop version
const passing = [];
for (const s of scores) {
  if (s >= 80) passing.push(s);
}

// Method version: same result, one line
const passing2 = scores.filter(s => s >= 80);

console.log(passing, passing2);

Array methods like forEach(), map(), filter(), and reduce() are often shorter and clearer than a loop for array work. The one thing they cannot do is stop early:

scores.forEach(s => {
  if (s > 90) break;   // not allowed here
});

break and continue only work inside a real loop, and the arrow function is not one. When you might need to stop, use for...of.

// Decision Guide

1. Transforming, filtering, or totaling an array? Use map / filter / reduce
2. Visiting each value of an array, string, Set, or Map? Use for...of
3. Visiting an object's properties? Use for...of over Object.entries(obj)
4. Need a counter, a step size, or to go backwards? Use a classic for
5. Waiting for something to happen? Use while

// Quick Check

let n = 10;
do {
  console.log(n);
} while (n < 5);

// Try It

▶ Open Playground

1. Click Open Playground and run it. Add two more scores and run it again
2. Loop over an object of test scores with Object.entries and print only the ones below 70
3. Rewrite a forEach so it can stop early when it finds a certain value
4. Take one task (like totaling prices) and solve it with a for loop, for...of, and reduce