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

Цикл 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 в заголовке, существует только внутри цикла.

ОНЛАЙН-ПРАКТИКУМ

ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ

ЧТО БУДЕТ НА ОБУЧЕНИИ?

• ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
• Где и как применять? Потестируем модель после установки на разных задачах
• Как дообучить модель под себя?

Участвовать бесплатно

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

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

Главный практический вывод: классический 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?

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