Скромный оператор switch, он существует почти во всех языках программирования, и javascript не исключение. Оператор switch позволяет упростить организацию кода, когда необходимо выполнить большое количество вычислений. Но с переключателем возникает несколько проблем, которые, я думаю, лучше всего показать на примере.

Проблема

Ниже мы видим стандартный оператор switch, заключенный в функцию. Это утверждение вернет факт о нашей желаемой породе собак (Фан-клуб бордер-колли).

const dogSwitch = (breed) => {
  switch(breed) {
    case("border"):
      return "Border Collies are good boys and girls."
      break;
     case("pitbull"):
      return "Pit Bulls are good boys and girls."
      break;
     case("german"):
      return "German Shepherds are good boys and girls."
      break;
  }
}
dogSwitch("border") // "Border Collies are good boys and girls."

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

1. Нестандартный синтаксис

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

// returns `hi {name}`
const sayHi = (name) => 
  `Hi ${name}!!`
sayHi("Chris") // output: Hi Chris!

Обратите внимание, скобок нет! Честно говоря, этот новый синтаксис поддерживает только возможность возвращать одно значение, но для функционального программирования это лучше всего. К сожалению, использование оператора switch не позволяет нам в полной мере использовать новый синтаксис ES6. (буоооо !! 👻 )

2. Склонность к ошибкам

Операторы switch с их нестандартным синтаксисом трудны для чтения и содержат лишний «синтаксический сахар (нехороший сахар)», который мы действительно не хотим читать.

Когда код становится более трудным для чтения, возрастает вероятность появления ошибок с течением времени по мере масштабирования кода. С помощью оператора switch легко отказаться от простого break, что может привести к выполнению default case. Это можно увидеть ниже.

switch("first") {
  case("first"):
    console.log("First Case")
  default:
    console.log("Default Case")
}

Простая ошибка, которую можно сделать, но ошибку, которую может быть невероятно сложно отладить в очень большом операторе switch.

Решение

Объектные литералы. Вместо использования оператора switch мы можем использовать литерал объекта для репликации функциональности переключателя, уменьшая при этом отрицательные побочные эффекты, присущие оператору switch. Сначала давайте посмотрим на пример.

const dogSwitch = (breed) => ({
  "border": "Border Collies are good boys and girls.",
  "pitbull": "Pit Bulls are good boys and girls.",
  "german": "German Shepherds are good boys and girls."
})[breed]
dogSwitch("border") // "Border Collies are good boys and girls."

и так, что здесь происходит? Мы создали объект JSON, который содержит наши дела как ключевые значения в объекте. Затем мы передаем значение, которое хотим выбрать из нашего объекта. Очень похоже на то, как работает следующий простой пример при выборе из объекта JSON.

const jsonObject = {
  "i1": "item 1",
  "i2": "item 2"
}
jsonObject["i1"] // "Item 1

Первое, что следует отметить в нашем новом переключателе литерала объекта, - это то, что мы удалили {} скобки и, следовательно, удалили return операторы. Это позволяет нам использовать более чистый и функциональный синтаксис ES6. Кроме того, с помощью объектных литералов был удален весь нестандартный «синтаксический сахар», что упростило код и повысило удобочитаемость.

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

Сложный пример

Допустим, например, что вы в настоящее время используете оператор switch для своего магазина Redux. В следующем примере показано, как реализовать хранилище Redux с помощью переключателя литерала объекта.

Я не буду вдаваться в подробности этого кода, так как считаю, что приведенный выше простой пример объясняет, как будет работать это хранилище redux. Просто обратите внимание на отсутствие оператора switch и повышенную читаемость нашего кода.

Заключение

Оператор switch является основным продуктом многих языков программирования, но имеет множество присущих ему проблем, которые могут быть решены путем реализации решения объектного литерала. Это не означает, что оператор switch бесполезен или что объектные литералы всегда являются правильным ответом. Вместо этого литералы объектов в качестве переключателей должны стать еще одним инструментом в вашем арсенале инструментов javascript.

Спасибо! 💚

Спасибо, что нашли время прочитать эту статью! Я ценю и ценю каждую рекомендацию, комментарий (хороший или средний) и подписываюсь! В ближайшем будущем я расскажу о других темах о переписывании основных концепций Javascript с использованием новых стандартов.

Полезное чтение

Ниже приведены некоторые полезные материалы, основанные на не тем, затронутых в этой статье.