switch: выбор по точному значению

В переменной size – размер одежды: одна из строк 'XS', 'S', 'M'. Для каждого значения нужно вывести свою подпись – три точных значения, три ответа. Через if..else получается цепочка:

sizes-if.jsjs

1const size = 'M';23if (size === 'XS') {4  console.log('очень маленький');5} else if (size === 'S') {6  console.log('маленький');7} else if (size === 'M') {8  console.log('средний');9} else {10  console.log('такого размера нет');11}

Консоль

средний

Работает, но читается тяжело: три раза повторяется переменная, три раза – оператор ===, а различаются ветки только значением в скобках. Когда одно значение нужно сверить с перечнем точных вариантов, в языке есть отдельная конструкция – switch. Вот та же задача в новой записи:

sizes.jsjs

1const size = 'M';23switch (size) {4  case 'XS':5    console.log('очень маленький');6    break;7  case 'S':8    console.log('маленький');9    break;10  case 'M':11    console.log('средний');12    break;13  default:14    console.log('такого размера нет');15}

Консоль

средний

Разберём запись. В круглых скобках после слова switch стоит выражение – здесь это переменная size. В фигурных скобках – тело: ветки case. Каждая начинается строкой вида case 'XS': – слово case, значение, двоеточие, – а ниже идёт код ветки. Работает это так:

Выражение в скобках вычисляется – один раз.
Его результат сравнивается со значением каждого case сверху вниз. Сравнение – строгое ===: без приведения типов.
Нашлось совпадение – выполнение начинается с этой ветки и идёт до break, который завершает switch.
Не совпал ни один case – выполняется ветка default. Если её нет, не срабатывает ни одна ветка: выполнение продолжается с кода после закрывающей скобки switch.

Этот проход по шагам:

switch: сравнение до первого совпадения

const size = 'M';

В size – строка 'M'.

switch (size) {

case 'XS':

console.log('очень маленький');

break;

case 'S':

console.log('маленький');

break;

case 'M':

console.log('средний');

break;

default:

console.log('такого размера нет');

}

В size – строка 'M'.

Выражение в скобках вычислено: 'M'. Его значение сравнивается с каждым case сверху вниз.

'XS' не равно 'M' – идём к следующему case.

'S' тоже не равно – дальше.

Совпадение: выполнение начинается с этой ветки.

Печатаем «средний».

break завершает switch: ветка default уже не рассматривается.

Одно совпадение, один break – в консоли одна строка.

Консоль

Нет вывода в консоль.

break: точка выхода

case задаёт только вход; break останавливает выполнение.

no-break.jsjs

1const size = 'S';23switch (size) {4  case 'XS':5    console.log('очень маленький');6  case 'S':7    console.log('маленький');8  case 'M':9    console.log('средний');10  default:11    console.log('такого размера нет');12}

Консоль

маленький

средний

такого размера нет

Здесь ни в одной ветке нет break – и в консоли три строки вместо одной. case задаёт только точку входа, а не отдельную ветку: выполнение начинается с совпавшего case и без break просто течёт вниз, через все следующие ветки. Это называют проваливанием. Заметьте: case 'M' и default выполнились, хотя значение 'S' с ними не сравнивалось – сравнение закончилось на точке входа.

Поэтому break ставят в конце каждой ветки. В последней он формально не нужен, но его пишут тоже: ветка, дописанная ниже, ничего не сломает.

Без break: проваливание вниз

const size = 'S';

switch (size) {

Теперь в size – 'S', и ни в одной ветке нет break.

case 'XS':

console.log('очень маленький');

case 'S':

console.log('маленький');

case 'M':

console.log('средний');

default:

console.log('такого размера нет');

}

Теперь в size – 'S', и ни в одной ветке нет break.

'XS' не совпал – идём дальше.

Совпадение: входим здесь.

Печатаем «маленький». break нет – выполнение не останавливается.

Выполнение течёт вниз, в ветку case 'M' – значение с ней уже не сравнивается.

Печатаем «средний», хотя size вовсе не 'M'.

Дальше вниз – ветка default: выполнение дошло и до неё без всякого сравнения.

Печатаем и «такого размера нет».

Без break сработали все ветки ниже точки входа – это и есть проваливание.

Когда совпадения нет

