Циклы for и while

Сумму 1 + 2 + … + 100 можно записать в коде слагаемое за слагаемым, но набирать придётся сто чисел. Повторяющиеся действия описывает цикл — конструкция, которая выполняет код снова и снова, пока условие истинно.

Представьте бегуна на стадионе. Тренер говорит: «Бегай круги, пока не пробежишь сто». Перед каждым новым кругом бегун проходит контрольную арку, где сверяется со счётом. Потом пробегает круг и делает отметку в блокноте.

Цикл устроен так же. Чаще всего пишут цикл for:

let sum = 0;

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

console.log(sum); // 5050

Три части заголовка

В скобках после for стоят три части через точку с запятой:

1. let i = 1 выполняется один раз, до начала цикла. Бегун выходит на старт.
2. Условие i <= 100 проверяется перед каждым проходом. Если оно истинно, выполняется тело цикла в фигурных скобках. Это контрольная арка перед кругом.
3. Шаг i++ выполняется после тела. Это отметка в блокноте.

Один проход тела называют итерацией. Давайте разберём программу по строкам:

1. let sum = 0 заводит сумму.
2. for (let i = 1; i <= 100; i++) повторяет тело, пока i не станет равной 101.
3. sum += i добавляет к сумме очередное i.
4. console.log(sum) стоит после закрывающей скобки цикла. Он выполняется один раз, когда цикл уже закончился, и выводит итоговую сумму 5050.

Условие задаёт число итераций. С i < 3 тело выполняется для 1 и 2, а при 3 условие уже ложно.

Порядок частей заголовка — то место, где новички путаются чаще всего. В виджете тот же цикл с условием i <= 3: нажимайте «Следующий шаг» и следите, когда выполняется каждая часть заголовка.

Шаг i++ выполняется после тела, а условие — перед ним. Поэтому последняя проверка 4 <= 3 уже ложна, и тело с i, равной 4, не выполняется. Условие проверяется и до первого прохода: если оно ложно сразу, тело не выполнится ни разу.

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

Цикл while

У while в скобках только условие. Переменную объявляют до цикла, а меняют в теле. Так считают, сколько раз 100 нужно разделить пополам с округлением вниз, чтобы осталась 1:

let n = 100;
let steps = 0;

while (n > 1) {
    n = Math.floor(n / 2);
    steps++;
}

console.log(steps); // 6

Значения n идут так: 100, 50, 25, 12, 6, 3, 1. Шесть делений, и на 1 условие n > 1 становится ложным. while берут, когда число повторений заранее неизвестно и зависит от того, что происходит в теле.

Если тело не меняет переменную из условия, условие остаётся истинным, и цикл не заканчивается никогда. В задачах курса такую программу останавливает ограничение по времени. Если вы запустили её у себя, остановите программу клавишами Ctrl+C в терминале.

Есть и форма do { … } while (условие);. Она проверяет условие после тела, поэтому тело выполняется хотя бы один раз. Например, do { console.log("hi"); } while (false); выводит hi один раз, хотя условие ложно с самого начала.

На собеседовании иногда спрашивают, чем while отличается от do…while. Разница в том, когда проверяется условие: while проверяет его перед телом, а do…while — после.

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

Переменную цикла прочитали после цикла:

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

console.log(i); // ✗

ReferenceError: i is not defined

Программа выводит 0, 1 и 2, а затем останавливается с этой ошибкой; так её формулируют Node и Chrome. Переменная, объявленная через let в заголовке for, видна только внутри цикла — в заголовке и в теле. Если значение нужно после цикла, объявите переменную до него и меняйте внутри, как в цикле while.

Главное

• В заголовке for три части: первая выполняется один раз, условие — перед каждой итерацией, шаг — после тела.
• while проверяет только условие, а переменную из него меняют в теле, иначе цикл не закончится.
• do…while проверяет условие после тела, поэтому тело выполняется хотя бы один раз.
• Переменная, объявленная через let в заголовке for, видна только внутри цикла.