Когда if-else не нужен: знакомство с тернарным оператором и switch в JS

Привет! Я — Александр Дудукало, автор базового курса по JavaScript. Если вы читаете эту статью, значит, вероятно, уже знакомы с одной из основных логических конструкций в JavaScript — if-else. Если нет, рекомендую сначала прочитать предыдущий материал, где я подробно разобрал эту тему.

В этой же статье мы поговорим о других способах управления логикой в коде — тернарном операторе и конструкции switch. Да, звучит сложно и, возможно, пугающе. Но я уверяю, все очень просто. В итоге вы узнаете, когда их стоит использовать и чем они могут быть полезнее привычного if-else. Поехали?

Тернарный оператор

Начнем с простой программы на JavaScript, которая определяет, является ли пользователь совершеннолетним. Все просто: в браузере открывается окно prompt(), пользователь вводит число — и в консоль выводится соответствующее сообщение. Конечно, не забываем преобразовать строку из prompt() в число с помощью функции Number(), ведь для корректного сравнения мы должны работать именно с числами.

Пример кода:

let age = Number(prompt("Введите возраст"));  if (age >= 18) {     console.log("Совершеннолетний!"); } else {     console.log("Несовершеннолетний!"); } 

После запуска в браузере и ввода числа вы получите такой результат:

Ничего необычного — и всего шесть строк кода для такой программы. Не так много, правда? А если я скажу, что есть способ сделать этот скрипт еще короче, всего в две строки?

Такой способ действительно есть — и поможет нам в этом тернарный оператор:

let age = Number(prompt("Введите возраст"));  age >= 18 ? console.log("Совершеннолетний") : console.log("Несовершеннолетний");

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

Тернарный оператор — это условный оператор, который позволяет записать короткую версию конструкции if…else. Он принимает три операнда:

• условие;

• выражение, которое выполнится, если условие истинно;

• и выражение, которое выполнится, если условие ложно.

В коде это выглядит так:

условие ? выражение1 : выражение2;

Обратите внимание на специальные символы «?» и «:», которые разделяют части выражения.

Еще одна особенность тернарного оператора — результат его работы можно сразу присвоить переменной или передать в функцию. Так код станет еще короче:

let age = Number(prompt("Введите возраст"));  console.log(age >= 18 ? "Совершеннолетний" : "Несовершеннолетний");

Код читается хорошо и выглядит еще компактнее.

Давайте закрепим. Если условие перед знаком вопроса истинно (true), то выполнится выражение перед двоеточием, а если оно ложно (false), выполните выражение после двоеточия. Результат будет передан в вывод консоли.

Пример с присвоением в переменную

let age = 20; let status = age >= 18 ? "Совершеннолетний" : "Несовершеннолетний";  console.log(status);

Проверка четности числа

let number = 7;  console.log(number % 2 === 0 ? "Четное" : "Нечетное");

Пример с DOM

// Находим элемент const body = document.querySelector("body");  // Применяем стиль в зависимости от режима body.style.backgroundColor = isDarkMode ? "black" : "white"; body.style.color = isDarkMode ? "white" : "black";

Обязательно попробуйте тернарный оператор в своем проекте. Уверен, это сделает ваш код короче и лаконичнее без ущерба читаемости. А мы идем дальше.

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

Если говорить откровенно, то с помощью конструкции if-else можно решить практически любую задачу с условиями. Вот вы знали, что оператор if есть практически в каждом языке программирования? Это как молоток и отвертка — с ними можно сделать почти все, что требуется дома. Но всегда приятно и удобно, когда есть инструменты для специальных задач.

С if то же самое: есть специальные конструкции, которые удобнее использовать в определенных случаях. Мы уже убедились в этом на примере тернарного оператора. А теперь вы готовы познакомиться с новой конструкцией — switch. Начнем с примера. 

Эта программа предлагает пользователю ввести свою роль (admin, user, guest) на сайте. Да, примитивно — и снова через prompt(). Но для демонстрации этого будет достаточно. После ввода идет ряд проверок и вывод соответствующего сообщения:

let role = prompt("Введите роль (admin, user, guest)");  if (role === "admin") {    console.log("Добро пожаловать, администратор!"); } else if (role === "user") {    console.log("Добро пожаловать, пользователь!"); } else if (role === "guest") {    console.log("Добро пожаловать, гость!"); } else {    console.log("Неизвестная роль. Доступ запрещен."); }

После запуска в браузере и ввода роли вы получите соответствующее сообщение:

В этот раз условия уже сложнее, и строк в скрипте больше. Но можно ли сделать этот код компактнее? Безусловно!

Обратите внимание на однотипность сравнений. В каждом if значение переменной role сравнивается с конкретной строкой. Это популярная задача в программировании, и под нее придумана специальная конструкция — switch.

Сразу покажу пример:

let role = prompt("Введите роль (admin, user, guest)");   switch (role) {    case "admin":        console.log("Добро пожаловать, администратор!");        break;    case "user":        console.log("Добро пожаловать, пользователь!");        break;    case "guest":        console.log("Добро пожаловать, гость!");        break;    default:        console.log("Неизвестная роль. Доступ запрещен.");        break; }

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

Как это работает

1. Сначала switch вычисляет выражение в скобках.

2. Сравнивает его с каждым значением в case.

3. Выполняет код внутри своего case, если значения совпадает с результатом в выражении.

4. Прерывание (break) нужно, чтобы остановить выполнение после найденного совпадения. Без него код продолжит выполняться для следующих case.

5. default — это необязательный блок, который выполнится, если совпадений не было.

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

И для закрепления — пример swith в работе с HTML-элементами в браузере:

// Создаем кнопку и добавляем на страницу let btn = document.createElement("button"); btn.textContent = "Сменить фон"; document.body.append(btn);  // Создаем переменную для хранения текущего цвета фона let background = "black";  // Обработчик клика с использованием switch btn.onclick = function() {  switch (background) {    case "white":      document.body.style.backgroundColor = background;      background = "black";      break;     case "black":      document.body.style.backgroundColor = background;      background = "blue";      break;       case "blue":      document.body.style.backgroundColor = background;      background = "yellow";      break;     default:      document.body.style.backgroundColor = background;      background = "white";      break;  } };

Здесь все максимально просто: в браузере появляется кнопка, и при клике на нее цвет фона сайта переключается по очереди. Экспериментируйте с кодом — это не только интересно, но и помогает лучше понять работу оператора.

Что в итоге

Вы познакомились с тернарным оператором и конструкцией switch — удобными инструментами для управления логикой в JavaScript.

Тернарный оператор помогает писать короткие условия, а switch — удобно использовать для множества вариантов одного значения. Хоть if-else и универсален, теперь вы знаете, как сделать код компактнее и понятнее.

Не бойтесь пробовать — практика сделает вас увереннее! До встречи в следующей статье.