
Привет! Я — Александр Дудукало, автор базового курса по JavaScript. В прошлой статье мы разобрали работу с объектами в JavaScript, а сегодня поговорим о циклах.
Представьте, что нужно написать «Привет» ста друзьям подряд. Руки быстро устанут набирать одно и то же сообщение, а вот компьютер легко справится с таким заданием. Для этого существуют циклы — они позволяют выполнять повторяющиеся действия автоматически.
Если вы уже имеете опыт в программировании, то, скорее всего, статья для вас покажется избыточной. Однако она может пригодиться, чтобы освежить знания.
Как устроены циклы
Обычно люди не очень любят повторять одно и то же действие много раз подряд — после десятого раза начинает надоедать. Однако компьютеры просто обожают циклически выполнять одни и те же действия.
Например, нам нужно вывести в консоли одинаковую строку десять раз подряд (не спрашивайте зачем).
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');
console.log('Hello, world!');

Да, это просто десять одинаковых строк. А что если их нужно не 10, а 100? А если тысяча или даже десять тысяч? Писать их вручную точно никому не понравится. Для таких задач существует один из самых популярных циклов — for.
for (let i = 0; i < 10; i++) {
console.log('Hello, world!');
}
Результат в консоли тот же, но код занимает всего три строки.
Синтаксис цикла for состоит из трех частей в круглых скобках.
Инициализация — let i = 0. Создается переменная-счетчик i, которая обычно начинает с нуля.
Условие — i < 10. Пока условие истинно, цикл будет выполняться. Как только i станет равно 10, цикл остановится.
Шаг — i++. После каждого повторения к переменной i прибавляется единица.
То, что написано в фигурных скобках { ... }, называется телом цикла. Именно этот код выполняется многократно.
Круглые скобки вокруг трех частей обязательны, а вот фигурные нужны не всегда. Если в теле цикла всего одна строка, их можно опустить:
for (let i = 0; i < 10; i++) console.log(`Итерация ${i + 1}`);
В программировании переменные-счетчики обычно называют i (от слова index). Иногда используют j, k и так далее, если циклов несколько. Но вы можете придумать любое название переменной.
Теперь перейдем к определениям.
Цикл — это конструкция, которая выполняет один и тот же код многократно. Каждое повторение цикла называется итерацией.
Итерация — это выполнение тела цикла.
Цикл for удобно использовать, когда нужно работать со значением счетчика:
for (let i = 0; i < 10; i++) {
console.log(`Итерация ${i + 1}`);
}

Здесь мы пишем i + 1, потому что счетчик i начинается с нуля, а людям привычнее считать с единицы.
Цикл легко подстраивать под разные задачи. Например, вы можете менять стартовое и конечное значение, настраивая их в счетчике и условии:
for (let i = 3; i < 7; i++) {
console.log(`Итерация ${i + 1}`);
}

При необходимости можно создать цикл с обратным отсчетом, чтобы значение i менялось в обратную сторону:
for (let i = 7; i > 0; i--) {
console.log(`Итерация ${i }`);
}

И еще один пример, в котором меняется шаг изменения значения i. Это тоже может пригодиться:
for (let i = 0; i <= 10; i += 2) {
console.log(`Значение в i: ${i}`);
}

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

30+ бесплатных курсов на IT-темы в Академии Selectel
Для начинающих и опытных специалистов.
Управление циклом
Сразу к делу. Цикл можно останавливать полностью или же прерывать только текущую операцию. Иногда это бывает полезно. Например, вы ищете конкретное значение в длинном списке. Как только оно найдется, не будет смысла продолжать перебор. Или наоборот: у вас есть цикл, который проверяет элементы, но некоторые из них вам неинтересны, поэтому их можно просто пропустить.
Завершение работы цикла
break — это оператор, который полностью останавливает цикл, даже если условие продолжения еще выполняется. После break программа сразу выходит из цикла и продолжает выполнение кода дальше.
for (let i = 1; i <= 100; i++) {
const randomNumber = Math.floor(Math.random() * 10) + 1;
console.log(`Попытка ${i}: выпало число ${randomNumber}`);
if (randomNumber === 7) {
console.log('Ура! Выпало число 7. Останавливаем цикл!');
break; // прерываем цикл
}
}

