Условные операторы в JavaScript

Краткое определение

Условный оператор проверяет логическое выражение и выполняет один из нескольких вариантов действий в зависимости от результата.

Как использовать условия в JavaScript

Начинается всё с оператора if.

Синтаксис базового if:

if (condition) {
  // действия, выполняемые при true
}

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

Добавим ветку else — она сработает, когда условие if ложно:

if (condition) {
  // выполняется при true
} else {
  // выполняется при false
}

Важно: else не принимает собственное условие. Оно срабатывает только если предыдущий if оказался false.

Если нужно проверить несколько условий — используйте else if:

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

Вы можете иметь любое количество веток else if.

Пример 1 — простой if/else

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

Вывод: Hello everyone

Пояснение: здесь сравнение строгие (===) — оно учитывает типы. Это помогает избегать неожиданных совпадений при приведении типов.

Пример 2 — несколько проверок

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");
}

Вывод: Hello MUO

Тернарный оператор

Тернарный оператор — краткая форма для простых if/else выражений. Он возвращает одно из двух выражений в зависимости от условия.

Синтаксис:

var x = condition ? expressionIfTrue : expressionIfFalse;

Пример:

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

Вывод: Hello everyone

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

var temperature = 25;
var checkTemperature =
  temperature < 24 ? console.log("Too cold") :
  temperature === 25 ? console.log("Moderate") :
  console.log("Extreme");

// Вывод: Moderate

Важно: вложенные тернарные операторы хорошо подходят для простых, компактных выражений. Для сложной логики лучше использовать if/else или вспомогательные функции.

Лучшие практики и рекомендации

• Используйте === вместо == для предсказуемости сравнения.
• Держите ветки короткими и читаемыми; при необходимости выносите логику в функции.
• Избегайте глубоких вложений — применяйте ранние возвраты (early return) в функциях.
• Для множественных дискретных вариантов используйте switch (иногда) или словари (объекты/Map) для сопоставления ключ → действие.
• Комментируйте лишь нетривиальную логику, а не очевидные ветви.

Важно: читаемость обычно важнее краткости кода.

Когда if/else не лучший выбор

• Большое количество похожих веток: рассмотрите объект-lookup или Map.
• Сложные логические выражения: выделите условие в функцию с говорящим именем.
• Когда нужен декларативный стиль (например, преобразования данных): используйте функциональные методы массива (map/filter/reduce).

Альтернативные подходы (коротко)

• switch — удобен при множестве фиксированных значений.
• Объект-lookup: const actions = { a: fnA, b: fnB }; if (actions[key]) actionskey;
• Полиморфизм: в ООП-решениях замена условных ветвлений методами классов.

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

• if: базовая проверка
• else if: дополнительная проверка
• else: ветка по умолчанию
• Тернарный оператор: condition ? a : b
• Ранний возврат: if (!ready) return;

Факты и подсказки

• Три основных варианта: if, else if, else.
• Тернарный оператор — выражение, а не оператор блока.
• Используйте строгие сравнения (===) в большинстве случаев.

Примеры ошибок и как их найти

• Пропущенная фигурная скобка или лишняя кавычка. Проверяйте синтаксис через линтер (ESLint).
• Неправильное использование == может дать ложные совпадения (‘’ == 0 → true). Предпочитайте ===.
• Вложенные тернарные операторы снижают читаемость — замените на функцию с понятными именами.

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

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

Ментальные модели

• Думайте о каждом условии как о вопросе «Да/Нет». Разделяйте сложные вопросы на простые.
• Для множества вариантов — переключатель по «ключу» (lookup) часто проще, чем длинная цепочка if/else.

Короткий глоссарий

• if: проверка условия и выполнение блока при true.
• else: блок по умолчанию при false.
• else if: промежуточная проверка при нескольких вариантах.
• Тernary: компактная форма if/else, возвращающая значение.

Сравнение if/else и тернарного оператора

• if/else: лучше для сложной логики и побочных эффектов.
• Тernary: хорош для простых выражений и присвоений.

Пример: перевод if/else в объект-lookup

var actionKey = "start";
var actions = {
  start: () => console.log("Start"),
  stop: () => console.log("Stop"),
  pause: () => console.log("Pause")
};
(actions[actionKey] || (() => console.log("Unknown")))();

Рекомендации по отладки

• Используйте console.log с понятным префиксом.
• Подключите линтер и запускайте unit-тесты на граничные условия.
• Пробуйте заменять ветки простыми значениями, чтобы увидеть, где логика ломается.

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

Условные операторы дают полный контроль над потоком выполнения программы. Для простых ветвлений подойдет if/else; для компактных выражений — тернарный оператор; для множества вариантов — lookup или switch. Главное — писать читаемый код и избегать глубокой вложенности.

Важно: выбирайте инструмент под задачу: читаемость и поддерживаемость кода важнее краткости.