Условия

Условные конструкции позволяют выполнять разный код в зависимости от условий: if/else, тернарный оператор, switch.

Зачем нужно

Без условий программа выполняется линейно. Условия позволяют принимать решения: показать/скрыть элемент, валидировать ввод, маршрутизировать запросы.

Где используется

  • Валидация пользовательского ввода
  • Маршрутизация и навигация
  • Управление UI (показ/скрытие)
  • Обработка ответов API
  • Бизнес-логика

Предпосылки

Boolean, Операторы

if / else if / else

const age = 20;

// Простой if
if (age >= 18) {
  console.log('Совершеннолетний');
}

// if...else
if (age >= 18) {
  console.log('Совершеннолетний');
} else {
  console.log('Несовершеннолетний');
}

// if...else if...else
if (age < 13) {
  console.log('Ребёнок');
} else if (age < 18) {
  console.log('Подросток');
} else if (age < 65) {
  console.log('Взрослый');
} else {
  console.log('Пенсионер');
}

// Однострочный if (без фигурных скобок — не рекомендуется)
if (age >= 18) console.log('OK');

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

// условие ? значениеЕслиТру : значениеЕслиФолс
const status = age >= 18 ? 'взрослый' : 'ребёнок';

// Вложенный тернарный (читаемость страдает)
const category = age < 13 ? 'ребёнок'
  : age < 18 ? 'подросток'
  : age < 65 ? 'взрослый'
  : 'пенсионер';

// В JSX/шаблонах — удобно
const greeting = `Привет, ${name || 'гость'}!`;
const display = isVisible ? 'block' : 'none';

switch

const day = 'понедельник';

switch (day) {
  case 'понедельник':
  case 'вторник':
  case 'среда':
  case 'четверг':
  case 'пятница':
    console.log('Рабочий день');
    break;
  case 'суббота':
  case 'воскресенье':
    console.log('Выходной');
    break;
  default:
    console.log('Неизвестный день');
}

// switch использует строгое сравнение (===)
switch (true) { // Трюк: switch с условиями
  case age < 13:
    console.log('Ребёнок');
    break;
  case age < 18:
    console.log('Подросток');
    break;
  default:
    console.log('Взрослый');
}

Без break — «проваливание» (fall-through)

const month = 3;
let season;
switch (month) {
  case 12: case 1: case 2:
    season = 'зима'; break;
  case 3: case 4: case 5:
    season = 'весна'; break;
  case 6: case 7: case 8:
    season = 'лето'; break;
  case 9: case 10: case 11:
    season = 'осень'; break;
}

Паттерны условий

Guard clauses (ранний возврат)

// Плохо: глубокая вложенность
function processUser(user) {
  if (user) {
    if (user.isActive) {
      if (user.hasPermission) {
        // ...основная логика
      }
    }
  }
}

// Хорошо: guard clauses
function processUser(user) {
  if (!user) return;
  if (!user.isActive) return;
  if (!user.hasPermission) return;

  // ...основная логика (без вложенности)
}

Объект вместо switch

// Вместо длинного switch
const statusMessages = {
  200: 'OK',
  201: 'Создано',
  400: 'Плохой запрос',
  401: 'Не авторизован',
  403: 'Запрещено',
  404: 'Не найдено',
  500: 'Ошибка сервера'
};

const message = statusMessages[statusCode] ?? 'Неизвестный статус';

// Для действий
const actions = {
  add: (a, b) => a + b,
  sub: (a, b) => a - b,
  mul: (a, b) => a * b,
  div: (a, b) => a / b,
};

const result = actions[operation]?.(5, 3) ?? 'Неизвестная операция';

Логические операторы как условия

// && для условного выполнения
isLoggedIn && showDashboard;

// || для значений по умолчанию
const name = userName || 'Гость';

// ?? для null/undefined
const count = itemCount ?? 0;

Частые ошибки

1. Забытый break в switch

switch (color) {
  case 'red':
    console.log('Красный');
    // Нет break — провалится в следующий case!
  case 'blue':
    console.log('Синий');
    break;
}
// Для color = 'red' выведет "Красный" И "Синий"

2. Присваивание вместо сравнения

// Ошибка: = вместо ===
if (x = 5) { /* всегда выполнится */ }

// Правильно
if (x === 5) { /* ... */ }

3. Проверка на пустой массив

const arr = ;
if (arr) { /* выполнится!  — truthy */ }

if (arr.length) { /* правильно */ }
if (arr.length === 0) { /* пусто */ }

Практика

  1. Напиши функцию-калькулятор с switch
  2. Перепиши вложенные if/else с guard clauses
  3. Замени switch на объект-маппинг
  4. Напиши функцию определения сезона по номеру месяца

Связанные темы

Ресурсы