Условный оператор if в JavaScript и его формы

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

Как работает условие в JavaScript

Любое ветвление начинается с проверки. JavaScript вычисляет выражение в круглых скобках и приводит результат к булеву значению: true или false. Если получилось true, выполняется блок в фигурных скобках, если false — блок пропускается.

Важная особенность языка: в условие можно поставить не только сравнение, но и любое значение. JavaScript сам решит, «истинное» оно или «ложное». Ложными (falsy) считаются всего восемь значений: false, 0, -0, 0n, "" (пустая строка), null, undefined и NaN. Все остальное — истинное (truthy), включая строку "0", пустой массив [] и пустой объект {}.

Эта деталь одновременно удобна и опасна: она позволяет коротко писать проверки, но легко приводит к неожиданному поведению. Разберем ловушки ниже.

Форма if — одна ветка

Простейшее ветвление — if с одной веткой. Блок выполняется, только если условие истинно, иначе управление сразу идет дальше.

let temperature = 30;

if (temperature > 25) {
  console.log("Жарко, включаю кондиционер");
}
// Вывод: Жарко, включаю кондиционер

Если условие ложно, ничего не выводится и программа продолжается со следующей строки. Фигурные скобки можно опустить, когда в ветке ровно одна инструкция, но на практике их лучше всегда ставить: так проще добавить вторую строку и не получить скрытую ошибку.

let age = 16;
if (age < 18) console.log("Доступ ограничен");
// Вывод: Доступ ограничен

Форма if-else — две ветки

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

let num = 7;

if (num % 2 === 0) {
  console.log("Число четное");
} else {
  console.log("Число нечетное");
}
// Вывод: Число нечетное

Оператор % возвращает остаток от деления. Для 7 % 2 остаток равен 1, условие === 0 ложно, поэтому срабатывает ветка else. Поменяйте num на 8 — и выведется «Число четное».

Форма else if — несколько веток

Если вариантов больше двух, ветки выстраивают в цепочку else if. JavaScript проверяет условия сверху вниз и выполняет блок первого истинного условия, а остальные пропускает. Финальный else без условия ловит все оставшиеся случаи.

let score = 82;

if (score >= 90) {
  console.log("Оценка: отлично");
} else if (score >= 75) {
  console.log("Оценка: хорошо");
} else if (score >= 60) {
  console.log("Оценка: удовлетворительно");
} else {
  console.log("Оценка: неудовлетворительно");
}
// Вывод: Оценка: хорошо

Порядок веток важен. Здесь score = 82 проходит первую проверку >= 90 как ложную, а на второй >= 75 останавливается и печатает «хорошо». До третьей ветки выполнение уже не доходит, хотя 82 >= 60 тоже истинно. Правило выбора: более узкие (строгие) условия ставим выше, более общие — ниже.

Тернарный оператор — ветвление как выражение

Тернарный оператор — это сокращенная запись if-else, которая не выполняет блоки, а возвращает значение. У него три операнда, отсюда и название. Синтаксис: условие ? значение_если_истина : значение_если_ложь.

let hour = 20;
let greeting = hour < 12 ? "Доброе утро" : "Добрый день";
console.log(greeting);
// Вывод: Добрый день

Ключевое отличие от if: тернарный оператор — это выражение, поэтому его результат можно сразу присвоить переменной, подставить в строку или вернуть из функции. Обычный if так не умеет — он инструкция, а не значение.

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

switch — выбор по совпадению значения

switch удобен, когда одну переменную сравнивают с набором конкретных значений. Он сопоставляет выражение с каждым case через строгое сравнение (как ===) и выполняет код первого совпавшего варианта.

let day = 3;

switch (day) {
  case 1:
    console.log("Понедельник");
    break;
  case 3:
    console.log("Среда");
    break;
  default:
    console.log("Другой день");
}
// Вывод: Среда

break останавливает switch после найденного варианта. Без него выполнение «проваливается» в следующие case-ы подряд — это частый источник ошибок (разберем ниже). Ветка default необязательна и играет роль else: срабатывает, когда ни один case не подошел.

