Клавиша / esc

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

if...else в одну строку.

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

Кратко

Скопировано

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

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

Пример

Скопировано
        
          
          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 на примерах.

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

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

        
        
          
        
      

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

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

        
        
          
        
      

И код с if...else:

        
          
          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

  • тернарные: три операнда

    isAdmin ? true : false - операнды isAdmin, true и false