Умовний (тернарний) оператор

Умовний (тернарний) оператор — це єдиний оператор у JavaScript, який приймає три операнди: умова зі знаком питання (?) після неї, далі вираз, який слід виконати, якщо умова істинна, слідом за якою двокрапка (:), і нарешті – вираз, який виконається, якщо умова хибна. Цей оператор часто використовується як альтернатива інструкції if.

Спробуйте його в дії

Синтаксис

condition ? exprIfTrue : exprIfFalse

Параметри

condition ("умова")

Вираз, значення якого буде використано як умову.

exprIfTrue ("вираз якщо істина")

Вираз, який буде обчислено, якщо condition зводиться до істинного значення (такого, яке еквівалентно true).

exprIfFalse ("вираз якщо хиба")

Вираз, який буде обчислено, якщо значення condition є хибним (значенням, еквівалентним false).

Опис

На додачу до false, "хибними" значеннями є: null, NaN, 0, порожній рядок ("") і undefined. Якщо значення condition належить до цього переліку, результатом всього умовного виразу буде результат виконання виразу exprIfFalse.

Приклади

Простий приклад

const age = 26;
const beverage = age >= 21 ? "Пиво" : "Сік";
console.log(beverage); // "Пиво"

Обробка нульових значень

Одне з поширених застосувань умовного виразу — це обробка значення, яке може дорівнювати null:

const greeting = (person) => {
  const name = person ? person.name : `незнайомцю`;
  return `Агов, ${name}`;
};

console.log(greeting({ name: `Аліса` })); // "Агов, Аліса"
console.log(greeting(null)); // "Агов, незнайомцю"

Ланцюжки умовних виразів

Тернарний оператор — правоасоціативний. Це означає, що його можна "об'єднувати в ланцюжки" подібно до ланцюжків if … else if … else if … else, так, як це наведено нижче:

function example() {
  return condition1
    ? value1
    : condition2
    ? value2
    : condition3
    ? value3
    : value4;
}

Такий запис еквівалентний ланцюжкові if...else нижче.

function example() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}

Специфікації

Сумісність із браузерами

desktop mobile server
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet Deno Node.js
Conditional operator (c ? t : f)
Chrome Full support 1
Edge Full support 12
Firefox Full support 1
Internet Explorer Full support 3
Opera Full support 3
Safari Full support 1
WebView Android Full support 1
Chrome Android Full support 18
Firefox for Android Full support 4
Opera Android Full support 10.1
Safari on iOS Full support 1
Samsung Internet Full support 1.0
Deno Full support 1.0
Node.js Full support 0.10.0

Дивіться також