Циклы

Цикл повторяет один и тот же код несколько раз. Он нужен, когда надо обработать список товаров, вывести строки таблицы или посчитать сумму — без цикла пришлось бы копировать код вручную. Одно выполнение кода цикла называют итерацией.

while

Цикл while («пока») повторяет блок, пока условие истинно. Условие проверяется перед каждой итерацией:

let i = 1;
 
while (i <= 3) {
  console.log(i);
  i++;
}
// 1
// 2
// 3

Переменная i называется счётчиком. Внутри цикла её обязательно нужно менять, иначе условие никогда не станет ложным.

for

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

for (let i = 1; i <= 3; i++) {
  console.log(`Шаг ${i}`);
}
// Шаг 1
// Шаг 2
// Шаг 3

Этот цикл делает то же, что и предыдущий while, но всё управление счётчиком собрано в одной строке.

Другой шаг

Счётчик не обязан расти на единицу. Его можно увеличивать на любое число или уменьшать — например, для обратного отсчёта:

for (let i = 3; i > 0; i--) {
  console.log(i);
}
console.log('Старт!');
// 3
// 2
// 1
// Старт!

for...of

Цикл for...of перебирает элементы по одному: символы строки или элементы массива. На каждой итерации очередной элемент попадает в переменную:

for (const letter of 'кот') {
  console.log(letter);
}
// к
// о
// т

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

Накопление результата

Частый приём — завести переменную до цикла и менять её на каждой итерации. Так считают суммы, количества и собирают строки:

let sum = 0;
 
for (let i = 1; i <= 5; i++) {
  sum += i;
}
 
console.log(sum); // 15

Обратите внимание: console.log стоит после цикла, поэтому выводится только итоговый результат.

do...while

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

let attempts = 5;
 
do {
  console.log(`Попытка ${attempts}`); // Попытка 5
  attempts++;
} while (attempts < 3);

Такой цикл нужен редко — например, когда сначала нужно что-то сделать, а потом решить, повторять ли.

Частая ошибка

Если забыть изменить счётчик, получится бесконечный цикл: условие всегда истинно, и программа не остановится сама:

let i = 1;
 
while (i <= 3) {
  // забыли i++ — цикл никогда не закончится
}

На этом сайте такой код прервётся через несколько секунд, а на обычной странице бесконечный цикл «подвешивает» вкладку браузера.