Циклы в JavaScript: for, while, do...while, for...of и for...in с примерами

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

Что такое цикл в JavaScript

Цикл — это конструкция, которая повторяет выполнение блока кода, пока выполняется заданное условие или пока не закончатся элементы коллекции.

В JavaScript чаще всего используются:

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

Цикл for: классический вариант

Цикл for удобен, когда вы заранее понимаете, сколько раз нужно выполнить код. Например, вывести числа от 1 до 5:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Структура цикла состоит из трёх частей:

• let i = 1 — начальное значение счётчика;
• i <= 5 — условие продолжения цикла;
• i++ — изменение счётчика после каждой итерации.

Практический пример: посчитать сумму чисел в массиве.

const prices = [100, 250, 80, 400];
let total = 0;

for (let i = 0; i < prices.length; i++) {
  total += prices[i];
}

console.log(total); // 830

Совет: если вам нужен индекс элемента, классический for остаётся отличным выбором.

Цикл while: повторять, пока условие истинно

Цикл while выполняется до тех пор, пока условие возвращает true. Он полезен, когда количество повторений заранее неизвестно.

let attempts = 3;

while (attempts > 0) {
  console.log('Осталось попыток: ' + attempts);
  attempts--;
}

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

let count = 1;

// Ошибка: count не меняется
while (count <= 5) {
  console.log(count);
}

Правильный вариант:

let count = 1;

while (count <= 5) {
  console.log(count);
  count++;
}

do...while: выполнить хотя бы один раз

Цикл do...while отличается от while тем, что сначала выполняет код, а уже потом проверяет условие. Поэтому тело цикла выполнится минимум один раз.

let number = 10;

do {
  console.log('Число: ' + number);
  number++;
} while (number < 5);

Хотя условие сразу ложно, сообщение всё равно будет выведено один раз. На практике do...while используют реже, но он подходит для меню, повторного запроса данных или логики вида «сначала сделать, потом проверить».

for...of: удобный перебор значений

Если нужно просто пройтись по значениям массива, строки, NodeList или другой итерируемой коллекции, используйте for...of.

const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}

Этот вариант читается проще, чем классический for, если индекс не нужен.

Также for...of работает со строками:

const word = 'JavaScript';

for (const letter of word) {
  console.log(letter);
}

Рекомендация: для перебора массива значений чаще выбирайте for...of. Он короче и снижает риск ошибки с индексами.

for...in: перебор ключей объекта

Цикл for...in предназначен для перебора ключей объекта. Например, есть объект пользователя:

const user = {
  name: 'Анна',
  age: 28,
  city: 'Москва'
};

for (const key in user) {
  console.log(key + ': ' + user[key]);
}

Результат:

name: Анна
age: 28
city: Москва

Важно: for...in перебирает именно ключи, а не значения. Для массивов его обычно не используют, потому что он может проходить не только по индексам, но и по другим перечисляемым свойствам.

const numbers = [10, 20, 30];

for (const index in numbers) {
  console.log(index); // '0', '1', '2'
}

for (const value of numbers) {
  console.log(value); // 10, 20, 30
}

break и continue в циклах

Иногда цикл нужно остановить раньше или пропустить одну итерацию. Для этого есть операторы break и continue.

break полностью завершает цикл:

const numbers = [3, 7, 12, 5, 20];

for (const number of numbers) {
  if (number > 10) {
    console.log('Найдено число больше 10: ' + number);
    break;
  }
}

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

for (let i = 1; i <= 5; i++) {
  if (i === 3) {
    continue;
  }

  console.log(i); // 1, 2, 4, 5
}

Практический пример: фильтрация товаров

Допустим, нужно вывести только товары дешевле 1000 рублей:

const products = [
  { title: 'Клавиатура', price: 1500 },
  { title: 'Мышь', price: 700 },
  { title: 'Коврик', price: 400 },
  { title: 'Монитор', price: 12000 }
];

for (const product of products) {
  if (product.price >= 1000) {
    continue;
  }

  console.log(product.title + ' — ' + product.price + ' руб.');
}

Здесь continue помогает пропустить неподходящие товары и не создавать лишнюю вложенность через else.

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

• Нужен индекс или точное число повторений — используйте for.
• Нужно выполнять код, пока условие истинно — while.
• Нужно выполнить код минимум один раз — do...while.
• Нужно перебрать значения массива или строки — for...of.
• Нужно перебрать ключи объекта — for...in.

Если вы хотите не просто выучить синтаксис, а уверенно писать реальные скрипты, разбирать ошибки и постепенно дойти до продвинутого уровня, посмотрите курс «JavaScript с нуля до уверенной практики» — он хорошо подходит тем, кто хочет системно закрыть базу и двигаться дальше.

Типичные ошибки новичков

• Забыли изменить счётчик — получили бесконечный цикл.
• Используют for...in для массивов — лучше выбрать for...of или классический for.
• Путают условие завершения: например, пишут i <= array.length и выходят за пределы массива.
• Слишком много логики внутри цикла — лучше выносить сложные действия в функции.

Краткий итог

Циклы в JavaScript — базовый инструмент для повторения действий и обработки данных. Начинайте с for и for...of, затем добавляйте while, do...while и for...in по необходимости. Главное правило: выбирайте тот цикл, который делает код понятнее, а не просто короче.