Цикл for: синтаксис, примеры, сравнение с while

1. Зачем нужен цикл for?

Когда в вашей программе нужно повторить какое-то действие много раз, вы используете цикл. Например, если у вас есть массив из 10 элементов, и вы хотите вывести их все на экран, то писать 10 однотипных строк кода — не вариант (даже если вам скучно и вы любите страдать). Для этого придуманы циклы.

Цикл while, с которым вы уже знакомы, отлично подходит для повторения действий, когда условие окончания цикла может быть не очень предсказуемым заранее. Но когда вы точно знаете, сколько раз нужно повторить действие (например, пройтись по всем элементам массива), удобнее использовать цикл for.

Цикл for — это как будильник с таймером: вы заранее устанавливаете, сколько раз он прозвонит, и он сам следит за этим числом. Вам не нужно вручную увеличивать переменную-счётчик где-то отдельно — всё делается в одном месте.

Синтаксис цикла for

Вот как выглядит базовый синтаксис цикла for в JavaScript:

for (начало; условие; шаг) {
    // тело цикла — действия, которые повторяются
}

• начало — объявление и начальное значение переменной-счётчика (обычно let i = 0)
• условие — проверка, при которой цикл продолжается (например, i < 10)
• шаг — изменение переменной-счётчика после каждой итерации (например, i++)

Пример: Вывод чисел от 0 до 4

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

Что произойдёт:

• Сначала создаётся переменная i, которой присваивается значение 0.
• Проверяется условие: если i < 5 — тело цикла выполняется.
• После выполнения тела цикла переменная i увеличивается на 1 (i++).
• Всё повторяется, пока i не станет равно 5. Как только i станет 5, условие i < 5 станет ложным, и цикл завершится.

Результат в консоли:

0
1
2
3
4

2. Как это работает: шаг за шагом

Давайте разберёмся, что происходит на каждом этапе:

1. Инициализация: let i = 0; — переменная-счётчик создаётся и инициализируется.
2. Проверка условия: i < 5; — если условие истинно, выполняется тело цикла.
3. Тело цикла: console.log(i); — выводим текущее значение i.
4. Шаг: i++ — увеличиваем i на единицу.
5. Повтор: Снова проверяем условие и так далее, пока оно истинно.

Можно представить это в виде блок-схемы:

┌─────────────┐
│ let i = 0   │
└─────┬───────┘
      │
      ▼
 ┌───────────────┐
 │ i < 5 ?       │
 └─────┬─────────┘
       │
     Да│
       ▼
┌───────────────┐
│ console.log(i)│
└─────┬─────────┘
      │
      ▼
 ┌─────────────┐
 │   i++       │
 └─────┬───────┘
       │
       └─> (возврат к проверке условия)

Если условие i < 5 ложно — цикл завершается.

3. Практика: Перебор элементов массива с помощью for

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

const users = ["Алиса", "Боб", "Чарли", "Даша"];

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

Что здесь происходит:

• i начинает с 0 (это индекс первого элемента массива).
• Условие: i < users.length — цикл продолжается, пока i меньше длины массива.
• В теле цикла мы получаем имя пользователя по индексу users[i] и выводим его.
• После каждого шага i увеличивается на 1.

Результат:

Алиса
Боб
Чарли
Даша

Важно: Массивы в JavaScript индексируются с нуля! Первый элемент — индекс 0, последний — индекс length - 1.

4. Сравнение с циклом while

Давайте сравним, как выглядит перебор массива с помощью while и с помощью for.

Перебор массива с помощью while

let i = 0;
while (i < users.length) {
    console.log(users[i]);
    i++;
}

Перебор массива с помощью for

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

Вывод:

• Оба варианта работают одинаково.
• В цикле for все элементы управления циклом (инициализация, условие, шаг) находятся в одной строке — это делает код компактнее и легче для понимания.
• В цикле while приходится отдельно объявлять переменную-счётчик и отдельно её увеличивать — больше шансов забыть что-то сделать (например, забыть i++ и получить бесконечный цикл).

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

5. Вариации цикла for

Перебор в обратном порядке

Иногда нужно пройтись по массиву с конца к началу. Легко!

for (let i = users.length - 1; i >= 0; i--) {
    console.log(users[i]);
}

Здесь:

• Начинаем с последнего индекса (users.length - 1)
• Пока i >= 0, выводим элемент и уменьшаем i.

Шаг цикла больше единицы

Можно изменять шаг цикла, например, выводить только чётные индексы:

for (let i = 0; i < users.length; i += 2) {
    console.log(users[i]);
}

6. Вложенные циклы 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(matrix[i][j]);
    }
}

Результат:

1
2
3
4
5
6
7
8
9

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

7. Применение в учебном приложении

Давайте доработаем ваше учебное приложение. Пусть теперь программа выводит всех пользователей с их порядковым номером (начиная с 1):

const users = ["Алиса", "Боб", "Чарли", "Даша"];

for (let i = 0; i < users.length; i++) {
    console.log((i + 1) + ". " + users[i]);
}

Результат:

1. Алиса
2. Боб
3. Чарли
4. Даша

8. Особенности и полезные нюансы

• Область видимости переменной-счётчика:
  Если объявить let i внутри for, переменная i будет доступна только внутри этого цикла. После завершения цикла переменная исчезает (и не путает ваши дальнейшие переменные).
• Можно использовать любое имя переменной-счётчика:
  Не обязательно называть её i. Можно использовать j, k, index, userIndex и так далее. Главное, чтобы было понятно, что она означает.
• Можно не указывать некоторые части for:
  Все три части (начало; условие; шаг) можно не указывать, но это редко бывает полезно.
  Например:

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

  Но такой стиль обычно не рекомендуют — он ухудшает читаемость.

9. Типичные ошибки при работе с циклом for

Ошибка №1: Выход за границы массива.
Очень часто новички пишут условие i <= users.length вместо i < users.length. В результате цикл пытается обратиться к элементу с индексом, которого не существует (например, users[4], если длина массива 4). Это приводит к получению undefined.

Ошибка №2: Забыли увеличить счётчик (i++).
Если забыть про шаг цикла, например, не написать i++, цикл может превратиться в бесконечный и зависнуть. Браузер, конечно, не даст вам сжечь процессор, но впечатления будут незабываемые.

Ошибка №3: Использование одной переменной счётчика в нескольких вложенных циклах.
Если во вложенных циклах использовать одну и ту же переменную (i), внешний цикл может работать неправильно. Лучше использовать разные имена (i, j и т.д.).

Ошибка №4: Использование var вместо let.
Если объявить счётчик через var, он будет виден вне цикла, что может привести к неожиданным ошибкам, особенно во вложенных циклах. Старайтесь использовать let для переменной-счётчика.

Ошибка №5: Бесконечный цикл из-за неверного условия.
Если условие никогда не станет ложным (например, for (let i = 0; i >= 0; i++)), цикл будет бесконечным. Всегда проверяйте, что условие цикла изменится!