Циклы в JavaScript

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Архитектору

Сначала: Циклы в коде — общая идея повторений, виды циклов и типичные ошибки без привязки к синтаксису языка.

Пять циклов — краткая шпаргалка

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

Цикл	Как работает	Типичная задача
`for`	Счётчик — начало, условие, шаг на каждой итерации	"10 раз", индекс `i`, обратный отсчёт
`while`	Проверка условия до тела	"Пока пользователь не ввёл стоп"
`do…while`	Тело минимум один раз, затем проверка	Меню, повторный ввод пароля
`for…in`	Перебор ключей перечисляемых свойств объекта	`{ name, age }` → `name`, `age`
`for…of`	Перебор значений итерируемого	Массив, строка посимвольно, `Map`, `Set`

for удобен, когда заранее известно количество итераций или нужен индекс. for…of — когда нужно пройтись по массиву или строке. for…in предназначен для объектов; для массивов предпочтительнее for…of или методы forEach/map.

Методы массива

В современном коде для списков часто пишут items.forEach(...), items.map(...) вместо ручного цикла — см. методы массива.

Циклы в JavaScript

Что такое цикл?

★ Цикл – многократно повторяемая процедура. Она может быть с известным количеством итераций и с неопределённым (бесконечным). То есть, либо мы знаем, когда начинать, сколько раз повторить, либо повторяем снова и снова, пока что-то не изменится.

Интерактивное демо — пошаговый разбор for и while ниже. Обобщённая база: циклы в коде.

Play ITЗагрузка интерактивного демо…

for

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

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

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Так, это похоже на функцию, где есть три выражения:

начало задаёт начальное состояние цикла. Обычно здесь объявляется и инициализируется счётчик, который выполняется один раз перед началом. В начале можно как объявить переменную, так и использовать существующую;
условие, которое проверяется перед каждой итерацией. Если это условие true (истинно), цикл выполняется, если false – цикл останавливается. Если условие пропустить, цикл будет выполняться бесконечно. Тут можно использовать любые логические выражения (<, >, <=, >= и т.д.);
шаг, который выполняется после каждой итерации и меняет счётчик.

Пример:

for (let i = 0; i < 5; i++) {
    console.log(i); // Выведет 0, 1, 2, 3, 4
  }

Разбор:

Цикл for состоит из трёх частей: инициализация, условие продолжения и шаг после итерации.
let i = 0 выполняется один раз перед стартом цикла и создаёт локальный счётчик.
Условие i < 5 проверяется перед каждой итерацией; при false цикл сразу завершается.
console.log(i) в теле показывает текущее значение счётчика на каждом проходе.
i++ увеличивает i на единицу после выполнения тела, подготавливая следующую проверку.
Итогом становятся значения 0..4, потому что число 5 уже не удовлетворяет условию.
Это базовый шаблон для случаев, когда заранее известно количество повторений.

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Как это работает?

for – ключевое слово, указывающее на начало цикла;
let i = 0 – это начало, создание переменной с именем i и со значением 0;
i < 5 – это условие, и если i < 5 то будет true и тело цикла выполняется;
console.log(i) – это тело цикла, которое выводит в консоль значение переменной i;
i++ - инкремент, когда значение увеличивается на 1;
повторная проверка будет выполняться снова и снова;
если проверка true – цикл запускается снова, и снова выполняется тело.

Шаг — это выражение, которое изменяет значение переменной-счётчика на каждой итерации. Обычно он стоит на третьем месте в заголовке цикла for.

Как можно описать шаг?

Шаг	Описание
`i++`	увеличивает i на 1
`i--`	уменьшает i на 1
`i += 2`	увеличивает i на 2
`i -= 3`	уменьшает i на 3
`i *= 2`	умножает i на 2
`i /= 10`	делит i на 10

++ и -— это инкремент и декремент. Это специальные операторы для увеличения или уменьшения значения на 1. Бывают пост- и пре- операторы:

i++ это постинкремент;
++i это преинкремент;
i-— это постдекремент;
--i это предекремент. Разница между пре- и постформами важна только если результат используется сразу.

Большинство этих операций (++, --, +=, -=, *=, /=) работают с числами , но JavaScript достаточно гибкий, и эти операторы могут работать и с другими типами данных.

Основное использование, конечно, числа, к примеру x+=3.

Со строками работает только +=, оператор работает как конкатенация строк:

let str = 'Привет';
str += ', мир!'; // 'Привет, мир!'

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Но ++, --, -=, *= и т.д. со строками работать не будут корректно , так как JS попытается привести строку к числу, что может привести к NaN.

С объектами и массивами такие операции не имеют смысла. Поэтому грамотно подходите к выбору циклов.

forEach

Для работы с массивами лучше использовать forEach (в других языках он является полноценным циклом, тогда как в JavaScript это просто метод объектов-массивов), который озволяет перебрать все элементы массива , выполнив для каждого элемента заданную функцию (т.н. callback-функцию).

Он удобен и читабелен, особенно когда не нужно управлять индексами вручную, как в классическом for. Синтаксис у него таков:

array.forEach(function(element, index, array) {
  // тело функции
});

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Здесь мы вызываем функцию с параметрами:

element - текущий элемент массива, обязательный;
index - индекс текущего элемента (начинается с 0);
array - сам массив, по которому идёт перебор.

Пример:

const fruits = ['яблоко', 'банан', 'груша'];

fruits.forEach(function(fruit) {
  console.log(fruit);
});

// Вывод:
// яблоко
// банан
// груша

Разбор:

fruits — массив строк, где элементы доступны по индексам, но в примере индексы не нужны.
forEach вызывает переданную функцию один раз для каждого элемента массива в исходном порядке.
Параметр fruit внутри callback получает текущее значение на каждой итерации.
console.log(fruit) выполняет побочный эффект — печать, без формирования нового массива.
Метод forEach всегда возвращает undefined, поэтому его используют для действий, а не преобразований.
Для прерывания перебора break здесь не подходит; при необходимости раннего выхода используют другие методы.
Это хороший выбор, когда задача — просто пройтись по коллекции и выполнить операцию на каждом элементе.

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Функцию можно сделать стрелочной:

const numbers = [1, 2, 3];

numbers.forEach(num => console.log(num * 2));

// Вывод:
// 2
// 4
// 6

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

forEach не мутирует (не изменяет) исходный массив, break здесь не нужен (он его просто не поддерживает), а код будет более читабельным. Так что можно сказать, что в JS есть цикл foreach, но он просто метод для работы с массивами, для перебора элементов.

while

while используется, когда количество итераций неизвестно. Код будет выполняться то тех пор, пока условие true.

let i = 0;