default подхватывает несовпавшие значения; сравнение с case строгое – тип важен.

default: ни один не совпал

default.jsjs

1const size = 'XL';23switch (size) {4  case 'XS':5    console.log('очень маленький');6    break;7  case 'S':8    console.log('маленький');9    break;10  case 'M':11    console.log('средний');12    break;13  default:14    console.log('такого размера нет');15}

Консоль

такого размера нет

В переменной size теперь значение 'XL': оно не совпало ни с одним case – выполнилась ветка default. Она подхватывает все значения, которых нет в перечне, и обычно стоит последней: читается как «все остальные случаи». Ветка не обязательна: без default несовпавшее значение просто ничего не запустит, и программа продолжится после switch.

Сравнение строгое: тип важен

typed.jsjs

1// значение из поля ввода – строка2const input = '2';34switch (input) {5  case 1: console.log('первый'); break;6  case 2: console.log('второй'); break;7  default: console.log('вариант не найден');8}

Консоль

вариант не найден

Строка '2' не совпала с числом 2: case сравнивает строго, без приведения типов – сработал default. Тип важен: данные из полей ввода приходят строками, и переводить их в число нужно до сравнения.

В скобках switch при этом может стоять не только переменная, а любое выражение – оно вычислится один раз, и сравниваться будет его результат:

typed-fix.jsjs

1const input = '2';23// выражение: строка переведена в число4switch (Number(input)) {5  case 1: console.log('первый'); break;6  case 2: console.log('второй'); break;7  default: console.log('вариант не найден');8}

Консоль

второй

Группировка case

Несколько точек входа в один код – единственное уместное проваливание.

order-status.jsjs

1const status = 'shipped';23switch (status) {4  case 'paid':5  case 'shipped':6    console.log('заказ в работе');7    break;8  case 'delivered':9    console.log('заказ завершён');10    break;11  default:12    console.log('неизвестный статус');13}

Консоль

заказ в работе

У case 'paid': нет своего тела – выполнение проваливается вниз, до общего кода: «заказ в работе» печатается и для 'paid', и для 'shipped'. Несколько case подряд – несколько точек входа в одну ветку.

Такое проваливание между case намеренное и пустое: между сгруппированными case ничего не пишут.

controls.jsjs

1const key = 'ArrowUp';23switch (key) {4  case 'w':5  case 'ArrowUp':6    console.log('вверх');7    break;8  case 's':9  case 'ArrowDown':10    console.log('вниз');11    break;12}

Консоль

вверх

Одна команда на две клавиши: и буква 'w', и стрелка 'ArrowUp' ведут в общую ветку. default не нужен: прочие клавиши ничего не делают.

if..else или switch: что выбрать

Перечень точных значений – switch; диапазоны и составные условия – if.

Инструменты пересекаются, и выбор между ними – про читаемость. switch уместен в одном сценарии: одна переменная сравнивается с перечнем точных значений – коды, размеры, названия команд. Перечень читается как таблица, и добавить вариант – одна ветка.

if..else – инструмент общего назначения, и он единственный выбор, когда условия – диапазоны (score >= 90), разные переменные или составные проверки с &&: в case такое не записать, он сравнивает только на строгое равенство.

На практике if..else встречается заметно чаще. Если сомневаетесь – начинайте с него, а на switch переходите, когда цепочка else if (x === ...) по одной переменной разрослась.

choose.jsjs

1const lang = 'ru';2// перечень точных значений одной переменной – удобен switch:3switch (lang) {4  case 'ru': console.log('Привет'); break;5  case 'en': console.log('Hello'); break;6  default: console.log('нет перевода');7}89const age = 20;10const hasTicket = true;11// диапазоны и составные условия – только if:12if (age >= 18 && hasTicket) {13  console.log('проходите');14}

Консоль

Привет

проходите

// теперь вы знаете

В скобках switch – любое выражение: оно вычисляется один раз, дальше сравнивается результат
case – точка входа: без break выполнение проваливается вниз по веткам
default подхватывает несовпавшие значения; без него несовпавшее значение просто ничего не запускает
Сравнение с case – строгое ===: строка '2' не совпадёт с числом 2
Несколько case подряд без тела – группировка: несколько входов в общий код
switch – для перечня точных значений; диапазоны и составные условия – if