В приведенном примере цикл будет полностью остановлен, когда случайное число окажется равным 7. Даже если в условии стоит i <= 100, до конца цикл уже не дойдет.
Завершение текущей итерации
continue — это оператор, который завершает текущую итерацию цикла и сразу переходит к следующей. В отличие от break, он не останавливает весь цикл.
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // если число чётное - пропускаем
}
console.log(`Нечётное число: ${i}`);
}
В приведенном примере цикл пропустит все четные числа. Если i делится на два без остатка, срабатывает continue, и цикл сразу переходит к следующему шагу. При этом важно, что цикл не останавливается полностью.
Приведенные примеры немного надуманные, но знать про break и continue очень полезно. С помощью break можно остановить цикл, когда нужный результат уже найден — это экономит время и ресурсы. С помощью continue можно гибко управлять логикой — отбрасывать ненужные случаи, фильтровать данные и упрощать код.
Цикл while
Цикл for чаще используют тогда, когда известно количество повторений. Однако бывают ситуации, в которых мы заранее не знаем, сколько раз придется повторить действие. Нам известно лишь условие, при котором цикл должен выполняться. Для таких случаев и существует цикл while.
while — это цикл, который выполняет тело до тех пор, пока указанное условие остается истинным (true). Как только условие становится ложным (false), цикл останавливается.
let password = '';
while (password !== '1234') {
password = prompt('Введите пароль (подсказка: 1234)');
}
alert('Добро пожаловать!');


Появляется окно prompt, в котором нужно ввести пароль. Если ввести что-то не то, цикл продолжит спрашивать пароль. Как только пользователь введет строку «1234», условие password !== '1234' станет ложным, и цикл остановится. После этого появится соответствующее сообщение.
Как работает while.
Проверяется условие, указанное в круглых скобках.
Если условие истинно, то выполняется тело цикла.
После выполнения снова проверяется условие.
Цикл повторяется до тех пор, пока условие остается истинным.
Таким образом, количество повторений заранее неизвестно, и цикл крутится, пока выполняется условие.
Кстати, while можно прерывать с помощью break, как и текущую итерацию, использовав continue.
Важно не забывать изменять условие внутри цикла. Если условие всегда истинно, то цикл никогда не остановится, получится бесконечный цикл. Из-за этого программа или браузер может зависнуть.
while (true) {
console.log('Это будет повторяться бесконечно!');
}
Цикл do...while
Цикл do…while, очень похож на while кроме одного важного нюанса: while сначала проверяет условие, а потом выполняет тело цикла. А do...while работает наоборот — сначала выполняет тело, а уже потом проверяет условие.
do...while — это цикл, который выполняет тело хотя бы один раз, а затем продолжает выполнение до тех пор, пока условие остается истинным (true).
let randomNumber = 0;
do {
randomNumber = Math.floor(Math.random() * 6) + 1; // случайное число от 1 до 6
console.log(`Выпало: ${randomNumber}`);
} while (randomNumber !== 6);
console.log('Ура! Выпала шестерка!');

В примере мы генерируем случайное число от 1 до 6. Если выпала не шестерка, цикл повторяется. Как только выпадает 6, цикл останавливается. Главное — даже если с первой попытки выпадает нужное число, тело цикла все равно выполнится хотя бы один раз.
Принцип работы do...while.
Выполняется тело цикла.
Проверяется условие в скобках после while.
Если условие истинно, то цикл запускается снова.
Если условие ложно, цикл завершается.
Как и в случае while, если условие всегда истинно, цикл никогда не завершится. Это приведет к бесконечному повторению цикла, из-за которого могут зависнуть программа или браузер. И, конечно, операторы завершения доступны здесь, как и в других циклах.
Подведем итог
Мы познакомились с циклами for, while и do...while. Другие циклы — for...of, for...in и методы массивов удобнее рассматривать после изучения массивов.
Главное, что нужно запомнить: циклы позволяют автоматизировать повторяющиеся действия и делают код проще.
Увидимся в следующей статье.