Любая полезная программа рано или поздно доходит до точки принятия решения. Должна ли эта кнопка отправить форму или показать ошибку? Увидит ли этот пользователь панель администратора или гостевой интерфейс? JavaScript отвечает на эти вопросы с помощью условных операторов. Они являются регуляторами вашего кода: открывают один путь и закрывают другой, основываясь на том, принимает ли выражение значение true или false. Без них ваш скрипт просто выполнялся бы сверху вниз, никак не реагируя на действия пользователя.

Простейшее ветвление: if

Оператор if — это первые ворота, через которые вы проходите. Вы помещаете условие в скобки. Если это условие принимает значение true, выполняется блок кода под ним. Если оно принимает значение false, JavaScript полностью пропускает этот блок и продолжает выполнение файла.

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

const email = document.getElementById("email").value;

if (email === "") {
  alert("Please enter your email.");
}

Нет email — нет отправки. Логика проста и понятна. Используйте if, когда нужно защититься только от одного особого случая и не требуется никаких альтернативных действий.

Обработка выбора «или — или»: if...else

Большинство реальных решений имеют две стороны. Пара if...else покрывает именно это. Один блок выполняется, когда условие истинно, другой — когда оно ложно. Эти два пути взаимоисключающие.

Представьте проверку темной темы при загрузке страницы:

const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;

if (prefersDark) {
  document.body.classList.add("dark");
} else {
  document.body.classList.add("light");
}

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

Множество путей: if...else if...else

Не каждая проблема является бинарной. Иногда вам нужна «лестница» возможностей. Цепочка if...else if...else позволяет последовательно проверять несколько условий. JavaScript оценивает их сверху вниз и выполняет первый блок, условие которого оказалось истинным. После этого совпадения остальная часть цепочки игнорируется.

Классический пример — сопоставление числового балла с буквенной оценкой:

const score = 87;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Порядок здесь имеет огромное значение. Если вы проверите score >= 70 перед score >= 90, почти все проходные баллы попадут в категорию C, потому что первым сработает первое истинное условие. Располагайте условия от наиболее специфичных к менее специфичным и всегда завершайте цепочку финальным else, чтобы обработать всё, что могло проскочить мимо.

Сопоставление фиксированных значений: switch

Когда вы сравниваете одну переменную со списком известных констант, длинная цепочка if...else начинает загромождать код. Оператор switch наводит порядок. Он вычисляется один раз, а затем сравнивается с метками case, используя строгое равенство (===). Это делает код более читаемым, когда варианты дискретны и имеют имена.

Рассмотрим установку часов работы магазина в зависимости от текущего дня:

const day = new Date().getDay();

switch (day) {
  case 0:
    console.log("Sunday hours: 10am - 4pm");
    break;
  case 6:
    console.log("Saturday hours: 9am - 6pm");
    break;
  default:
    console.log("Weekday hours: 8am - 8pm");
}

Будьте осторожны с break. Если вы его пропустите, выполнение «провалится» в следующий case и продолжит работу. Такое поведение иногда полезно, но чаще оно приводит к скрытым ошибкам. При правильном использовании switch делает ваши намерения очевидными с первого взгляда и выстраивает связанные ветки в одну аккуратную колонку.

Компактные решения: тернарный оператор

Тернарный оператор — записываемый как ? : — является выражением, а не инструкцией. Это различие важно