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

Технический фундамент тернарного оператора

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

Важно понимать механику:

сначала вычисляется условие слева от ?;
если условие truthy, вычисляется ветка после ?;
иначе вычисляется ветка после :.

Смотри, что важно: вычисляется только одна из веток (как в if/else), а не обе сразу.

function heavy() {
  console.log('heavy');
  return 1;
}

function light() {
  console.log('light');
  return 2;
}

const result = true ? heavy() : light(); // вызовется только heavy()

function signLabel(n) {
  return n >= 0 ? 'non-negative' : 'negative';
}

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

Когда тернарный оператор действительно полезен

Тернарный оператор помогает компактно выбрать одно из двух значений по условию. Это удобно в присваиваниях, форматировании текста, простых UI-решениях.

Ключевой момент: тернарный оператор - это выражение, которое возвращает значение.

Проверь себя: почему тернарный оператор удобен именно там, где нужен "результат в переменную"?

Синтаксис

condition ? valueIfTrue : valueIfFalse

Пример:

const score = 68;
const status = score >= 70 ? 'passed' : 'retry';

Если условие истинно, берется левая ветка, иначе правая.

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

Сравнение с `if/else`

if/else и тернарный оператор решают похожую задачу, но:

if/else лучше для сложной ветвящейся логики;
тернарный оператор лучше для короткого выбора одного значения.

// удобно
const label = isAuth ? 'Профиль' : 'Войти';

// неудобно (слишком длинно и трудно читать)
const message = isAuth
  ? hasSubscription
    ? isVerified
      ? 'full'
      : 'verify'
    : 'subscribe'
  : 'login';

Здесь часто путаются: вложенные тернарные выражения быстро превращаются в нечитаемый код.

Анти-провал: если тернарник сложнее одной-двух проверок, переходи на if/else.

Мини-сценарий: отображение кнопки

function getButtonText(isLoading, hasError) {
  return isLoading ? 'Загрузка...' : hasError ? 'Повторить' : 'Отправить';
}

Если хочется понять, как это читается движком, можно добавить скобки:

return isLoading ? 'Загрузка...' : (hasError ? 'Повторить' : 'Отправить');

Это уже граничный случай читаемости. Чаще лучше переписать через if/else.

function getButtonTextSafe(isLoading, hasError) {
  if (isLoading) return 'Загрузка...';
  if (hasError) return 'Повторить';
  return 'Отправить';
}

Проверь себя: какой вариант проще поддерживать через месяц?

Тернарник в шаблонных строках

const isPremium = true;
const title = `Тариф: ${isPremium ? 'Premium' : 'Basic'}`;

Это частый UI-паттерн: условный текст прямо в строке.

Смотри, что важно: выражение внутри ${...} должно оставаться коротким и очевидным.

Частые ошибки новичков

Пытаться заменить if/else любой сложности одним тернарным оператором.
Терять читаемость из-за вложенных тернарников.
Путать порядок ? и :.
Использовать тернарник для побочных эффектов вместо возврата значения.

Анти-провал: тернарник должен читаться "с первого взгляда", иначе это сигнал упростить запись.

Что будет, если изменить входные данные

В status = score >= 70 ? 'passed' : 'retry':

70 -> passed;
69 -> retry.

Если score строка '70', результат может быть корректным из-за приведения, но логика станет хрупкой. Лучше нормализовать тип заранее.

Проверь себя: почему явное Number(score) перед тернарником может быть safer?

Краткий итог

Тернарный оператор выбирает одно из двух значений по условию.
Он особенно удобен для кратких присваиваний и шаблонных строк.
Для сложных ветвлений лучше использовать if/else.
Главный критерий использования тернарника - читаемость.
Осознанный выбор между if/else и ?: улучшает качество и поддержку кода.

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