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

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

🎯 Что такое тернарный оператор?

Слово «тернарный» означает «трёхчастный» — у этого оператора три части. Это единственный оператор в JavaScript, который принимает три операнда. Поэтому его ещё называют трёхместным оператором.

Синтаксис выглядит так:

условие ? значение_если_true : значение_если_false

Читается как: «если условие истинно — вернуть первое значение, иначе — второе». Знак вопроса ? — это «если», двоеточие : — это «иначе».

let age = 20;
let status;
if (age >= 18) {
  status = "совершеннолетний";
} else {
  status = "несовершеннолетний";
}

let age = 20;
let status = age >= 18
  ? "совершеннолетний"
  : "несовершеннолетний";

// Или в одну строку:
let s = age >= 18 ? "совершеннолетний" : "несовершеннолетний";

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

✅ Когда тернарный — лучший выбор

Тернарный оператор отлично подходит для простых ситуаций «одно из двух»:

let isPremium = true;
let price = 1500;

let finalPrice = isPremium ? price * 0.8 : price;
console.log(finalPrice);  // 1200 (скидка 20%)

// Можно прямо в шаблонной строке
console.log(`Цена: ${isPremium ? price * 0.8 : price} ₽`);

let isLoggedIn = true;
let userName = "Алексей";

let greeting = isLoggedIn
  ? `Привет, ${userName}!`
  : "Войдите в аккаунт";

console.log(greeting);  // "Привет, Алексей!"

let number = 42;
let parity = number % 2 === 0 ? "чётное" : "нечётное";
console.log(`${number} — это ${parity} число`);
// "42 — это чётное число"

let itemsInCart = 3;

let buttonText = itemsInCart > 0
  ? `Корзина (${itemsInCart})`
  : "Корзина пуста";

console.log(buttonText);  // "Корзина (3)"

⚡ Тернарный в функции: красивый return

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

// Было (с if/else)
function isEven(n) {
  if (n % 2 === 0) {
    return "чётное";
  } else {
    return "нечётное";
  }
}

// Стало (с тернарным)
function isEven(n) {
  return n % 2 === 0 ? "чётное" : "нечётное";
}

console.log(isEven(4));   // "чётное"
console.log(isEven(7));   // "нечётное"

// Ещё пример: проверка авторизации
function getAccessLevel(role) {
  return role === "admin" ? "полный доступ" : "ограниченный доступ";
}

console.log(getAccessLevel("admin"));   // "полный доступ"
console.log(getAccessLevel("user"));    // "ограниченный доступ"

🚫 Когда тернарный — плохая идея

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

// Плохо — тернарный для сложных действий
let result = condition
  ? (doSomething(), updateState(), sendRequest())
  : (cleanUp(), logError(), redirect());
// Что это такое?! Никто не поймёт

// Хорошо — использовать if/else для сложной логики
if (condition) {
  doSomething();
  updateState();
  sendRequest();
} else {
  cleanUp();
  logError();
  redirect();
}

// Ужасно — вложенные тернарные (не делайте так!)
let grade = score >= 90 ? "A"
  : score >= 75 ? "B"
  : score >= 60 ? "C"
  : "F";
// Это трудно читать и легко допустить ошибку

// Лучше — if/else if
let grade;
if (score >= 90) grade = "A";
else if (score >= 75) grade = "B";
else if (score >= 60) grade = "C";
else grade = "F";

🌐 Тернарный в современном JavaScript

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

// Классы CSS в зависимости от состояния (React-стиль)
let isActive = true;
let className = `btn ${isActive ? "btn-active" : "btn-inactive"}`;
// "btn btn-active"

// Отображение данных с запасным вариантом
let userData = null;
let displayName = userData ? userData.name : "Загрузка...";
// "Загрузка..."

// Форматирование количества
let count = 1;
let label = `${count} ${count === 1 ? "товар" : "товара"}`;
// "1 товар"

count = 5;
label = `${count} ${count === 1 ? "товар" : "товара"}`;
// "5 товара" — для упрощения (настоящее склонение сложнее)

// Цена со скидкой vs без
let originalPrice = 2000;
let hasDiscount = false;
let displayPrice = hasDiscount
  ? `${originalPrice * 0.8} ₽ (скидка 20%)`
  : `${originalPrice} ₽`;
// "2000 ₽"

✅ Итоги урока

• Тернарный оператор: условие ? значение_если_true : значение_если_false
• Это выражение, которое возвращает значение — можно присвоить, вернуть из функции, вставить в строку
• Идеален для простых «одно из двух» решений в одну строку
• Используйте для: присваивания, return в функции, шаблонных строк, CSS-классов
• Не используйте для: сложной логики, нескольких действий, более двух вариантов (лучше if/else)
• Вложенные тернарные операторы — плохая практика, они снижают читаемость
• Главный принцип: код должен быть понятен другим людям, а не просто кратким