Кратко
СкопированоТернарный оператор работает с тремя операндами: одним условием и двумя выражениями. Возвращает первое выражение, если условие истинно и второе, если условие ложно.
Используется как компактная замена условного оператора if.
Пример
Скопировано
const num = 5console.log(num === 5 ? 'Пять' : 'Не пять')// Пять
const num = 5
console.log(num === 5 ? 'Пять' : 'Не пять')
// Пять
Как пишется
Скопировано
(A) ? (B) : (C)
(A) ? (B) : (C)
Где A — условие, B — первое выражение, C — второе выражение.
Если первый операнд A вычисляется в истинное выражение true, то оператор вернёт выражение B. Если в false — вернёт выражение C.
Как понять
СкопированоПо механике работы тернарный оператор похож на инструкцию if, но позволяет писать меньше кода и записывать результат работы сразу в переменную.
В качестве примера преобразуем код, который использует инструкцию if:
const num = 10let resultif (num > 10) { result = 'Число больше 10'} else { result = 'Число меньше или равно 10'}console.log(result)
const num = 10
let result
if (num > 10) {
result = 'Число больше 10'
} else {
result = 'Число меньше или равно 10'
}
console.log(result)
Заменим условную конструкцию тернарным оператором:
const num = 10const result = num > 10 ? 'Число больше 10' : 'Число меньше или равно 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 salutation = function(name) {
return name ? `Рад видеть, ${name}!` : 'Привет, друг!'
}
console.log(salutation('Дока Дог'))
// 'Рад видеть, Дока Дог!'
console.log(salutation())
// 'Привет, друг!'
Вложенные тернарные операторы
СкопированоВнутри одного тернарного оператора можно написать другой:
const num = 10const result = num > 10 ? 'Число больше 10' : num === 10 ? 'Число равно 10' : 'Число меньше 10'console.log(result)// 'Число равно 10'
const num = 10
const result = num > 10 ? 'Число больше 10' :
num === 10 ? 'Число равно 10' : 'Число меньше 10'
console.log(result)
// 'Число равно 10'
В этом случае запись идентична использованию конструкций if. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.
На практике
Скопированосоветует
СкопированоПри выборе между if и тернарным оператором в приоритет нужно ставить читабельность. Код читается чаще, чем пишется, поэтому чем лучше код читается, тем легче его понимать и изменять.
Разберём выбор между тернарным оператором и if на примерах.
Допустим, нужно по-разному поприветствовать нового и уже зарегистрированного пользователя. Здесь удобно использовать тернарный оператор, так как проверка короткая:
function greet(isRegistered, userName) { return isRegistered ? `Привет, ${userName}!` : 'Привет, незнакомец'}
function greet(isRegistered, userName) {
return isRegistered ? `Привет, ${userName}!` : 'Привет, незнакомец'
}
Когда появляются вложенные тернарные операторы, лучше переходить на if. Сравните код с тернарным оператором:
function greet(isRegistered, userName, bePolite) { return isRegistered ? `Привет, ${userName}!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'}
function greet(isRegistered, userName, bePolite) {
return isRegistered ? `Привет, ${userName}!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'
}
И код с if:
function greet(isRegistered, userName, bePolite) { if (isRegistered) { return `Привет, ${userName}!` } else if (bePolite) { return 'Здравствуйте!' } else { return 'Привет, незнакомец' }}
function greet(isRegistered, userName, bePolite) {
if (isRegistered) {
return `Привет, ${userName}!`
} else if (bePolite) {
return 'Здравствуйте!'
} else {
return 'Привет, незнакомец'
}
}
Если же приветствие зависит от роли, то цепочки вложенных тернарных операторов становятся нечитаемыми:
function greet(role) { return result = role === 'admin' ? 'Приветствую, босс' : role === 'moder' ? 'Приветствую, смотритель порядка' : role === 'user' ? 'Здравствуй, пользователь' : role === 'guest' ? 'Здравствуй, гость' : 'Привет, некто'}
function greet(role) {
return result = role === 'admin' ? 'Приветствую, босс' : role === 'moder' ? 'Приветствую, смотритель порядка' : role === 'user' ? 'Здравствуй, пользователь' : role === 'guest' ? 'Здравствуй, гость' : 'Привет, некто'
}
Такой код можно улучшить форматированием, но лучше использовать switch:
function greet(role) { switch (role) { case 'admin': return 'Приветствую, босс' case 'moder': return 'Приветствую, смотритель порядка' case 'user': return 'Здравствуй, пользователь' case 'guest': return 'Здравствуй, гость' default: return 'Привет, некто' }}
function greet(role) {
switch (role) {
case 'admin':
return 'Приветствую, босс'
case 'moder':
return 'Приветствую, смотритель порядка'
case 'user':
return 'Здравствуй, пользователь'
case 'guest':
return 'Здравствуй, гость'
default:
return 'Привет, некто'
}
}
На собеседовании
Скопировано отвечает
СкопированоСуществует три категории операторов, их названия зависят от количества операндов (то, к чему применяется оператор):
- унарные: один операнд
i++- операндi - бинарные: два операнда
a + b- операндыaиb - тернарные: три операнда
is- операндыAdmin ? true : false is,Admin trueиfalse