ГайдыОбновлено · 06.2026

Простое руководство по всем циклам For в JavaScript

23 мая 2024 · 8 минут чтения

Проверка фактов

Юлия Найпак

Методист по автоматизации. Сверяет паспорт инструмента с документацией вендора.

Автор Р

Редакция

Коллектив авторов, редакторов и иллюстраторов статей на сайте блога онлайн-университета «Зерокодер». Пишем…

Черновик готовит редакция с помощью ИИ. За стандарт издания отвечает главный редактор — Валерий Курземнек.

Цикл for в JavaScript повторяет блок кода заданное число раз. Синтаксис — три части в круглых скобках через точку с запятой: инициализация счётчика, условие продолжения и шаг. Пока условие истинно, тело выполняется снова. Базовая форма — for (let i = 0; i < 5; i++) { ... }. Ниже разбираем все циклы JavaScript — for, for...of, for...in, while, do...while и метод forEach — со сравнительной таблицей, рабочими примерами и частыми ошибками. Материал обновлён в 2026 году под актуальный стандарт ES2015+.

• for — когда число повторений известно или нужен индекс.
• for…of — перебор значений массива, строки, Map, Set.
• for…in — перебор ключей объекта (для массивов не подходит).
• while / do…while — когда число итераций заранее неизвестно.
• forEach — короткий перебор массива, но из него нельзя выйти через break.

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

Как устроен цикл for в JavaScript

Цикл for выполняет блок кода несколько раз, пока условие истинно. Это удобно для перебора массивов и операций с фиксированным числом повторений. Объявление состоит из трёх частей:

1. Инициализация — задаёт начальное значение счётчика, выполняется один раз.
2. Условие — проверяется перед каждой итерацией; если оно ложно, цикл завершается.
3. Шаг (инкремент/декремент) — обновляет счётчик после каждой итерации.

Базовый синтаксис выглядит так:

for (initialization; condition; increment) {
  // блок кода для выполнения
}

// Пример
for (let i = 0; i < 5; i++) {
  console.log(i);
}

Здесь переменная i начинается с 0, условие проверяет, что i меньше 5, шаг увеличивает i на единицу. Код выведет значения от 0 до 4. Переменная, объявленная через let в заголовке, существует только внутри цикла.

Все циклы JavaScript: сравнительная таблица

В языке шесть способов организовать повтор. Таблица помогает выбрать цикл for или его альтернативу под конкретную задачу.

Конструкция	Что перебирает	break / continue	Когда использовать
for	по счётчику	да	известно число повторений, нужен индекс
for…of	значения итерируемого (массив, строка, Map, Set)	да	перебор значений без индекса
for…in	перечисляемые ключи объекта	да	обход свойств объекта
while	пока условие истинно	да	число итераций заранее неизвестно
do…while	пока условие истинно	да	тело нужно выполнить хотя бы один раз
forEach	элементы массива (колбэк)	нет	короткий перебор без досрочного выхода

Главный практический вывод: классический for и for...of поддерживают break и continue, а forEach — нет. Если перебор нужно прервать досрочно, forEach не подойдёт.

Цикл for: вложенность, бесконечный цикл и пропуск частей

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

Вложенные циклы for перебирают многомерные массивы. Внешний цикл идёт по строкам, внутренний — по элементам строки.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`[${i}][${j}] = ${matrix[i][j]}`);
  }
}

Бесконечный цикл и пропуск частей

Любую из трёх частей for можно опустить. Если убрать все три, получится бесконечный цикл — выйти из него можно только через break. По данным современного учебника JavaScript, обе записи ниже эквивалентны:

// Счётчик объявлен заранее — начало опущено
let i = 0;
for (; i < 3; i++) {
  console.log(i);
}

// Бесконечный цикл — две формы записи
while (true) { /* нужен break */ }
for (;;) { /* нужен break */ }

Совет: выносите границу цикла в переменную (const max = 10), а не прописывайте число прямо в условии — так код читается лучше и легче менять предел.

Цикл for…of: перебор значений

Цикл for...of появился в ES2015 и перебирает значения итерируемых объектов: массивов, строк, Map, Set, arguments. Это самый удобный способ пройтись по массиву, когда индекс не нужен.

const numbers = [10, 20, 30];
for (let number of numbers) {
  console.log(number);
}

Если индекс всё-таки нужен, используйте метод entries() и деструктуризацию — это документированный приём MDN:

const numbers = [10, 20, 30];
for (let [index, value] of numbers.entries()) {
  console.log(index, value); // 0 10, 1 20, 2 30
}

Важный нюанс: for...of не работает с обычными объектами — они не итерируемые. Попытка перебрать { a: 1, b: 2 } выбросит TypeError: obj is not iterable. Для объектов берите for...in или Object.entries().

Цикл for…in: перебор свойств объекта

Цикл for...in перебирает перечисляемые ключи объекта. Это его прямое назначение.

const person = { name: 'John', age: 30, city: 'New York' };
for (let key in person) {
  console.log(key + ': ' + person[key]);
}

А вот для массивов for...in применять не стоит. Согласно документации MDN, у него три ловушки:

• перебирает не только индексы, но и добавленные свойства, и унаследованные методы прототипа;
• не гарантирует порядок обхода;
• возвращает индексы как строки, а не как числа.

Если for...in по массиву всё же нужен, фильтруйте собственные свойства через hasOwnProperty:

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let key in arr) {
  if (arr.hasOwnProperty(key)) {
    console.log(key); // 0, 1, 2, foo
  }
}

Метод forEach: перебор массива колбэком

Метод массива forEach вызывает переданную функцию для каждого элемента. Код получается короче и читается легче классического for.

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((item, index) => {
  console.log(index, item);
});

Главное ограничение: из forEach нельзя выйти через break, а continue заменяется на return внутри колбэка. Когда перебор нужно прерывать по условию, берите for или for...of. На больших массивах и в горячих участках кода классический for обычно быстрее forEach из-за накладных расходов на вызов колбэка.

Циклы while и do…while

Когда число повторений заранее неизвестно, удобнее while: он работает, пока условие истинно.

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

Цикл do...while отличается одним: тело выполняется минимум один раз, а условие проверяется уже после. Это нужно, когда первую итерацию надо сделать в любом случае — например, запросить ввод, а потом проверить его.

let value;
do {
  value = prompt('Введите число');
} while (!value);

Операторы break, continue и метки

break досрочно выходит из цикла, continue пропускает текущую итерацию и переходит к следующей.

// break: выходим, когда i === 5
for (let i = 0; i < 10; i++) {
  if (i === 5) break;
  console.log(i);
}

// continue: выводим только нечётные
for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) continue;
  console.log(i);
}

Из вложенных циклов обычный break выходит только из внутреннего. Чтобы прервать сразу оба, ставят метку перед внешним циклом и пишут break метка:

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i + j === 3) break outer; // выход из обоих циклов
    console.log(i, j);
  }
}

Частые ошибки при работе с циклами

• for…in по массиву. Ловит лишние свойства и не гарантирует порядок — для массивов берите for...of или for.
• break внутри forEach. Не сработает: forEach не прерывается. Нужен досрочный выход — меняйте на for.
• var вместо let в счётчике. С var внутри асинхронных колбэков все итерации видят одно и то же значение. let создаёт свою переменную на каждую итерацию.
• Изменение длины массива в цикле. Добавление или удаление элементов прямо в теле сбивает индексы и условие выхода.
• Пересчёт length в условии. В горячем коде кешируйте длину: const len = arr.length перед циклом.

Какой цикл выбрать

Короткий алгоритм выбора под задачу:

• Нужен индекс или известно число повторений → for.
• Перебор значений массива или строки → for...of.
• Обход ключей объекта → for...in.
• Число итераций неизвестно → while (или do...while, если тело нужно выполнить хотя бы раз).
• Короткий перебор массива без досрочного выхода → forEach.

Освоив эти шесть конструкций, вы закроете почти любую задачу с повторами в JavaScript. Следующий шаг — попрактиковаться на реальных массивах и объектах: именно так синтаксис переходит в навык.

Частые вопросы о циклах for в JavaScript

Чем for…of отличается от for…in?

for…of перебирает значения итерируемых объектов (массивов, строк, Map, Set), а for…in — перечисляемые ключи объекта. Для массивов используют for…of, для объектов — for…in.

Можно ли выйти из forEach через break?

Нет. forEach не поддерживает break и continue. Если перебор нужно прервать досрочно, используйте for или for…of, где break и continue работают.

Как получить индекс элемента в for…of?

Используйте метод entries() и деструктуризацию: for (let [index, value] of arr.entries()). Так в каждой итерации доступны и индекс, и значение.

Что быстрее — for или forEach?

На больших массивах и в нагруженных участках классический for обычно быстрее forEach из-за накладных расходов на вызов колбэка. Для коротких массивов разница несущественна.

Когда использовать do…while вместо while?

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