Привет! Я — Александр Дудукало, автор базового курса по 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";

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

Бесплатный базовый курс по JS: «Основы JavaScript: от переменных до функций». Внутри рассказываем, как работать с переменными, типами данных, функциями и многом другом!

Начать изучение →

Конструкции 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 и универсален, теперь вы знаете, как сделать код компактнее и понятнее.

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