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

Объясняем, что такое тернарный оператор и когда стоит использовать его вместо if

Время чтения: меньше 5 мин

Кратко

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

Используется как компактная замена условного оператора 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...else, но позволяет писать меньше кода и записывать результат работы сразу в переменную.

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

        
          
          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...else if ... else. Сначала проверяется первое условие, если оно ложно, то проверяется второе и так далее. Отступы в примере проставлены для лучшей читаемости конструкции, они не влияют на выполнение кода.

На практике

gingerraccoon

При выборе между if...else и тернарным оператором в приоритет нужно ставить читабельность. Код читается чаще, чем пишется, поэтому чем лучше код читается, тем легче его понимать и изменять.

Разберём выбор между тернарным оператором и if...else на примерах.

Допустим, нужно по-разному поприветствовать нового и уже зарегистрированного пользователя. Здесь удобно использовать тернарный оператор, так как проверка короткая:

        
          
          const greetings = function(isRegistered, userName) {  return isRegistered ? `Привет, ${userName}!` : 'Привет, незнакомец'}
          const greetings = function(isRegistered, userName) {
  return isRegistered ? `Привет, ${userName}!` : 'Привет, незнакомец'
}

Когда появляются вложенные тернарные операторы, лучше переходить на if...else. Сравните код с тернарным оператором:

        
          
          const greetings = function(isRegistered, userName, bePolite) {  return isRegistered ? `Привет, ${userName}!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'}
          const greetings = function(isRegistered, userName, bePolite) {
  return isRegistered ? `Привет, ${userName}!` : bePolite ? 'Здравствуйте!' : 'Привет, незнакомец'
}

И код с if...else:

        
          
          const greetings = function(isRegistered, userName, bePolite) {  if (isRegistered) {    return `Привет, ${userName}!`  } else if (bePolite) {    return 'Здравствуйте!'  } else {    return 'Привет, незнакомец'  }}
          const greetings = function(isRegistered, userName, bePolite) {
  if (isRegistered) {
    return `Привет, ${userName}!`
  } else if (bePolite) {
    return 'Здравствуйте!'
  } else {
    return 'Привет, незнакомец'
  }
}

Если же приветствие зависит от роли, то цепочки вложенных тернарных операторов становятся нечитаемыми:

        
          
          const greetings = function(role) {  return result = role === 'admin' ? 'Приветствую, босс' : role === 'moder' ? 'Приветствую, смотритель порядка' : role === 'user' : 'Здравствуй, пользователь' ? role === 'guest' ? 'Здравствуй, гость' : 'Привет, некто'}
          const greetings = function(role) {
  return result = role === 'admin' ? 'Приветствую, босс' : role === 'moder' ? 'Приветствую, смотритель порядка' : role === 'user' : 'Здравствуй, пользователь' ? role === 'guest' ? 'Здравствуй, гость' : 'Привет, некто'
}

Такой код можно улучшить форматированием, но лучше использовать switch:

        
          
          const greetings = function(role) {  switch (role) {    case 'admin':      return 'Приветствую, босс'    case 'moder':      return 'Приветствую, смотритель порядка'    case 'user':      return 'Здравствуй, пользователь'    case 'guest':      return 'Здравствуй, гость'    default:      return 'Привет, некто'}
          const greetings = function(role) {
  switch (role) {
    case 'admin':
      return 'Приветствую, босс'
    case 'moder':
      return 'Приветствую, смотритель порядка'
    case 'user':
      return 'Здравствуй, пользователь'
    case 'guest':
      return 'Здравствуй, гость'
    default:
      return 'Привет, некто'
}