Проверьте себя

Из switch убрали оба break. Что попадёт в консоль при size = 'M'?

const size = 'M';
switch (size) {
  case 'S':
    console.log('маленький');
  case 'M':
    console.log('средний');
  default:
    console.log('такого размера нет');
}

только «средний»

«средний» и «такого размера нет»

все три строки

ничего

Будни или выходной

В переменной day – номер дня недели от 1 до 7. Выведите одну строку через switch: «выходной» для 6 и 7, «будни» для остальных.

const day = 6;
// switch с группировкой case

1const day = 6;2switch (day) {3  case 6:4  case 7:5    console.log('выходной');6    break;7  default:8    console.log('будни');9}10

Пустое проваливание case 6: в case 7: – тот самый приём группировки: у субботы и воскресенья общий код. break после ветки обязателен, иначе default тоже выполнится.

Что попадёт в консоль?

const value = 1;
switch (value) {
  case '1':
    console.log('совпало');
    break;
  default:
    console.log('не совпало');
}

«совпало»

«не совпало»

и «совпало», и «не совпало»

ничего

Оценка прописью

В переменной mark – школьная оценка, число от 2 до 5. Выведите её название: 5 – «отлично», 4 – «хорошо», 3 – «удовлетворительно», 2 – «неудовлетворительно». Для любого другого числа выведите «нет такой оценки».

const mark = 4;
// switch по числу

1const mark = 4;2switch (mark) {3  case 5:4    console.log('отлично');5    break;6  case 4:7    console.log('хорошо');8    break;9  case 3:10    console.log('удовлетворительно');11    break;12  case 2:13    console.log('неудовлетворительно');14    break;15  default:16    console.log('нет такой оценки');17}18

Сравнение строгое, поэтому числовая оценка требует числовых case – case '4' со строкой не совпал бы. default прикрывает значения вне шкалы.

Этот switch запускают с разными значениями. Соотнесите значение role и строку в консоли.

switch (role) {
  case 'admin':
  case 'owner':
    console.log('полный доступ');
    break;
  case 'viewer':
    console.log('только чтение');
    break;
  default:
    console.log('нет доступа');
}

'admin'

'owner'

'viewer'

'guest'

Почему

'admin'«полный доступ»

'owner'«полный доступ»

'viewer'«только чтение»

'guest'«нет доступа»

'admin' и 'owner' – две точки входа в общую ветку, поэтому вывод у них один. 'guest' в перечне нет – его подхватил default, и вариант «ничего не попадёт» остался без пары.

Сколько дней в месяце

В переменной month – номер месяца от 1 до 12. Выведите количество дней: 31 – для месяцев 1, 3, 5, 7, 8, 10, 12; 30 – для месяцев 4, 6, 9, 11; для февраля (2) выведите «28 или 29».

const month = 4;
// сгруппируйте месяцы с одинаковым числом дней

1const month = 4;2switch (month) {3  case 1:4  case 3:5  case 5:6  case 7:7  case 8:8  case 10:9  case 12:10    console.log(31);11    break;12  case 4:13  case 6:14  case 9:15  case 11:16    console.log(30);17    break;18  case 2:19    console.log('28 или 29');20    break;21}22

Группировка вместо одиннадцати одинаковых веток: все месяцы с 31 днём – точки входа в один console.log, месяцы с 30 – во второй. Без группировки код разросся бы втрое.

Способ доставки

В переменной input – вариант доставки из поля ввода, строка: '1' или '2'. Выведите название: 1 – «самовывоз», 2 – «курьер», любое другое значение – «нет такого варианта». Сравнивайте числа, а не строки.

const input = '2';
// переведите строку в число прямо в скобках switch

1const input = '2';2switch (Number(input)) {3  case 1:4    console.log('самовывоз');5    break;6  case 2:7    console.log('курьер');8    break;9  default:10    console.log('нет такого варианта');11}12

Строка '2' не совпала бы с числовым case 2: сравнение строгое. Number(input) в скобках переводит значение один раз – и весь перечень остаётся числовым.

Предыдущий урокВетвление: if и else Следующий урок Тернарный оператор и приоритеты

← → переключают уроки · не работают при фокусе в полях ввода