Learn JavaScript

switch в JavaScript: когда он удобнее if

switch - конструкция для выбора ветки кода в зависимости от значения. Она особенно удобна, когда есть одно значение и много вариантов, которые нужно обработать. В таких случаях switch часто читается проще, чем длинная цепочка if/else if/else.

Базовый синтаксис

switch (expression) {
  case value1:
    // действия
    break;
  case value2:
    // действия
    break;
  default:
    // действия по умолчанию
}
  • expression вычисляется один раз
  • затем значение сравнивается с каждым case
  • сравнение выполняется по строгому равенству ===
  • break завершает switch, чтобы выполнение не “провалилось” в следующий case
  • default выполняется, если ни один case не подошел

Пример: несколько вариантов для одного значения

const status = "success";
let message;

switch (status) {
  case "success":
    message = "Done";
    break;
  case "loading":
    message = "Loading...";
    break;
  case "error":
    message = "Error";
    break;
  default:
    message = "Unknown status";
}

console.log(message); // "Done"

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

Почему switch сравнивает через ===

case использует строгое сравнение, поэтому тип тоже важен.

switch (5) {
  case "5":
    console.log("string");
    break;
  case 5:
    console.log("number"); // выполнится
    break;
}

Это плюс: меньше неожиданных совпадений, которые могут возникать с ==.

break и fall-through (проваливание)

Если break отсутствует, выполнение продолжится в следующем case - даже если он не совпал. Иногда это ошибка, иногда - полезный прием.

Частая ошибка: забыли break

const role = "user";

switch (role) {
  case "admin":
    console.log("full access");
  case "user":
    console.log("limited access"); // выполнится
    break;
  default:
    console.log("guest");
}

Здесь при role === "admin" выведутся обе строки, потому что нет break после "admin".

Полезный fall-through: несколько кейсов с одной логикой

const code = 404;
let text;

switch (code) {
  case 400:
  case 401:
  case 403:
  case 404:
    text = "Client error";
    break;
  case 500:
  case 502:
  case 503:
    text = "Server error";
    break;
  default:
    text = "Other";
}

console.log(text); // "Client error"

Когда switch удобнее if

switch обычно выигрывает по читаемости, когда:

  • сравнение идет с одним значением;
  • вариантов много (5+), и они однотипные;
  • логика в кейсах короткая и похожая по структуре.

Пример: выбор действия по команде.

const command = "start";
let action;

switch (command) {
  case "start":
    action = "run";
    break;
  case "stop":
    action = "halt";
    break;
  case "pause":
    action = "wait";
    break;
  default:
    action = "unknown";
}

console.log(action);

Когда if/else лучше

if/else обычно лучше, если:

  • условия не про одно значение, а про диапазоны или сложные выражения;
  • есть проверки типа x > 10, a && b, value !== null;
  • есть независимые проверки, которые не образуют “одно значение - много вариантов”.

Пример с диапазонами:

const score = 72;
let grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 75) {
  grade = "B";
} else if (score >= 60) {
  grade = "C";
} else {
  grade = "D";
}

console.log(grade); // "C"

Такую логику через switch читать сложнее.

Паттерн switch(true)

Иногда встречается прием switch (true), чтобы использовать case как условия. Для начинающего кода он обычно менее очевиден, поэтому чаще лучше оставить if/else.

const value = 7;

switch (true) {
  case value > 10:
    console.log("big");
    break;
  case value > 5:
    console.log("medium"); // выполнится
    break;
  default:
    console.log("small");
}

Что стоит запомнить

  • switch удобен для “одно значение - много вариантов”.
  • case сравнивает через ===, тип важен.
  • break обычно обязателен, иначе будет fall-through.
  • Fall-through полезен для группировки кейсов, но без явного намерения чаще приводит к ошибкам.
  • Для сложных условий и диапазонов if/else обычно читается лучше.