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

Кратко

Тернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.

Используется как компактная замена условного оператора if...else.

Пример

const num = 5
console.log(num === 5 ? 'Пять' : 'Не пять')
// Пять

Как пишется 

(A) ? (B) : (C)

Где A — условие, B — первое выражение, C — второе выражение.

Если первый операнд A вычисляется в истинное выражение true, то оператор вернёт выражение B. Если в false — вернёт выражение C.

Как понять Скопировать ссылку "Как понять"

По механике работы тернарный оператор похож на инструкцию if...else, но позволяет писать меньше кода и записывать результат работы сразу в переменную.

В качестве примера преобразуем код, который использует инструкцию if...else:

const num = 10
let result

if (num > 10) {
  result = 'Число больше 10'
} else {
  result = 'Число меньше или равно 10'
}

console.log(result)

Скопировать

Заменим условную конструкцию тернарным оператором:

const num = 10
const result = num > 10 ? 'Число больше 10' : 'Число меньше или равно 10'
console.log(result)

Скопировать

Код сократился и стал устанавливать значение переменной num сразу при объявлении. Это позволило использовать const вместо let.

Тернарный оператор как выражение Скопировать ссылку "Тернарный оператор как выражение"

Тернарный оператор возвращает результат, его можно записать в переменную, как в примере выше, или вернуть с помощью return из функции:

const salutation = function(name) {
  return name ? `Рад видеть, ${name}!` : 'Привет, друг!'
}

console.log(salutation('Дока Дог'))
// 'Рад видеть, Дока Дог!'
console.log(salutation())
// 'Привет, друг!'

Скопировать

Вложенные тернарные операторы Скопировать ссылку "Вложенные тернарные операторы"

Внутри одного тернарного оператора можно написать другой:

const num = 10
const result =  num > 10 ? 'Число больше 10' :
                num === 10 ? 'Число равно 10' : 'Число меньше 10'
console.log(result)
// 'Число равно 10'

Скопировать

В этом случае запись идентична использованию конструкций if...else if ... else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.