Условные операторы в JavaScript: if, else, else if и тернарный оператор

Введение — зачем нужны условия

Условные операторы дают вашей программе возможность принимать решения: выполнять один набор действий при истинном условии и другой — при ложном. Это базовый инструмент управления потоком в любом языке программирования.

Ключевые термины в одну строку:

• Условие — логическое выражение, возвращающее true или false.
• Ветвление — выбор между двумя и более путями выполнения кода.

Базовый синтаксис: if

В JavaScript простая форма выглядит так:

if (condition) {
  // действия, если condition истинно
}

Если выражение в круглых скобках истинно (true), выполняются инструкции внутри фигурных скобок.

if…else — две ветви

Чтобы обработать оба варианта (и true, и false), используйте else:

if (condition) {
  // действие при true
} else {
  // действие при false
}

Замечание: else не принимает условие — он срабатывает, когда предыдущее условие ложно.

else if — несколько вариантов

Когда нужно проверить несколько условий по порядку, применяют else if:

if (condition1) {
  // действие 1
} else if (condition2) {
  // действие 2
} else if (condition3) {
  // действие 3
} else {
  // действие по умолчанию
}

Можно использовать любое количество веток else if. Условия проверяются сверху вниз — как только одна сработала, остальные игнорируются.

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

Простой пример с выводом в консоль:

var name = "idowu";
if (name == "MUO") {
  console.log("Hello " + name);
} else {
  console.log("Hello everyone");
}
// Output: Hello everyone

Пример с несколькими ветвями, корректно отформатированный:

var names = ["MUO", "Jane", "Idowu"];
if (names[0] === "Jane") {
  console.log("Hello " + names[0]);
} else if (names[0] === "Idowu") {
  console.log("Hello " + names[0]);
} else if (names[0] === "MUO") {
  console.log("Hello " + names[0]);
} else {
  console.log("You didn't get the index");
}
// Output: Hello MUO

Совет: используйте строгое сравнение ===, чтобы избежать неожиданных приведений типов (см. раздел «Важные замечания»).

Тернарный оператор (?:)

Тернарный оператор — компактная альтернатива простому if…else. Общий синтаксис:

var x = condition ? operationOne : operationTwo;

Если condition истинно, выполняется operationOne, иначе — operationTwo. Пример:

var name = "Idowu";
name == "MUO" ? console.log("Hello " + name) : console.log("Hello everyone");
// Output: Hello everyone

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

var temp = 25;
temp < 24 ? console.log("Too cold") : temp == 25 ? console.log("Moderate") : console.log("Extreme");
// Output: Moderate

Важно: избегайте вложенных тернаров в сложной логике — они быстро становятся трудными для поддержки.

Альтернативы и когда их применять

• switch — хорош для множества равенств одного значения (сравнение по значению):

switch (value) {
  case 'a':
    // ...
    break;
  case 'b':
    // ...
    break;
  default:
    // ...
}

• Ранний return — упрощает вложенность: вместо глубокой вложенности if используйте проверки и выходы из функции.

• Объекты-словари/мапы для выбора обработчика по ключу (полезно в функциональном стиле).

Когда условные операторы подводят (контрпримеры)

• Не используйте == для сравнения разных типов — это может приводить к неожиданным результатам (‘’ == 0 → true).
• Тернарный оператор плохо читается при вложении или при длительных выражениях.
• Слишком много ветвлений if/else затрудняют тестирование и поддержку — лучше разделить логику на небольшие функции.

Психология и эвристики выбора

• Правило простоты: если ветвление занимает более трёх уровней, подумайте о рефакторинге.
• Ясность важнее краткости: prefer if/else для сложной логики, тернар для простых присваиваний/вызовов.
• Проверяйте граничные и falsy-значения (0, ‘’, null, undefined, NaN).

Проверка понимания — тестовые примеры

1. Что выведет этот код?

console.log(0 == false);
console.log(0 === false);

Ожидайте: true и false (первое сравнение делает приведение типов).

2. Перепишите вложенные if в ранние return:

function process(x) {
  if (!x) return 'no input';
  if (x === 1) return 'one';
  if (x === 2) return 'two';
  return 'other';
}

Чек-лист для ролей

• Для начинающего:

  • Используйте if/else для ясности.
  • Предпочитайте === вместо ==.
  • Пишите тесты на falsy-значения.

• Для опытного разработчика:

  • Используйте ранние return для уменьшения вложенности.
  • Рассмотрите switch или объект-словарь для большого числа равенств.
  • Избегайте вложенных тернаров.

• Для ревьювера кода:

  • Проверяйте читаемость и тестируемость ветвлений.
  • Следите за использованием ===, а не ==.
  • Оценивайте возможность рефакторинга в отдельные функции.

Важно: строгое сравнение (===) сравнивает и тип, и значение. Это уменьшает ошибки, связанные с неявным приведением типов.

Шпаргалка (cheat sheet)

• if (cond) { … } — базовое ветвление
• if (cond) { … } else { … } — два пути
• if/else if/else — несколько альтернатив
• condition ? a : b — короткий if/else
• switch(value) { case … } — выбор по значению

Критерии приёмки

• Логика корректно обрабатывает все ожидаемые входные значения.
• Код читабелен: нет вложенных тернаров и глубокой вложенности без нужды.
• Используется === для сравнений, если не требуется приведение типов.
• Есть юнит-тесты на граничные/falsy-случаи.

Краткое резюме

Условные операторы — фундаментальный инструмент управления потоком в JavaScript. Для простых решений используйте if/else и тернарный оператор для лаконичных выражений. Для множества равенств рассматривайте switch или объект-словарь. Всегда следите за читаемостью и предсказуемостью: предпочитайте === и избегайте вложенных тернаров.