Циклы являются мощным инструментом для повторения определенного кода и автоматизации задач. Циклы обеспечивают эффективное управление потоком выполнения программы и позволяют обрабатывать большие объемы данных. В этой статье мы исследуем два наиболее распространенных цикла в JavaScript - for и while, и изучим их особенности и использование в различных сценариях программирования.

Цикл for

Синтаксис цикла for состоит из объявления инструкции for, после которой идут три необязательных выражения, заключенные в скобки и разделенные точкой с запятой: инициализация переменной, которая выступает в качестве счетчика, условие завершения работы цикла, прерывающее его выполнение когда выражение возвращает false и финальное выражение, которое изменяет переменную (счетчик) после выполнения инструкции, после которых в фигурных скобках записывается инструкция, выполняемая на каждой итерации цикла.

for (
  let i = 0; //i - счетчик, который изначально равен 0
  i < 10; //i < 10 - условие, которое вернет false и остановит цикл, когда i будет равно 10
  i++ //i++ - финальное выражение после каждой итерации увеличивает i на единицу
) {
  console.log(i);
  //код, выполняемый при каждой итерации, который имеет доступ к счетчику
}
//в консоль будут выведены числа от 0 до 9 по одному на каждую итерацию цикла

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

let i = 0;
//используем в цикле уже существующую переменную
for (;i < 10;)
//пропускаем два выражения,
//но все равно ставим точки с запятой
//воизбежание синтаксической ошибки
{  console.log(i);
  i++;
  //финальное выражение переносим в блок кода
}
//в результате в консоли так же появятся 
//цифры от 0 до 9

Условие завершения цикла так же можно перенести в блок кода, но для остановки выполнения придется воспользоваться директивой \`break\`. Она позволяет остановить цикл в нужный момент и перейти к исполнению следующего участка кода. Кроме нее внутри блока можно использовать директиву \`continue\`, которая не прекращает выполнение цикла, но пропускает весь код в блоке.

let i = 0;
for (;;) //пропускаем все 3 выражения
{
  i++;
  //перенесем финальное выражение выше
  //что бы оно не было пропущено из-за
  //директивы continue
  if (i === 3) continue;
  //если i равно 3 код не выполняется,
  //но цикл не заввершается
  if (i === 5) break;
  //если i равно 5 код не выполняется
  //и цикл заввершается
  console.log(i);
}
//в консоль будут выведены цифры: 1, 2, 4
//3 будет пропущена из-за директивы continue
//5 и выше - из-за директивы break

Пропущен может быть и блок кода внутри цикла, если нам нужно просто провести некоторые манипуляции с переменной и изменять ее по условию, указанному в выражениях цикла, но это используется редко.

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

let i = 0;
for (;;)
//условие завершения цикла не указано
//ни в выражениях 
{
  console.log(i);
  i++;
  //ни в блоке кода
}
//такой цикл будет бесконечным

При выборе способа итерации в пользу цикла for следует помнить, что массивоподобные типы данных и объекты имеют свои циклы (\`for…in\` и \`for…of\`), а так же методы, лучше оптимизированы для перебора таких структур данных и справятся этой задачей быстрее и эффективнее. Кроме того стоит помнить о том что из-за схожести синтаксиса разных циклов следует следить за заключением логических выражений в скобки. Так, например, при определении переменной счетчика по условию с оператором in можно получить ошибку, если не заключить это условие в скобки.

const myObl = { counter: 1 };
for(let i = "counter" in myObl ? myObl.counter : 0 ; i < 10; i++)
//передаем переменной i значение из свойства counter, 
//если оно есть в объекте myObj
{
    //какой-то блок кода
}
//Получим ошибку:
//for-in loop variable declaration may not have an initializer.
for(let i = ("counter" in myObl) ? myObl.counter : 0 ; i < 10; i++)
//делаем то же самое, но с правильной группирорвкой выражений
{
    //какой-то блок кода
}
//такой цикл будет работать как ожидается

Цикл while

Синтаксис цикла for, при указании только условия без инициализации переменной и финального выражения (`for(;условие;){}`) вполне обоснованно может показаться странным и сложночитаемым. Это связано с тем, что для подобных случаев, когда нужно указать только условие, существует отдельный цикл - while. Его синтаксис, как вы уже могли догадаться, состоит из объявления цикла, условия в скобках и блока кода, который исполняется по условию. В остальном его поведение очень похоже на for. В цикле while так же поддерживаются инструкции `break` и `continue`, а при задании условия так же стоит быть осторожным и учитывать возможность создания бесконечного цикла.

let i = 0;
while (i < 10) {
  i++;
  console.log(i);
} //обычный цикл, который завершится по условию
while (i > 10) {
  i++;
  console.log(i);
} //здесь условие указано неверно и цикл будет бесконечным
while (i > 10) {
  i++;
  if (i === 5) continue;
  if (i === 10) break;
  console.log(i);
} //но это можно исправить проверками внутри блока кода

Ключевым отличием цикла while является возможность создания конструкции \`do…while\` в которой порядок работы цикла изменяется на обратный и сначала выполняется блок кода, а уже потом проверяется условие. Это полезно, когда нужно что бы код отработал хотя бы один раз.

let i;
//у нас есть переменная, значение которой не определено
while (i < 10) 
  //проверка undefined < 10 вернет false и цикл прекратит выполнение
  {if (!i) i = 0;
  //это часть кода не исполнится и при undefined в i 
  //переменная не получит новое значение
  console.log(i);
  i++}
do {
  if (!i) i = 0;
  //здесь мы сначала проверяем i на определенность значения
  console.log(i);
  i++;
} while (i < 10);
//и уже после этого запускаем цикл

Заключение

Циклы for и while являются неотъемлемой частью JavaScript и отличными инструментами для повторения кода и обработки данных. В статье мы рассмотрели синтаксис и использование каждого из этих циклов, а также сравнили их преимущества и недостатки. Подходящий выбор типа цикла зависит от конкретного сценария программирования. При правильном использовании циклов и следовании лучшим практикам, разработчики могут сделать свои программы более эффективными и улучшить производительность. Надеюсь, эта статья помогла вам лучше понять использование циклов for и while в JavaScript и научиться применять их в ваших проектах.