Тернарный оператор ? : в JavaScript

Тернарный оператор ? : (conditional operator) - это компактная форма выбора между двумя значениями по условию. В отличие от if/else, тернарный оператор является выражением, то есть возвращает значение. Это удобно, когда нужно именно “вычислить результат”, а не выполнить набор команд.

Синтаксис

condition ? valueIfTrue : valueIfFalse

Если condition truthy, результатом выражения будет valueIfTrue, иначе - valueIfFalse.

const age = 20;
const access = age >= 18 ? "allowed" : "denied";

console.log(access); // "allowed"

Тернарный оператор как замена простому if/else

Присваивание значения

Один из самых частых случаев - получить строку/число/объект в зависимости от условия.

const score = 75;
const grade = score >= 60 ? "pass" : "fail";

console.log(grade); // "pass"

Эквивалент через if/else:

let grade2;

if (score >= 60) {
  grade2 = "pass";
} else {
  grade2 = "fail";
}

Возврат из функции

function getStatus(isOnline) {
  return isOnline ? "online" : "offline";
}

console.log(getStatus(true)); // "online"

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

const isNew = true;
const label = `Item is ${isNew ? "new" : "used"}`;

console.log(label); // "Item is new"

Когда тернарный оператор подходит лучше всего

Тернарный оператор хорошо читается, когда:

• условие короткое и очевидное;
• выбираются две альтернативы;
• обе ветки возвращают простые значения (строка, число, короткое выражение).

Пример с выбором значения по умолчанию:

const name = "";
const displayName = name.trim() !== "" ? name : "Anonymous";

console.log(displayName); // "Anonymous"

Когда лучше выбрать if/else

if/else часто понятнее, если:

• нужно выполнить несколько действий в каждой ветке;
• в ветках есть побочные эффекты (логирование, вызовы функций, изменение нескольких переменных);
• выражение получается слишком длинным.

Сравнение:

// тернарный оператор - читаемо
const text = isReady ? "ok" : "not ready";

// if/else - читаемо, если действий больше
if (isReady) {
  console.log("start");
  doWork();
} else {
  console.log("skip");
}

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

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

Пример с 3 вариантами:

const temp = 18;

const state =
  temp >= 25 ? "hot" :
  temp >= 15 ? "warm" :
  "cold";

console.log(state); // "warm"

Если вариантов много, обычно лучше использовать if/else if/else или switch.

Приоритет и скобки

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

const a = 10;
const b = 5;

const result = (a > b ? a : b) + 1;
console.log(result); // 11

Без скобок такой код сложнее читать.

Тернарный оператор и truthy/falsy

Условие в тернарном операторе приводит значение к boolean так же, как и if.

const value = "";
const message = value ? "value exists" : "value is empty";

console.log(message); // "value is empty"

Если в условии важна точность, лучше делать явную проверку:

const countStr = "0";
const message2 = Number(countStr) === 0 ? "zero" : "not zero";

console.log(message2); // "zero"

Что стоит запомнить

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