while (i < 5) {
  console.log(i); // Выведет 0, 1, 2, 3, 4
  i++;
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

В данном случае, пока i не будет равным 5, будет выводиться значение i в консоль. Принцип такой же, как и в for, однако он не включает в себя объявление и цикл – всё, что нужно выполнять, выведено в тело цикла, в том числе i++ (инкремент) – "Пока условие истинно, делай вот это".

do...while

do…while отличается от while тем, что тело цикла выполнится хотя бы один раз, даже если условие false.

let i = 0;

do {
  console.log(i); // Выведет 0
  i++;
} while (i < 0); // Условие false, но цикл сработал 1 раз

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Здесь заметно, что цикл начинается с ключевого слова do и заканчивается while. Это значит, что принцип такой – "Сделай вот это. Повторяй, пока условие истинно".

Отличия циклов

★ Таблица отличий циклов

Цикл	Когда использовать	Особенности
`for`	Известно количество итераций или нужен индекс	Инициализация, условие и шаг в одной строке
`while`	Число итераций заранее неизвестно	Проверка до тела; может не выполниться ни разу
`do…while`	Нужен минимум один проход	Проверка после тела
`for…in`	Перебор ключей объекта	Для массивов не рекомендуется
`for…of`	Перебор значений массива, строки, `Map`, `Set`	Не даёт индекс; для индекса — `entries()` или `for`

Операции выполняются в рамках функций, а циклы и условные операторы – части функций, словно инструменты. Каждая функция выполняется в соответствии с её телом. В общем случае JS работает в одном потоке, и долгие операции могут замораживать страницу, поэтому надо разбивать тяжёлые задачи на части. Однако, в ряде случаев, браузер "зависает" именно при ожидании результата выполнения функции. Тут мы подходим к асинхронности.

Цикл for...in

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

const user = {
    name: "Джон",
    age: 30,
    email: "john@example.com"
};

for (let key in user) {
    console.log(key); // "name", "age", "email"
    console.log(user[key]); // "Джон", 30, "john@example.com"
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл for...in работает с любыми объектами:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

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

const animal = {
    eats: true
};

const rabbit = {
    jumps: true,
    __proto__: animal
};

for (let prop in rabbit) {
    console.log(prop); // "jumps", "eats"
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Для проверки принадлежности свойства самому объекту используется метод hasOwnProperty:

for (let prop in rabbit) {
    if (rabbit.hasOwnProperty(prop)) {
        console.log(`Собственное свойство: ${prop}`);
    }
}
// Собственное свойство: jumps

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл for...of

Цикл for...of перебирает итерируемые объекты. Он проходит по значениям, а не по ключам.

const colors = ["red", "green", "blue"];

for (let color of colors) {
    console.log(color); // "red", "green", "blue"
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл работает с массивами, строками и другими итерируемыми объектами:

const text = "JavaScript";

for (let char of text) {
    console.log(char);
}
// J, a, v, a, S, c, r, i, p, t

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл for...of удобен для работы с коллекциями:

const numbers = [1, 2, 3, 4, 5];
let sum = 0;

for (let num of numbers) {
    sum += num;
}

console.log(sum); // 15

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл поддерживает работу с множествами и картами:

Код ITЗагрузка примера кода…

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл for await...of

Цикл for await...of работает с асинхронными итераторами. Он позволяет обрабатывать последовательность промисов.

async function processItems() {
    const items = [
        Promise.resolve(1),
        Promise.resolve(2),
        Promise.resolve(3)
    ];

    for await (let item of items) {
        console.log(item); // 1, 2, 3
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, асинхронным выполнением.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл полезен для последовательной обработки асинхронных операций:

async function fetchUsers() {
    const userIds = [1, 2, 3, 4, 5];

    for await (let id of userIds) {
        const response = await fetch(`/api/users/${id}`);
        const user = await response.json();
        console.log(user.name);
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, асинхронным выполнением.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Цикл работает с асинхронными генераторами:

async function* asyncGenerator() {
    yield Promise.resolve(1);
    yield Promise.resolve(2);
    yield Promise.resolve(3);
}

async function process() {
    for await (let value of asyncGenerator()) {
        console.log(value);
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, асинхронным выполнением.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Управление потоком выполнения

break

Оператор break прекращает выполнение цикла. Выполнение программы продолжается со следующей инструкции после цикла.

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

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Оператор работает во всех видах циклов:

let i = 0;

while (i < 10) {
    if (i === 5) {
        break;
    }
    console.log(i);
    i++;
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Метки позволяют выходить из вложенных циклов:

outerLoop: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            break outerLoop;
        }
        console.log(`i=${i}, j=${j}`);
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

continue

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

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
        continue;
    }
    console.log(i); // 1, 3, 5, 7, 9
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Оператор работает с любыми циклами:

let i = 0;

while (i < 10) {
    i++;
    if (i % 3 === 0) {
        continue;
    }
    console.log(i); // 1, 2, 4, 5, 7, 8, 10
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Метки работают с continue аналогично break:

outer: for (let i = 0; i < 3; i++) {
    for (let j = 0; j < 3; j++) {
        if (j === 1) {
            continue outer;
        }
        console.log(`i=${i}, j=${j}`);
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

return

Оператор return завершает выполнение функции. Он возвращает значение из функции вызывающему коду.

function findValue(array, target) {
    for (let item of array) {
        if (item === target) {
            return item;
        }
    }
    return undefined;
}

const result = findValue([1, 2, 3, 4, 5], 3);
console.log(result); // 3

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Оператор return прекращает выполнение функции немедленно:

function process(data) {
    if (!data) {
        return;
    }
    
    console.log("Обработка данных");
    // Этот код не выполнится, если данные отсутствуют
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

В стрелочных функциях return может быть неявным:

const multiply = (a, b) => a * b;

const square = x => {
    return x * x;
};

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на пошаговом выполнении кода.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

throw

Оператор throw создаёт исключение. Он прерывает нормальное выполнение программы.

function divide(a, b) {
    if (b === 0) {
        throw new Error("Деление на ноль невозможно");
    }
    return a / b;
}

try {
    const result = divide(10, 0);
} catch (error) {
    console.log(error.message); // "Деление на ноль невозможно"
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Оператор работает с различными типами ошибок:

function validateAge(age) {
    if (age < 0) {
        throw new RangeError("Возраст не может быть отрицательным");
    }
    if (typeof age !== "number") {
        throw new TypeError("Возраст должен быть числом");
    }
    return true;
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Исключения можно создавать с собственными классами:

class ValidationError extends Error {
    constructor(message) {
        super(message);
        this.name = "ValidationError";
    }
}

function validateEmail(email) {
    if (!email.includes("@")) {
        throw new ValidationError("Некорректный формат email");
    }
    return true;
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с условной логикой, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

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

Поиск элемента в массиве:

function findUser(users, id) {
    for (let user of users) {
        if (user.id === id) {
            return user;
        }
    }
    throw new Error(`Пользователь с id ${id} не найден`);
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой, созданием объектов.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Фильтрация данных:

function getActiveUsers(users) {
    const result = [];
    
    for (let user of users) {
        if (!user.active) {
            continue;
        }
        result.push(user);
    }
    
    return result;
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Обработка вложенных структур:

function processMatrix(matrix) {
    for (let i = 0; i < matrix.length; i++) {
        for (let j = 0; j < matrix[i].length; j++) {
            if (matrix[i][j] === null) {
                break;
            }
            console.log(matrix[i][j]);
        }
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Асинхронная обработка:

async function processQueue(queue) {
    for await (let task of queue) {
        try {
            await task.execute();
        } catch (error) {
            console.error("Ошибка выполнения задачи:", error);
            continue;
        }
    }
}

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, асинхронным выполнением.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Как выбирать метод массива под задачу

Частая проблема — использовать forEach везде подряд, даже когда нужен новый массив или итоговое значение.

Ориентир по назначению:

map — преобразовать каждый элемент;
filter — отобрать часть элементов;
reduce — свернуть в одно значение;
some / every — проверка условий;
find / findIndex — найти первый подходящий элемент.

const activeNames = users
  .filter((user) => user.active)
  .map((user) => user.name);

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с методами коллекций.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Антипаттерн:

const result = [];
users.forEach((user) => {
  if (user.active) {
    result.push(user.name);
  }
});

Разбор:

Фрагмент показывает рабочий паттерн JavaScript и его структуру от объявления до итогового действия.
Сначала интерпретатор обрабатывает объявления переменных, функций и выражений, формируя контекст выполнения.
Затем код исполняется сверху вниз: каждое выражение использует уже вычисленные значения и обновляет текущее состояние.
Ключевые операторы и методы в примере управляют логикой ветвления, преобразованием данных и вызовами функций.
В примере акцент сделан на работе с циклами и итерациями, условной логикой.
Порядок выполнения важен — сначала инициализация, потом основная обработка, затем получение и вывод результата.
Итог работы блока — конкретный эффект: возвращаемое значение, изменение данных или вывод в консоль.
Такой разбор помогает быстро перенести шаблон в реальный код и избежать ошибок в последовательности шагов.

Оба варианта работают, но первый проще читать и поддерживать.

Полезно рядом:

Циклы в JavaScript

Пять циклов — краткая шпаргалка

Циклы в JavaScript

Что такое цикл?

for

forEach

while

do...while

Отличия циклов

Цикл for...in

Цикл for...of

Цикл for await...of

Управление потоком выполнения

break

continue

return

throw

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

Как выбирать метод массива под задачу

См. также

🗃JS экосистема — Runtime и Frameworks

Основы JavaScript

Что требуется знать перед началом изучения языка программирования JavaScript

Рекомендации по разработке на JavaScript

Работа с HTML в JavaScript

Простые приложения на JavaScript

Форматы JavaScript

История языка JavaScript

Синтаксис и пунктуация в JavaScript

Ключевые слова языка JavaScript

Встроенные функции JavaScript

Структура и подключение JavaScript-кода

Пять циклов — краткая шпаргалка​

Циклы в JavaScript​

Что такое цикл?​

for​

forEach​

while​

do...while​

Отличия циклов​

Цикл for...in​

Цикл for...of​

Цикл for await...of​

Управление потоком выполнения​

break​

continue​

return​

throw​

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

Как выбирать метод массива под задачу​

См. также

🗃JS экосистема — Runtime и Frameworks

Основы JavaScript

Что требуется знать перед началом изучения языка программирования JavaScript

Рекомендации по разработке на JavaScript

Работа с HTML в JavaScript

Простые приложения на JavaScript

Форматы JavaScript

История языка JavaScript

Синтаксис и пунктуация в JavaScript

Ключевые слова языка JavaScript

Встроенные функции JavaScript

Структура и подключение JavaScript-кода

Пять циклов — краткая шпаргалка

Циклы в JavaScript

Что такое цикл?

for

forEach

while

do...while

Отличия циклов

Цикл for...in

Цикл for...of

Цикл for await...of

Управление потоком выполнения

break

continue

return

throw

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

Как выбирать метод массива под задачу