Loops: for, while and for...of

Imagine your teacher asks you to print every number from 1 to 100. You could write console.log 100 times, but that is tiring and easy to get wrong. Computers never get tired of repetition — you just need to tell them “do this 100 times” with a loop.

The for loop

When you know in advance how many times to repeat, the for loop is the best choice. Its parentheses hold three parts separated by semicolons:

1. Start: let i = 1 — the counter is created. This runs only once, at the very beginning.
2. Condition: i <= 5 — checked before every repetition. As soon as it is false, the loop stops.
3. Step: i++ — changes the counter after every repetition.

for (let i = 1; i <= 5; i++) {
  console.log(`Lap ${i}`);
}

for (let i = 10; i > 0; i -= 3) {
  console.log('Countdown:', i);
}

Lap 1
Lap 2
Lap 3
Lap 4
Lap 5
Countdown: 10
Countdown: 7
Countdown: 4
Countdown: 1

let sum = 0;

for (let i = 1; i <= 100; i++) {
  sum += i;
}

console.log('Sum:', sum);

Sum: 5050

while and do...while

Sometimes we don't know how many repetitions we need. For example, Leyla has 50 manat and saves 20 manat every month. How many months until she can buy a 200-manat bicycle? A while loop repeats as long as its condition is true:

let savings = 50;
let months = 0;

while (savings < 200) {
  savings += 20;
  months++;
}

console.log(`${months} months, ${savings} AZN`);

8 months, 210 AZN

A do...while loop checks its condition after the body, so the body runs at least once even if the condition is false from the start. In the example below the condition is false, but the message is still printed once.

let attempts = 5;

do {
  console.log('Attempt number', attempts);
  attempts++;
} while (attempts < 3);

Attempt number 5

for...of: walking through a list

Very often a loop is written to do something with each item of a list. A list in square brackets is called an array — we will study it in its own lesson. The for...of loop takes the items of an array or a string one by one; no counter is needed.

const cities = ['Baku', 'Ganja', 'Shaki'];

for (const city of cities) {
  console.log(`I want to visit ${city}`);
}

for (const letter of 'JS') {
  console.log(letter);
}

I want to visit Baku
I want to visit Ganja
I want to visit Shaki
J
S

break and continue

break stops the loop immediately, while continue skips only the rest of the current iteration and moves on to the next one. In the code below even numbers are skipped with continue, and break ends the loop once a number is greater than 7.

for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue;
  }
  if (i > 7) {
    break;
  }
  console.log(i);
}

1
3
5
7

const n = 7;
// print n x 1 = ... up to n x 5 = ...

7 x 1 = 7
7 x 2 = 14
7 x 3 = 21
7 x 4 = 28
7 x 5 = 35