Циклы while и for

Основная идея

Циклы while и for — это управляющие конструкции JavaScript, позволяющие многократно выполнять блок кода, пока условие истинно. Цикл for удобен для итераций с известным количеством повторений, а while — когда количество итераций заранее неизвестно.

Ключевые аспекты

while — проверяет условие перед каждой итерацией, выполняется пока условие true
do...while — гарантированно выполняется минимум один раз, проверяет условие после итерации
for — компактная запись с инициализацией, условием и шагом в одной строке
break — досрочно завершает цикл
continue — пропускает текущую итерацию и переходит к следующей

Плюсы использования циклов

Избавляют от дублирования кода при повторяющихся операциях
Позволяют обрабатывать коллекции данных любого размера
Гибкость в управлении потоком выполнения через break и continue

Минусы

Бесконечный цикл при неправильном условии может заблокировать браузер
Вложенные циклы снижают читаемость и производительность
Легко допустить ошибку на единицу (off-by-one error)

Частые ошибки на собеседованиях

Путают while и do...while — не понимают, что do...while выполнится минимум один раз
Забывают изменять счётчик в while, что приводит к бесконечному циклу
Не знают, что for можно записать без любой из трёх частей (инициализация, условие, шаг)
Путают break и continue — не понимают разницу между выходом из цикла и пропуском итерации

Введение и проблематика

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

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

JavaScript унаследовал синтаксис циклов от языка C. Циклы while и for существуют практически во всех языках программирования.

Базовая теория

Цикл while

Цикл while выполняет блок кода, пока условие истинно:

while (условие) {
  // тело цикла
}

Алгоритм работы:

Проверяется условие
Если true — выполняется тело цикла
Возврат к шагу 1
Если false — цикл завершается

❓

Code Example 1: Сколько раз выполнится цикл? Какое значение будет у count после цикла?

let count = 0;
 
while (count < 3) {
  console.log(count); // 0, 1, 2
  count++;
}
 
console.log('Цикл завершён, count =', count); // 3

Цикл do...while

Вариация while, которая сначала выполняет тело, а потом проверяет условие:

do {
  // тело цикла
} while (условие);

let count = 0;
 
do {
  console.log(count); // 0, 1, 2
  count++;
} while (count < 3);

⚠️

Главное отличие: do...while гарантированно выполнится минимум один раз, даже если условие изначально ложно!

❓

Code Example 2: В чём разница между while и do...while? Что выведет каждый цикл?

let x = 10;
 
// Не выполнится ни разу
while (x < 5) {
  console.log('while:', x);
}
 
// Выполнится один раз!
do {
  console.log('do-while:', x); // 10
} while (x < 5);

Цикл for

Цикл for — наиболее часто используемый цикл. Он компактно объединяет инициализацию, условие и шаг:

for (инициализация; условие; шаг) {
  // тело цикла
}

❓

Code Example 3: Что выведет этот цикл? Сколько итераций?

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

Шаг 1: Инициализация

Выполняется один раз при входе в цикл. Обычно здесь объявляется переменная-счётчик.

Шаг 2: Проверка условия

Проверяется перед каждой итерацией. Если false — цикл завершается.

Шаг 3: Тело цикла

Выполняется, если условие истинно.

Шаг 4: Шаг (инкремент/декремент)

Выполняется после каждой итерации тела цикла. Затем возврат к шагу 2.

Практические примеры

Итерация по массиву

const fruits = ['яблоко', 'банан', 'апельсин'];
 
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// яблоко
// банан
// апельсин

Обратный цикл

// Обратный отсчёт
for (let i = 5; i >= 0; i--) {
  console.log(i); // 5, 4, 3, 2, 1, 0
}

Цикл с шагом больше единицы

// Только чётные числа
for (let i = 0; i <= 10; i += 2) {
  console.log(i); // 0, 2, 4, 6, 8, 10
}

Вложенные циклы

// Таблица умножения 3x3
for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= 3; j++) {
    console.log(`${i} x ${j} = ${i * j}`);
  }
}

Управление циклом: break и continue

Оператор break

break немедленно прекращает выполнение цикла:

❓

Code Example 4: Что выведет console.log? Когда цикл завершится?

for (let i = 0; i < 10; i++) {
  if (i === 5) {
    break; // выходим из цикла
  }
  console.log(i); // 0, 1, 2, 3, 4
}

Оператор continue

continue пропускает текущую итерацию и переходит к следующей:

❓

Code Example 5: Что выведет console.log? Какое число будет пропущено?

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // пропускаем 2
  }
  console.log(i); // 0, 1, 3, 4
}

Метки для вложенных циклов

Метки позволяют выйти из внешнего цикла изнутри вложенного:

❓

Code Example 6: Что выведет этот код? Зачем нужна метка outer?

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      break outer; // выход из внешнего цикла
    }
    console.log(i, j);
  }
}
// 0 0
// 0 1
// 0 2
// 1 0

Пограничные кейсы

🚫

Бесконечный цикл — частая ошибка начинающих. Браузер может зависнуть!

// ❌ Бесконечный цикл — забыли увеличить счётчик
let i = 0;
while (i < 5) {
  console.log(i);
  // i++ — забыли!
}
 
// ❌ Бесконечный цикл — условие всегда true
for (let i = 0; i >= 0; i++) {
  console.log(i);
}

Пустые части for

Любую часть for можно опустить:

// Без инициализации
let i = 0;
for (; i < 3; i++) {
  console.log(i);
}
 
// Без шага
for (let i = 0; i < 3;) {
  console.log(i);
  i++;
}
 
// Бесконечный цикл (все части пустые)
for (;;) {
  // нужен break для выхода!
  break;
}

Однострочный while

// Короткая форма без фигурных скобок
let i = 0;
while (i < 3) console.log(i++);

Плюсы и минусы

Цикл	Когда использовать	Плюсы	Минусы
for	Известное количество итераций	Компактный синтаксис, всё в одной строке	Менее читаем для сложных условий
while	Неизвестное количество итераций	Простой синтаксис	Легко забыть изменить счётчик
do...while	Нужна минимум одна итерация	Гарантированное выполнение	Редко используется, менее интуитивен

Вопросы интервьюера

Q: В чём разница между while и do...while?

while проверяет условие до выполнения тела — может не выполниться ни разу. do...while сначала выполняет тело, потом проверяет условие — выполнится минимум один раз.

Q: Как выйти из вложенного цикла?

Использовать метку (label) и break метка. Также можно вынести циклы в функцию и использовать return.

Q: Чем break отличается от continue?

break полностью прекращает цикл. continue пропускает текущую итерацию и переходит к следующей.

Q: Можно ли изменять массив во время итерации по нему в цикле for?

Можно, но осторожно. При удалении элементов индексы сдвигаются, что может привести к пропуску элементов. Безопаснее итерировать в обратном порядке или использовать методы массивов.

Q: Какой цикл быстрее — for или while?

Производительность одинакова. Современные движки JavaScript оптимизируют оба варианта. Выбирайте по читаемости.

Vue Front-end Инженер