Бесплатный курс по JavaScript. Зарегистрируйтесь для отслеживания прогресса →

JavaScript: Конструкция Switch

Многие языки в дополнение к условной конструкции if включают в себя switch. Это специализированная версия if, созданная для некоторых особых ситуаций. Например, её имеет смысл использовать там, где есть цепочка if else с проверками на равенство. Например:

if (status === 'processing') {
  // Делаем раз
} else if (status === 'paid') {
  // Делаем два
} else if (status === 'new') {
  // Делаем три
} else {
  // Делаем четыре
}

Эта составная проверка обладает одной отличительной чертой: каждая ветка здесь — это проверка значения переменной status. Switch позволяет записать этот код короче и выразительнее:

switch (status) {
  case 'processing': // status === processing
    // Делаем раз
    break;
  case 'paid': // status === paid
    // Делаем два
    break;
  case 'new': // status === new
    // Делаем три
    break;
  default: // else
    // Делаем четыре
}

Свитч — довольно сложная конструкция с точки зрения количества элементов, из которых она состоит:

  • Внешнее описание, в которое входит ключевое слово switch. Переменная, по значениям которой switch будет выбирать поведение. И фигурные скобки для вариантов выбора.
  • Конструкции case и default, внутри которых описывается поведение для разных значений рассматриваемой переменной. Каждый case соответствует if в примере выше. default - это особая ситуация, соответствующая ветке else в условных конструкциях. Как else, указывать default не обязательно (но линтер всегда его просит).
  • break нужен для предотвращения «проваливания». Если его не указать, то после выполнения нужного case выполнение перейдет к следующему case, и так либо до ближайшего break, либо до конца switch.

Фигурные скобки в switch не определяют блок кода, как это было в других местах. Внутри допустим только тот синтаксис, который показан выше. То есть там можно использовать case или default. А вот внутри каждого casedefault) ситуация другая. Здесь можно выполнять любой произвольный код:

switch (count) {
  case 1:
    // Делаем что-то полезное
    break;
  case 2:
    // Делаем что-то полезное
    break;
  default:
    // Что-то делаем
}

Иногда, результат, полученный внутри case, — это конец выполнения функции, содержащей switch. В таком случае его нужно как-то вернуть наружу. Для решения этой задачи есть два способа.

Первый. Создать переменную перед switch, заполнить её в case и затем, в конце, вернуть значение этой переменной наружу.

(count) => {
  // Объявляем переменную
  let result;

  // Заполняем
  switch (count) {
    case 1:
      result = 'one';
      break;
    case 2:
      result = 'two';
      break;
    default:
      result = null;
  }

  // Возвращаем
  return result;
};

Второй способ проще и короче. Вместо создания переменной, case позволяет внутри себя делать обычный возврат из функции. А так как после return никакой код не выполняется, то мы можем избавиться от break:

(count) => {
  switch (count) {
    case 1:
      return 'one';
    case 2:
      return 'two';
    default:
      return null;
  }
};

Switch хоть и встречается в коде, но технически всегда можно обойтись без него. Ключевая польза при его использовании в том, что он лучше выражает намерение программиста, когда нужно проверять конкретные значения переменной. Хотя кода и стало физически чуть больше, читать его легче, в отличие от блоков else if.

Задание

Реализуйте функцию getNumberExplanation(), которая принимает на вход число и возвращает объяснение этого числа. Если для числа нет объяснения, то возвращается null:

getNumberExplanation(8);   // null

// Объяснения есть только для указанных ниже чисел
getNumberExplanation(666); // 'devil number'
getNumberExplanation(42);  // 'answer for everything'
getNumberExplanation(7);   // 'prime number'
Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

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

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе