Циклы while и do-while: повторяй, пока работает

Вы когда-нибудь замечали, что многие задачи в жизни — это одно и то же действие снова и снова? «Жуй, пока не прожуёшь», «листай ленту, пока не надоест», «проверяй почту каждые 10 минут». Именно для таких задач в JavaScript существуют циклы — и сейчас мы разберём самый базовый из них: while и его брата do-while.

🤔 Зачем нужны циклы — и почему без них больно

Представьте, что вам нужно вывести в консоль числа от 1 до 5. Без циклов вы бы написали вот так:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);

Пять строк — ладно, терпимо. Но что если нужно вывести числа от 1 до 1000? Или до миллиона? Копировать строку миллион раз — не вариант. А если число заранее неизвестно, и его вводит пользователь?

Циклы — это не «продвинутая» тема. Это базовый инструмент, без которого невозможно написать почти ни одну реальную программу. Любая игра (игровой цикл), любой сервер (цикл обработки запросов), любая обработка данных (перебор строк таблицы) — всё это циклы.

🔄 Цикл while: «пока условие верно — делай»

Слово while в переводе с английского значит «пока». Именно это и делает цикл: пока условие истинно — выполняет тело. Как только условие стало ложным — останавливается.

Вот синтаксис:

while (условие) {
  // тело цикла — выполняется снова и снова
}

Давайте разберём по шагам, как это работает. Напишем цикл, который выводит числа от 1 до 5:

let i = 1;          // шаг 1: создаём переменную-счётчик

while (i <= 5) {    // шаг 2: проверяем условие
  console.log(i);   // шаг 3: выполняем тело
  i = i + 1;        // шаг 4: обновляем счётчик
}

// Результат:
// 1
// 2
// 3
// 4
// 5

Давайте пройдёмся по каждому моменту вручную, как это делает компьютер:

Вот пример, когда тело не выполнится вообще:

let i = 10;

while (i < 5) {       // 10 < 5 → false уже в первой проверке
  console.log(i);     // это никогда не выполнится
  i++;
}

console.log("Цикл пропущен, i =", i); // "Цикл пропущен, i = 10"

🧮 Счётчик: три необходимых элемента

Когда вы используете цикл while для счёта итераций, в коде всегда должны быть три элемента. Если хотя бы один пропущен — цикл либо не запустится, либо не остановится никогда.

let i = 0;

while (i < 10)

i++;

Обратите внимание на запись i++ — это сокращение от i = i + 1. В JavaScript это очень распространённая запись. Аналогично есть i-- (уменьшить на 1), i += 2 (увеличить на 2), i *= 2 (умножить на 2).

Пример: накопление суммы чисел от 1 до 100:

let i = 1;
let sum = 0;

while (i <= 100) {
  sum = sum + i;  // добавляем текущее число к сумме
  i++;            // переходим к следующему числу
}

console.log("Сумма от 1 до 100 =", sum); // 5050

Немецкий математик Гаусс в детстве сложил это в уме за минуту. Компьютер — за микросекунды. Но принцип тот же: каждый шаг добавляет одно число к накопленной сумме.

⚠️ Бесконечный цикл — и как его избежать

Одна из самых частых ошибок новичков — бесконечный цикл. Это когда условие никогда не становится ложным, и программа крутится вечно, зависая или съедая 100% процессора.

let i = 1;
while (i > 0) {   // i всегда > 0, условие никогда не станет false
  console.log(i);
  i++;            // i только растёт!
}
// Этот цикл никогда не остановится

Ещё одна ловушка — забыть обновить счётчик:

let i = 1;
while (i <= 10) {
  console.log(i);
  // Забыли написать i++  ← вот проблема
}
// i всегда равно 1, условие всегда true

Правило защиты от бесконечного цикла: всегда задавайте себе вопрос — «что должно произойти, чтобы условие стало false?». Если ответа нет — цикл бесконечный.

Если браузер всё же завис из-за бесконечного цикла — закройте вкладку. В Node.js — нажмите Ctrl + C в терминале.

🔁 Цикл do-while: сначала делай, потом проверяй

Цикл do-while — это «перевёрнутый» while. Ключевая разница одна: условие проверяется ПОСЛЕ выполнения тела. Это гарантирует, что тело выполнится хотя бы один раз, что бы ни было в условии.

Синтаксис:

do {
  // тело цикла — выполнится хотя бы один раз!
} while (условие);  // ← точка с запятой обязательна!

Важно: после закрывающей скобки while (условие) обязательно ставить точку с запятой — это особенность синтаксиса.

Сравним два цикла, когда условие ложно изначально:

// while — тело НЕ выполнится ни разу
let a = 10;
while (a < 5) {
  console.log("while:", a);  // не выполнится
}

// do-while — тело выполнится ОДИН РАЗ
let b = 10;
do {
  console.log("do-while:", b);  // выведет "do-while: 10"
} while (b < 5);

Вот наглядная разница:

🎯 Когда нужен do-while: запрос пользователя

Классический случай для do-while — это запрос данных у пользователя. Нам нужно сначала показать запрос (тело), и только потом проверить, правильно ли ввёл пользователь. Логично: нельзя проверить ввод, не запросив его.

let answer;

do {
  answer = prompt("Введи число от 1 до 10:");
  answer = Number(answer);
} while (answer < 1 || answer > 10);

console.log("Отлично! Ты ввёл:", answer);

Читаем вслух: «Запросить ответ — потом проверять, пока ответ меньше 1 или больше 10». Пользователь будет видеть запрос снова и снова, пока не введёт корректное значение.

🎮 Пример: симуляция «Угадай число»

Давайте соберём всё вместе в маленькую игру. Компьютер загадывает число от 1 до 10, пользователь пытается угадать. Это отличный пример цикла в реальном применении:

// Загадываем случайное число от 1 до 10
const secret = Math.floor(Math.random() * 10) + 1;
let guess;
let attempts = 0;

do {
  guess = Number(prompt("Угадай число от 1 до 10:"));
  attempts++;

  if (guess < secret) {
    alert("Маловато! Попробуй больше.");
  } else if (guess > secret) {
    alert("Многовато! Попробуй меньше.");
  }

} while (guess !== secret);

alert(`Правильно! Ты угадал за ${attempts} попытки!`);

Разбор кода:

• Math.random() — случайное число от 0 до 1 (не включая 1)
• Math.floor(Math.random() * 10) — случайное целое от 0 до 9
• + 1 — сдвигаем диапазон до 1–10
• Цикл крутится, пока guess !== secret, то есть пока не угадали
• attempts++ — считаем количество попыток

Обратите внимание: мы используем do-while, потому что нужно сначала запросить угадку, а уже потом проверять. Классический кейс.

✅ Итоги урока

• Цикл — это инструмент для повторения блока кода много раз без копирования
• while: проверяет условие до выполнения тела. Может не выполниться ни разу
• Три обязательных элемента счётчика: инициализация, условие, обновление
• Бесконечный цикл возникает, если условие никогда не становится false — всегда проверяй обновление счётчика
• do-while: проверяет условие после тела. Тело выполняется хотя бы один раз
• do-while идеален для запроса пользователя: сначала запросить, потом проверять
• После while (условие) в do-while нужна точка с запятой