Почему тернарный оператор так называется в JavaScript?

Почему тернарный оператор так называется в JavaScript?

Тернарный оператор называется так потому, что это единственный оператор в JavaScript, который принимает ТРИ операнда (переменные или выражения). Слово "тернарный" происходит от латинского "ternarius", что означает "состоящий из трёх частей". В программировании термин "арность" описывает количество операндов.

Что такое арность (Arity)

Арность — это количество операндов, необходимых оператору или функции:

• Унарные операторы (1 операнд):

  !true           // NOT (не)
  -5              // отрицание
  typeof variable // тип переменной
  

• Бинарные операторы (2 операнда):

  5 + 3           // сложение
  a && b          // логическое И
  x === y         // сравнение
  

• Тернарный оператор (3 операнда):

  условие ? значениеЕслиИстина : значениеЕслиЛожь
  age > 18 ? "Взрослый" : "Ребенок"
  

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

// Структура из 3 частей:
условие ? выражение1 : выражение2
  ↑           ↑          ↑
 операнд 1  операнд 2  операнд 3

Полная форма с скобками для наглядности:

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

Три операнда:

1. Условие (слева от ?) — проверяется его truthiness
2. Выражение если истина (между ? и :) — выполняется если условие true
3. Выражение если ложь (после :) — выполняется если условие false

Практические примеры

Простой выбор значения:

const age = 25;
const status = age >= 18 ? "Взрослый" : "Ребенок";
console.log(status); // "Взрослый"

// Каждая часть — отдельный операнд:
// 1. age >= 18
// 2. "Взрослый"
// 3. "Ребенок"

Выбор класса CSS:

const isActive = true;
const className = isActive ? "btn-active" : "btn-inactive";

Условное отображение в React:

function UserProfile({ user }) {
  return (
    <div>
      {user ? (
        <p>Привет, {user.name}!</p>
      ) : (
        <p>Пожалуйста, войдите</p>
      )}
    </div>
  );
}

// Также через тернарный:
const greeting = user ? `Привет, ${user.name}!` : "Пожалуйста, войдите";

Сравнение с другими операторами

Унарный оператор (1 операнд):

const x = 5;
!x              // 1 операнд (x)
typeof x        // 1 операнд (x)

Бинарный оператор (2 операнда):

5 + 3           // 2 операнда (5 и 3)
a && b          // 2 операнда (a и b)
x === y         // 2 операнда (x и y)

Тернарный оператор (3 операнда) — УНИКАЛЕН:

age > 18 ? "Да" : "Нет"
// 3 операнда: (age > 18), "Да", "Нет"

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

const score = 75;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
// 3 тернарных оператора, каждый имеет 3 операнда

// Лучше как if-else:
let grade;
if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else if (score >= 70) {
  grade = "C";
} else {
  grade = "F";
}

Использование в реальных проектах

Классическое использование:

interface ButtonProps {
  disabled?: boolean;
  size?: "small" | "medium" | "large";
}

function Button({ disabled, size }: ButtonProps) {
  // Простой выбор значения
  const cursor = disabled ? "not-allowed" : "pointer";
  const padding = size === "small" ? "8px" : size === "large" ? "16px" : "12px";
  
  return (
    <button 
      disabled={disabled}
      style={{ cursor, padding }}
    >
      Нажми меня
    </button>
  );
}

С логическими выражениями:

const isOnline = user.status === "online";
const icon = isOnline ? "🟢" : "🔴";

const items = data.length > 0 ? data : [];
const message = error ? `Ошибка: ${error}` : "Успешно";

Терминология в программировании

// Унарные операторы
!x          // Унарный NOT
++x         // Унарный инкремент
-x          // Унарное отрицание

// Бинарные операторы
x + y       // Бинарный плюс
x && y      // Бинарное И
x || y      // Бинарное ИЛИ

// Тернарный оператор
x ? y : z   // ТЕРНАРНЫЙ (ЕДИНСТВЕННЫЙ В JAVASCRIPT)

// В других языках:
// Python: x if условие else y
// Java: условие ? x : y (аналогично JavaScript)
// C/C++: условие ? x : y (аналогично JavaScript)

Альтернативы тернарному оператору

Nullish Coalescing (??):

// Тернарный: с проверкой на null/undefined
const value = data !== null && data !== undefined ? data : "default";

// Nullish coalescing: компактнее
const value = data ?? "default";

Optional Chaining (?.):

// Тернарный
const name = user ? user.name : null;

// Optional chaining
const name = user?.name;

Логический И/ИЛИ:

// Тернарный
const result = condition ? execute() : null;

// Логический И
const result = condition && execute();

Лучшие практики

1. Используй для простых условий — выбор между двумя значениями
2. Не вкладывай больше 1-2 уровней — читаемость падает
3. При сложной логике используй if-else — понятнее
4. Типизируй оба пути — TypeScript помогает:

const value: string = condition ? "text" : "default";
// Оба пути дают строку (string)

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