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

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

На практике

Секция статьи "На практике"

Илья Космачев

Секция статьи "Илья Космачев"

При выборе между 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 'Привет, некто'
}