Циклы: for, while и for...of

Представь, что учитель просит вывести все числа от 1 до 100. Можно написать console.log сто раз, но это утомительно, и легко ошибиться. Компьютер же от повторений не устаёт — нужно лишь сказать ему «сделай это 100 раз» с помощью цикла.

Цикл for

Когда число повторений известно заранее, лучше всего подходит цикл for. В его скобках три части, разделённые точкой с запятой:

1. Начало: let i = 1 — создаётся счётчик. Выполняется один раз, в самом начале.
2. Условие: i <= 5 — проверяется перед каждым повтором. Как только оно ложно, цикл останавливается.
3. Шаг: i++ — изменяет счётчик после каждого повтора.

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 и do...while

Иногда мы не знаем, сколько понадобится повторов. Например, у Лейлы 50 манатов, и каждый месяц она откладывает ещё 20. Сколько месяцев нужно, чтобы купить велосипед за 200 манатов? Цикл while повторяется, пока условие истинно:

let savings = 50;
let months = 0;

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

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

8 months, 210 AZN

Цикл do...while проверяет условие после тела, поэтому тело выполняется хотя бы один раз, даже если условие ложно с самого начала. В примере ниже условие ложно, но сообщение всё равно выводится один раз.

let attempts = 5;

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

Attempt number 5

for...of: перебор списка

Очень часто цикл пишут, чтобы что-то сделать с каждым элементом списка. Список в квадратных скобках называется массивом — ему будет посвящён отдельный урок. Цикл for...of берёт элементы массива или строки по одному, и счётчик не нужен.

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 и continue

break немедленно останавливает цикл, а continue пропускает только остаток текущей итерации и переходит к следующей. В коде ниже чётные числа пропускаются через continue, а когда число становится больше 7, break завершает цикл.

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