Тело цикла, как и тело функции, — это место выполнения инструкций. Значит, внутри него можно использовать всё изученное ранее, например условные конструкции. Так программа повторяет одно действие несколько раз, но на каждом повторе принимает решение.

Пусть нужно пройти числа от 1 до 10 и напечатать только чётные. Цикл перебирает все числа подряд, а условие внутри решает, какие из них попадут на экран:

let number = 1;
while (number <= 10) {
  if (number % 2 === 0) {
    console.log(number);
  }
  number = number + 1;
}

// => 2
// => 4
// => 6
// => 8
// => 10

Счётчик увеличивается после проверки в любом случае. Это важно: если увеличивать number только внутри if, цикл остановится на первом нечётном числе и будет работать бесконечно.

Работа по шагам

Перед первым повтором number равен 1.

Шаг 1. Условие цикла number <= 10 истинно, программа входит в тело. Число 1 нечётное, блок if не выполняется. Затем number увеличивается до 2.

Шаг 2. Условие снова истинно. Число 2 чётное, поэтому печатается 2. Затем number увеличивается до 3.

Дальше цикл проверяет каждое число: нечётные пропускает, чётные выводит. Когда number станет равен 11, условие number <= 10 станет ложным, и цикл завершится.

Условие меняет действие, а не движение

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

Рассмотрим функцию, которая считает, сколько раз буква входит в предложение:

countChars('Fear cuts deeper than swords.', 'e'); // 4
// Если ничего не нашли, результат — 0 совпадений
countChars('Sansa', 'y'); // 0

Реализация:

const countChars = (str, char) => {
  let i = 0;
  let count = 0;
  while (i < str.length) {
    if (str[i] === char) {
      // Считаем только подходящие символы
      count = count + 1;
    }
    // Счётчик увеличивается в любом случае
    i = i + 1;
  }

  return count;
};

Эта задача является агрегирующей. Несмотря на то что она считает не все символы, для подсчёта суммы всё равно приходится анализировать каждый символ. Ключевое отличие от обычной агрегации — наличие условия внутри тела: переменная count увеличивается только тогда, когда текущий символ совпадает с ожидаемым. Условие внутри цикла может проверять что угодно — чётность числа, совпадение символа, длину строки. Главное, чтобы счётчик продолжал меняться и цикл мог завершиться.

Функция из теории учитывает регистр букв. То есть A и a с её точки зрения разные символы. Реализуйте вариант этой же функции, так чтобы регистр букв был не важен:

countChars('HexlEt', 'e'); // 2
countChars('HexlEt', 'E'); // 2