Помимо условных конструкций, в программировании невозможно обойтись без циклов. Это специальный механизм, позволяющий выполнять любое действие многократно. На его базе строятся практически любые вычисления — от подсчёта среднего балла в группе до обработки входящих запросов на сайтах.

Цикл хранит повторяющееся действие в одном месте и запускает его снова, пока условие остаётся истинным.

Первый пример

Пусть программа должна пять раз вывести строку 'Hello!'. Чтобы остановить повторение в нужный момент, программе нужна переменная, которая хранит номер текущего шага. Такую переменную обычно называют счётчиком.

В примере счётчик называется counter. Перед циклом он равен 0. После каждого вывода строки мы увеличиваем его на единицу.

let counter = 0;
while (counter < 5) {
  console.log('Hello!');
  counter = counter + 1;
}

// => Hello!
// => Hello!
// => Hello!
// => Hello!
// => Hello!

После while в круглых скобках записывается условие, а тело цикла — в фигурных скобках. Пока counter < 5, выполняется тело цикла. После выполнения тела движок возвращается к условию и проверяет его заново. Когда условие становится ложным (false), программа выходит из цикла и продолжает выполнять код дальше.

Без изменения счётчика условие никогда не станет ложным, и цикл превратится в бесконечный. Со стороны это выглядит так, как будто программа зависла.

Работа цикла по шагам

Перед первым повтором counter равен 0.

Шаг 1. Проверяется counter < 5. Значение 0 меньше 5, поэтому выполняется тело цикла. На экран выводится Hello!, а counter увеличивается до 1.

Шаг 2. Условие проверяется снова. Значение 1 всё ещё меньше 5, тело цикла выполняется ещё раз. На экран снова выводится Hello!, а counter увеличивается до 2.

Так продолжается, пока counter не станет равен 5. При следующей проверке условие counter < 5 будет ложным, поэтому цикл завершится.

counter = 0
┌──→ counter < 5?
│     true │
│          ↓
│    console.log('Hello!')
│    counter = counter + 1
└──────────┘
      false → выход из цикла

Тело цикла и продолжение программы

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

let counter = 0;
while (counter < 2) {
  console.log('Hello!');
  counter = counter + 1;
}

console.log('End of loop');

Здесь console.log('Hello!') и counter = counter + 1 находятся внутри цикла, а console.log('End of loop') стоит за его пределами, поэтому выполнится один раз после завершения цикла.

Цикл внутри функции

Теперь перенесём цикл в функцию. Она напечатает числа от 1 до переданного значения:

const printNumbers = (n) => {
  let i = 1;
  while (i <= n) {
    console.log(i);
    i = i + 1;
  }
  console.log('Finished!');
};

printNumbers(3);
// => 1
// => 2
// => 3
// => Finished!

Цикл while печатает числа, пока i не станет больше n. После этого программа выходит из цикла и выполняет console.log('Finished!').

Условие и изменение счётчика зависят от задачи. Счётчик можно увеличивать на 1, на 2 или сразу на 10. Его можно уменьшать, если цикл идёт от большего значения к меньшему. Главное, чтобы условие когда-нибудь стало ложным, иначе цикл будет работать бесконечно.

Напишите функцию printNumbers(initialNumber), которая принимает число и выводит все числа от initialNumber до 1 включительно, каждое на отдельной строке.

printNumbers(3);
// 3
// 2
// 1