Когда какую форму выбирать

Типичные ошибки новичков

Ниже три ловушки в формате «неверный код -> что получится -> как исправить».

1. Присваивание = вместо сравнения ===. Один знак равенства не сравнивает, а присваивает значение и возвращает его.

let x = 5;
if (x = 0) {
  console.log("Ноль");
} else {
  console.log("Не ноль");
}
// Вывод: Не ноль

Условие x = 0 присвоило переменной ноль и вернуло 0 — это falsy, поэтому сработала ветка else, хотя логика ожидалась обратной. Исправление — строгое сравнение:

let x = 5;
if (x === 0) {
  console.log("Ноль");
} else {
  console.log("Не ноль");
}
// Вывод: Не ноль

2. Нестрогое == и приведение типов. Двойное равно сравнивает с приведением типов, из-за чего разные значения кажутся равными.

if (0 == "") {
  console.log("Равны");
} else {
  console.log("Не равны");
}
// Вывод: Равны

Число 0 и пустая строка формально «равны» при нестрогом сравнении. Чтобы избежать сюрпризов, почти всегда используют строгое ===, которое сравнивает и значение, и тип:

if (0 === "") {
  console.log("Равны");
} else {
  console.log("Не равны");
}
// Вывод: Не равны

3. Проверка «пустоты» через truthy. Кажется логичным проверить значение напрямую, но строка "0" и пустой массив ведут себя неожиданно.

let items = [];
if (items) {
  console.log("Есть элементы");
} else {
  console.log("Пусто");
}
// Вывод: Есть элементы

Пустой массив — это объект, а объект всегда truthy, поэтому ветка «Пусто» не сработала. Проверять нужно то, что действительно важно, — в данном случае длину:

let items = [];
if (items.length > 0) {
  console.log("Есть элементы");
} else {
  console.log("Пусто");
}
// Вывод: Пусто

Выводы

• Условный оператор выполняет разные ветки кода в зависимости от того, истинно условие или ложно; базовая форма в JavaScript — if.
• Формы наращиваются по сложности: if (одна ветка), if-else (две), else if (несколько), а для выбора значения есть тернарный оператор.
• Тернарный оператор возвращает значение и подходит для короткого выбора из двух вариантов; для трех и более веток читаемее else if или switch.
• switch сравнивает переменную с набором конкретных значений через строгое сравнение; забытый break приводит к «проваливанию» в соседние case-ы.
• Главные ловушки: = вместо ===, нестрогое == с приведением типов и опора на truthy/falsy вместо явной проверки (length, сравнение с конкретным значением).
• По умолчанию используйте строгое сравнение === — оно избавляет от большинства неожиданных приведений типов.

Где применяется / связь с практикой

Ветвления — это фундамент любой логики: валидация форм, реакция на клик, выбор ответа сервера, роутинг, доступ по ролям. Без уверенного владения if, тернарным оператором и switch не обходится ни фронтенд, ни бэкенд на Node.js, поэтому эту тему разбирают в первых модулях обучения JavaScript.

Смежные темы: JavaScript и условные операторы, Switch в JavaScript и ветвления, JavaScript: описание, особенности, области применения.

FAQ

Можно ли писать if без фигурных скобок?
Да, если в ветке ровно одна инструкция, скобки допустимо опустить. Но их лучше ставить всегда: при добавлении второй строки без скобок она выполнится вне условия, и появится трудноуловимая ошибка.

Чем switch отличается от цепочки else if?
switch сравнивает одну переменную с конкретными значениями через строгое сравнение, а else if проверяет произвольные условия, включая диапазоны (score >= 75). Для диапазонов и сложных проверок берут else if, для набора фиксированных значений — switch.

Что вернет тернарный оператор, если пропустить одну из веток?
Синтаксис требует обе ветви — и до :, и после. Пропуск ветки вызовет синтаксическую ошибку (SyntaxError). Если одна из веток не нужна, это признак, что уместнее обычный if.