Условные операторы в JavaScript: if, switch, тернарный

Синтаксис конструкции выглядит следующим образом:

if (условие) {
    // Код, выполняемый, если условие истинно (true)
} else {
    // Код, выполняемый, если условие ложно (false). Этот блок необязателен.
}

Работа оператора проста: выражение в круглых скобках вычисляется и преобразуется в логическое значение (Boolean). Если результат — true, выполняется блок кода после if. Если false и присутствует блок else — выполняется он.

let userAge = 20;
let accessMessage;

if (userAge >= 18) {
    accessMessage = "Доступ разрешен. Добро пожаловать!";
} else {
    accessMessage = "Извините, доступ запрещен для лиц младше 18 лет.";
}
console.log(accessMessage);

let isOnline = false;
// ОШИБКА: вместо проверки происходит присваивание значения true переменной
if (isOnline = true) {
    console.log("Пользователь онлайн");
}
// Всегда будет выводить "Пользователь онлайн", даже если isOnline изначально был false

Всегда используйте операторы сравнения для проверки условий.

Цепочка else if проверяется сверху вниз. Как только находится первое истинное условие, выполняется соответствующий ему блок кода, а все последующие проверки игнорируются. Это делает код эффективнее нескольких отдельных операторов if.

let cartTotal = 8500; // Сумма покупки
let discount = 0;

if (cartTotal >= 10000) {
    discount = 15;
    console.log(`Ваша скидка: ${discount}%`);
} else if (cartTotal >= 5000) {
    discount = 10;
    console.log(`Ваша скидка: ${discount}%`);
} else if (cartTotal >= 2000) {
    discount = 5;
    console.log(`Ваша скидка: ${discount}%`);
} else {
    console.log("Скидка не предоставляется. Добавьте товаров в корзину!");
}

Такой подход делает код чище и легче для восприятия, чем вложенные или отдельные блоки if.

условие ? выражение_если_истина : выражение_если_ложь;

Его можно «прочитать» так: если условие верно, возвращается результат первого выражения, иначе — второго.

let isMember = true;
let shippingCost = isMember ? 0 : 10; // 0, если isMember = true, иначе 10
console.log(`Стоимость доставки: ${shippingCost} руб.`);

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

let batteryLevel = 15;
batteryLevel <= 20
    ? console.log("Заряд батареи критически низкий!")
    : console.log("Уровень заряда в норме.");

Важно помнить: для сложных условий с множеством ветвлений лучше использовать if...else или switch, так как тернарный оператор может сильно снизить читаемость кода.

switch (выражение) {
    case значение1:
        // Код для значение1
        break;
    case значение2:
        // Код для значение2
        break;
    // ...
    default:
        // Код, если не подошло ни одно значение
}

Ключевое слово break в конце каждого блока case критически важно. Оно прерывает выполнение switch, не позволяя коду «провалиться» в следующий case. Если break отсутствует, выполнение продолжится со следующего case, что иногда используется намеренно для группировки действий.

let orderStatus = "shipped";

switch (orderStatus) {
    case "new":
        console.log("Заказ оформлен, ожидает обработки.");
        break;
    case "processing":
        console.log("Заказ собран и готовится к отправке.");
        break;
    case "shipped":
        console.log("Заказ передан в службу доставки.");
        break;
    case "delivered":
        console.log("Заказ доставлен получателю.");
        break;
    default:
        console.log("Статус заказа неизвестен.");
}
// Выведет: "Заказ передан в службу доставки."

Группировка case и блок default

Оператор switch позволяет группировать несколько case для выполнения одного блока кода, а также содержит специальный блок default.

1. Группировка case: удобна, когда для разных значений нужно выполнить одинаковые действия.
2. Блок default: выполняется, если ни один case не совпал. Это аналог блока else в конструкции if. Хотя его можно расположить в любом месте switch, рекомендуется ставить в конец для лучшей читаемости.

let userRole = "moderator";

switch (userRole) {
    case "admin":
        console.log("Полный доступ к админ-панели.");
        break;
    case "editor":
    case "moderator": // Группировка: для "editor" и "moderator" выполнится один код
        console.log("Доступ к редактированию контента.");
        break;
    case "user":
        console.log("Доступ к личному кабинету.");
        break;
    default:
        console.log("Роль не определена. Доступ запрещен.");
}
// Выведет: "Доступ к редактированию контента."

Условные операторы — это мощный инструмент в арсенале JavaScript-разработчика. Правильное их использование делает код логичным, эффективным и простым в поддержке.

Готовы применять условные операторы на практике? Наш онлайн-курс «Обучение JavaScript с нуля до профи» поможет освоить язык системно — от основ до сложных тем. Для тех, кому нужен готовый результат, наша веб-студия создаст современный и эффективный сайт с продуманной логикой. Начните развиваться или получите готовое решение уже сегодня!