← JavaScript/Конструкция switch#62 из 383← ПредыдущийСледующий →+15 XP
Полезно по теме:Гайд: как учить JavaScriptПрактика: JS базаПрактика: async и сетьТермин: Closure

Конструкция switch

В трекере посылок каждый статус заказа — отдельное состояние с своим текстом и иконкой: "принят", "собирается", "в пути", "доставлен", "возврат". Писать цепочку if/else для 6 вариантов некрасиво — switch делает такой код намного читаемее.

На основе предыдущих уроков

switch решает ту же задачу что и if/else, но лучше читается когда нужно сравнить одну переменную с несколькими конкретными значениями.

Какую проблему решает switch?

Когда у тебя 5+ вариантов значения одной переменной, цепочка if/else выглядит громоздко:

// Многословно с if/else:
if (status === 'pending') return 'Ожидает'
else if (status === 'processing') return 'В работе'
else if (status === 'shipped') return 'Отправлен'
else if (status === 'delivered') return 'Доставлен'
else return 'Неизвестно'

// Читаемо с switch:
switch (status) {
  case 'pending':    return 'Ожидает'
  case 'processing': return 'В работе'
  case 'shipped':    return 'Отправлен'
  case 'delivered':  return 'Доставлен'
  default:           return 'Неизвестно'
}

Синтаксис switch

switch (выражение) {
  case значение1:
    // код
    break          // обязателен!
  case значение2:
    // код
    break
  default:
    // выполнится если ни один case не подошёл
}

Сравнение строгое: switch использует === (тип + значение).

break — почему обязателен

Без break выполнение "проваливается" в следующий case (fall-through):

switch (2) {
  case 1:
    console.log('один')
  case 2:
    console.log('два')    // выполнится
  case 3:
    console.log('три')    // тоже выполнится! — не было break
  default:
    console.log('default') // и это тоже!
}

Группировка cases (намеренный fall-through)

Иногда fall-through используют специально:

switch (dayOfWeek) {
  case 'Суббота':
  case 'Воскресенье':
    return 'Выходной'  // оба дня — одинаковое действие
  case 'Пятница':
    return 'Короткий день'
  default:
    return 'Рабочий день'
}

switch vs if/else — когда что

switch лучше когда:

  • Одна переменная сравнивается с конкретными значениями (статусы, типы, команды)
  • 4+ вариантов

    • if/else лучше когда:

  • Проверяешь диапазоны (score > 80)
  • Сложные составные условия (a && b || c)
  • 1-3 варианта

    • Типичные ошибки

    Ошибка 1: Забыть break — "проваливание"

    switch (role) {
  case 'admin':
    grantAdminAccess()
    // забыли break!
  case 'user':
    grantUserAccess()  // выполнится и для admin — баг!
}
// Правильно: break после каждого case

    Ошибка 2: Сравнивать диапазоны в switch

    // Так не работает:
switch (score) {
  case score >= 90: return 'Отлично'  // всегда false!
}
// Для диапазонов используй if/else

    Ошибка 3: Объявить переменную в case без блока

    switch (action) {
  case 'add':
    const item = 'товар'  // SyntaxError в некоторых средах
    break
  case 'remove':
    const item = 'другой'  // ошибка: item уже объявлен
}
// Правильно: оборачивать case с let/const в блок {}
switch (action) {
  case 'add': {
    const item = 'товар'
    break
  }
}

    В реальных проектах

    switch используется для обработки статусов из API, определения действий в Redux reducer, разбора типов событий, маршрутизации команд. В Redux reducers switch — стандартный паттерн.

    Примеры

    Трекер посылок: статусы заказа и уведомления

    function getOrderStatus(status) {
  switch (status) {
    case 'created':
      return { label: 'Создан', description: 'Ожидает подтверждения магазина' }
    case 'confirmed':
      return { label: 'Подтверждён', description: 'Магазин принял заказ' }
    case 'assembling':
      return { label: 'Собирается', description: 'Готовим к отправке' }
    case 'shipped':
      return { label: 'В пути', description: 'Передан в службу доставки' }
    case 'delivered':
      return { label: 'Доставлен', description: 'Успешно получен' }
    case 'cancelled':
    case 'rejected':
      return { label: 'Отменён', description: 'Заказ не будет доставлен' }
    default:
      return { label: 'Неизвестно', description: 'Статус не определён' }
  }
}

// Тест с разными статусами
const statuses = ['created', 'shipped', 'delivered', 'cancelled', 'unknown']
for (const s of statuses) {
  const { label, description } = getOrderStatus(s)
  console.log(`${s}: ${label} — ${description}`)
}
// created: Создан — Ожидает подтверждения магазина
// shipped: В пути — Передан в службу доставки
// delivered: Доставлен — Успешно получен
// cancelled: Отменён — Заказ не будет доставлен
// unknown: Неизвестно — Статус не определён

    Конструкция switch

    В трекере посылок каждый статус заказа — отдельное состояние с своим текстом и иконкой: "принят", "собирается", "в пути", "доставлен", "возврат". Писать цепочку if/else для 6 вариантов некрасиво — switch делает такой код намного читаемее.

    На основе предыдущих уроков

    switch решает ту же задачу что и if/else, но лучше читается когда нужно сравнить одну переменную с несколькими конкретными значениями.

    Какую проблему решает switch?

    Когда у тебя 5+ вариантов значения одной переменной, цепочка if/else выглядит громоздко:

    // Многословно с if/else:
if (status === 'pending') return 'Ожидает'
else if (status === 'processing') return 'В работе'
else if (status === 'shipped') return 'Отправлен'
else if (status === 'delivered') return 'Доставлен'
else return 'Неизвестно'

// Читаемо с switch:
switch (status) {
  case 'pending':    return 'Ожидает'
  case 'processing': return 'В работе'
  case 'shipped':    return 'Отправлен'
  case 'delivered':  return 'Доставлен'
  default:           return 'Неизвестно'
}

    Синтаксис switch

    switch (выражение) {
  case значение1:
    // код
    break          // обязателен!
  case значение2:
    // код
    break
  default:
    // выполнится если ни один case не подошёл
}

    Сравнение строгое: switch использует === (тип + значение).

    break — почему обязателен

    Без break выполнение "проваливается" в следующий case (fall-through):

    switch (2) {
  case 1:
    console.log('один')
  case 2:
    console.log('два')    // выполнится
  case 3:
    console.log('три')    // тоже выполнится! — не было break
  default:
    console.log('default') // и это тоже!
}

    Группировка cases (намеренный fall-through)

    Иногда fall-through используют специально:

    switch (dayOfWeek) {
  case 'Суббота':
  case 'Воскресенье':
    return 'Выходной'  // оба дня — одинаковое действие
  case 'Пятница':
    return 'Короткий день'
  default:
    return 'Рабочий день'
}

    switch vs if/else — когда что

    switch лучше когда:

  • Одна переменная сравнивается с конкретными значениями (статусы, типы, команды)
  • 4+ вариантов

    • if/else лучше когда:

  • Проверяешь диапазоны (score > 80)
  • Сложные составные условия (a && b || c)
  • 1-3 варианта

    • Типичные ошибки

    Ошибка 1: Забыть break — "проваливание"

    switch (role) {
  case 'admin':
    grantAdminAccess()
    // забыли break!
  case 'user':
    grantUserAccess()  // выполнится и для admin — баг!
}
// Правильно: break после каждого case

    Ошибка 2: Сравнивать диапазоны в switch

    // Так не работает:
switch (score) {
  case score >= 90: return 'Отлично'  // всегда false!
}
// Для диапазонов используй if/else

    Ошибка 3: Объявить переменную в case без блока

    switch (action) {
  case 'add':
    const item = 'товар'  // SyntaxError в некоторых средах
    break
  case 'remove':
    const item = 'другой'  // ошибка: item уже объявлен
}
// Правильно: оборачивать case с let/const в блок {}
switch (action) {
  case 'add': {
    const item = 'товар'
    break
  }
}

    В реальных проектах

    switch используется для обработки статусов из API, определения действий в Redux reducer, разбора типов событий, маршрутизации команд. В Redux reducers switch — стандартный паттерн.

    Примеры

    Трекер посылок: статусы заказа и уведомления

    function getOrderStatus(status) {
  switch (status) {
    case 'created':
      return { label: 'Создан', description: 'Ожидает подтверждения магазина' }
    case 'confirmed':
      return { label: 'Подтверждён', description: 'Магазин принял заказ' }
    case 'assembling':
      return { label: 'Собирается', description: 'Готовим к отправке' }
    case 'shipped':
      return { label: 'В пути', description: 'Передан в службу доставки' }
    case 'delivered':
      return { label: 'Доставлен', description: 'Успешно получен' }
    case 'cancelled':
    case 'rejected':
      return { label: 'Отменён', description: 'Заказ не будет доставлен' }
    default:
      return { label: 'Неизвестно', description: 'Статус не определён' }
  }
}

// Тест с разными статусами
const statuses = ['created', 'shipped', 'delivered', 'cancelled', 'unknown']
for (const s of statuses) {
  const { label, description } = getOrderStatus(s)
  console.log(`${s}: ${label} — ${description}`)
}
// created: Создан — Ожидает подтверждения магазина
// shipped: В пути — Передан в службу доставки
// delivered: Доставлен — Успешно получен
// cancelled: Отменён — Заказ не будет доставлен
// unknown: Неизвестно — Статус не определён

    Задание

    Ты разрабатываешь систему уведомлений для приложения. Функция getNotificationIcon принимает тип уведомления и возвращает эмодзи иконку: "message" — письмо, "like" — сердце, "follow" — человек, "mention" — собачка, "system" и "error" — колокол, всё остальное — точка.

    Подсказка

    switch (type) { case "like": return "heart" }. Для группировки двух case: напиши их один за другим без break между ними

    Загружаем среду выполнения...
    Загружаем AI-помощника...