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

Что вы узнаете в рамках статьи

• Что такое тернарный оператор и его синтаксис.
• Как применять тернарный оператор в реальных задачах.
• Когда лучше избегать его использования.
• Примеры, тестовые вопросы и типичные ошибки.

Ключевые термины

• Тернарный оператор — оператор, который выполняет одно из двух выражений в зависимости от условия, записанный в одной строке.
• Условное выражение — логическое выражение, возвращающее true или false.
• if...else — классическая конструкция ветвления в JavaScript для выполнения разных блоков кода в зависимости от условия.

Синтаксис тернарного оператора

Тернарный оператор — это компактная форма записи условного выражения. Он всегда состоит из трёх частей (отсюда и название тернарный). Общий шаблон выглядит так:

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

Подробно о каждой части

• условие Это любое выражение, которое возвращает логическое значение (true или false).
  • Если условие истинно (true) — будет выполнено выражение1.
  • Если условие ложно (false) — будет выполнено выражение2. В большинстве случаев в условии используют операторы сравнения (>, <, >=, === и др.), но можно использовать и другие выражения, которые в результате дают логическое значение.
• выражение1 Это результат, который возвращается, если условие оказалось истинным. Оно может быть:
  • значением (числом, строкой, объектом и т.д.),
  • вызовом функции,
  • даже ещё одним тернарным оператором (но лучше избегать, чтобы не запутать код).
• выражение2 Это результат, который возвращается, если условие оказалось ложным. По типу и назначению оно аналогично выражению1.

Базовый пример

const age = 25;
const isAdult = age >= 18 ? 'Совершеннолетний' : 'Несовершеннолетний';
console.log(isAdult); // "Совершеннолетний"

Разбор:

1. Проверяется условие age >= 18.
2. Так как 25 >= 18 — условие истинно (true), выполняется первая ветка: 'Совершеннолетний'.
3. Значение 'Совершеннолетний' присваивается переменной isAdult.

Пример с ложным условием

const age = 15;
const isAdult = age >= 18 ? 'Совершеннолетний' : 'Несовершеннолетний';
console.log(isAdult); // "Несовершеннолетний"

Здесь проверка 15 >= 18 вернёт false, поэтому выполнится вторая ветка — 'Несовершеннолетний'.

Тернарный оператор как альтернатива if...else

С if...else:

let status;
if (isAdmin) {
    status = 'Доступ разрешен';
} else {
    status = 'Доступ запрещен';
}

С тернарным оператором:

const status = isAdmin ? 'Доступ разрешен' : 'Доступ запрещен';

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

Совет: Тернарный оператор всегда возвращает значение, поэтому его можно использовать прямо внутри выражений или при передаче аргументов в функции.

Когда применять тернарный оператор

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

1. Простые условия

Если у вас есть короткая проверка, от которой зависит одно из двух фиксированных значений, тернарный оператор отлично подходит.

Пример:

const isAdmin = true;
const access = isAdmin ? 'Доступ разрешен' : 'Доступ запрещен';
console.log(access); // "Доступ разрешен"

Разбор:

• Условие isAdmin проверяет, является ли пользователь администратором.
• Если значение true — доступ разрешён.
• Если значение false — доступ запрещён.

Почему это удобно: вместо четырёх строк с if...else у нас всего одна строка кода, и смысл её легко понять.

2. Присвоение переменной в зависимости от условия

Иногда нужно записать в переменную результат проверки, не выполняя при этом больших действий.

Пример:

const a = 10;
const b = 5;
const result = a > b ? 'a больше b' : 'b больше или равно a';
console.log(result); // "a больше b"

Разбор:

• Условие a > b проверяет, больше ли a чем b.
• Если true — переменная result получит 'a больше b'.
• Если false — result получит 'b больше или равно a'.

Когда использовать: когда основная цель — просто выбрать одно из двух значений и присвоить его.

Дополнительные примеры, где тернарник удобен

В шаблонных строках

const userName = 'Иван';
const isPremium = false;

console.log(`Здравствуйте, ${isPremium ? 'уважаемый клиент' : userName}!`);
// "Здравствуйте, Иван!"

При передаче аргументов в функции

function sendMessage(message) {
  console.log('Отправка:', message);
}

const isMorning = true;
sendMessage(isMorning ? 'Доброе утро!' : 'Добрый день!');

Для выбора стиля или класса в интерфейсе

const isActive = false;
const buttonClass = isActive ? 'btn-active' : 'btn-disabled';

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

Когда не стоит применять тернарный оператор

Хотя тернарный оператор может сделать код компактным, есть ситуации, в которых его использование ухудшит читаемость и затруднит понимание программы.

1. Сложные условия с множеством проверок

Если в условии задействовано несколько проверок, логических операторов (&&, ||) или длинные выражения, тернарник становится перегруженным.

Проблема:

• Трудно быстро понять логику.
• Ошибки в скобках или операторах сложнее заметить.

Пример плохой практики:

const price = isMember && discount > 0 ? total - discount : total;

На первый взгляд, здесь всё понятно, но если добавить ещё пару условий — читать будет уже тяжело.

2. Вложенные тернарные операторы

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

Плохо:

const status = isOnline ? (isAdmin ? 'Админ онлайн' : 'Пользователь онлайн') : 'Не в сети';

• Здесь приходится держать в голове два условия одновременно.
• Такой код сложно поддерживать и легко сломать при правке.

Почему так лучше не делать

Код пишется один раз, но читается и поддерживается много раз. Если конструкция тернарного оператора занимает больше одной строки и требует вникать в скобки — лучше использовать if...else.

Как переписать для лучшей читаемости

Вариант с if...else:

if (isOnline) {
  status = isAdmin ? 'Админ онлайн' : 'Пользователь онлайн';
} else {
  status = 'Не в сети';
}

• Логика разделена на блоки.
• Нет двойной вложенности тернарников.
• Каждое условие видно и читается отдельно.

Совет

Используйте тернарный оператор только для простых и очевидных проверок. Если при чтении условия вам приходится «считать скобки», значит, пора переписать на if...else.

Наиболее частые ошибки

• Чрезмерная вложенность — тернарник превращается в головоломку.
• Применение для длинных и сложных условий — ухудшает читаемость.
• Использование без скобок в сложных выражениях — может дать неожиданный результат из-за приоритетов операторов.

Наиболее частые вопросы

Вопрос: Можно ли использовать тернарный оператор без второй части (:)?
Ответ: Нет, синтаксис требует обеих веток — что делать при true и при false.

Вопрос: Можно ли присваивать результат тернарного оператора переменной?
Ответ: Да, это один из основных сценариев его применения.

Итоги

Сегодня мы узнали:

• Что такое тернарный оператор и как он сокращает код.
• В каких случаях он полезен, а когда — лучше использовать if...else.
• Как избегать ошибок при работе с ним.

Теперь вы можете быстро и компактно записывать простые условия, не жертвуя читаемостью кода.