Циклы

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

while: пока условие верно

Самый простой цикл — while. Посчитаем от одного до трёх:

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

Перед каждым кругом JavaScript проверяет условие в скобках. Верно — выполняет тело и возвращается к проверке. Неверно — выходит из цикла и идёт дальше.

Переменная i здесь — счётчик. Она равна 1, потом 2, потом 3. Когда она стала 4, условие i <= 3 перестало быть верным, и цикл закончился.

Строка i++ увеличивает счётчик на единицу. Это то же самое, что i = i + 1, только короче.

Условие проверяется до первого круга. Если оно ложно с самого начала, тело не выполнится ни разу. Это не ошибка: ноль кругов тоже бывает.

Бесконечный цикл

Уберите из примера строку i++. Счётчик навсегда останется единицей, условие всегда будет верным, и цикл никогда не закончится. Программа зависнет.

Правило простое: внутри цикла что-то должно менять то, что проверяется в условии. Иначе выхода нет.

Здесь, на платформе, зависший код не повесит вам страницу. Если проверка длится дольше двух секунд, её останавливают и показывают, что время вышло. Увидели такое — первым делом ищите забытый шаг счётчика.

for: всё про счётчик в одной строке

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

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

Части разделены точкой с запятой. Первая — старт: let i = 1 выполняется один раз перед началом. Вторая — условие: i <= 3 проверяется перед каждым кругом. Третья — шаг: i++ выполняется после каждого круга.

Работает это ровно так же, как while выше. Но шаг теперь трудно забыть: он стоит на виду, в первой строке.

Когда брать какой? for — когда заранее понятно, сколько будет кругов. while — когда это выяснится по ходу дела.

Ошибка на единицу

Самая частая ошибка в циклах — один круг лишний или один недостающий.

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

Хотели до трёх, а тройки нет: условие i < 3 для тройки ложно. Нужно было i <= 3.

Чтобы не гадать, проверьте границы руками. Какое значение счётчика будет первым? Какое последним? Подставьте их в условие и посмотрите, что выйдет.

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

Циклом часто что-то копят: сумму, произведение, строку. Для этого заводят переменную до цикла, а внутри добавляют к ней по кусочку:

let total = 0
for (let i = 1; i <= 4; i++) {
  total += i
}
// total равно 10

total += i — короткая запись для total = total + i.

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

break и continue

break выходит из цикла немедленно. Программа продолжает со строки после цикла.

continue не выходит, а пропускает остаток текущего круга и переходит к следующему:

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

Чётные круги пропущены целиком. Как только i стало больше пяти, цикл закончился, хотя до десяти было ещё далеко.

Коротко: break — «хватит, выходим», continue — «этот круг пропускаем».

do while: хотя бы один раз

У while есть родственник, который проверяет условие после тела:

let n = 10
do {
  console.log(n)
  n++
} while (n <= 3)
// 10

Условие ложно с самого начала, а тело всё равно выполнилось один раз. Пригождается он редко: когда действие нужно сделать минимум раз, а повторять ли его, понятно только после.

Где писать код в заданиях

В каждом задании уже есть заготовка функции. Ваш цикл пишется внутри неё, а ответ отдаётся словом return. Подробно о функциях будет в следующем уроке, пока хватит этого.

Теперь попробуйте сами. Нажмите «Запустить», и увидите результат через миг.