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

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

Синтаксис

condition ? exprIfTrue : exprIfFalse 

Параметри

condition
Вираз, який використовується в якості умови.
exprIfTrue
Вираз, який виконується, якщо вираз condition оцінений як правдивий (який дорівнює або може бути приведений до true).
exprIfFalse
Вираз, який виконується, якщо вираз condition є хибним (тобто, його значення може бути приведене до false).

Опис

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

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

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

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

function greeting(person) {
    var name = person ? person.name : "незнайомець";
    return "Привіт, " + name;
}

console.log(greeting({name: 'Аліса'}));  // "Привіт, Аліса"
console.log(greeting(null));             // "Привіт, незнайомець"​​​​​

Заувага: Оператор необов'язкового ланцюгування був створений для використання у таких випадках. На момент написання (липень 2019), він досі є експериментальним і не був реалізований.

Умовні ланцюги

Тернарний оператор є правоасоціативним, це означає, що він може створювати ланцюги наступним чином, схоже на ланцюг if … else if … else if … else:

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

// Є еквівалентом:

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

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

Специфікація Статус Коментар
ECMAScript Latest Draft (ECMA-262)
The definition of 'Conditional Operator' in that specification.
Draft
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Conditional Operator' in that specification.
Standard
ECMAScript 5.1 (ECMA-262)
The definition of 'The conditional operator' in that specification.
Standard
ECMAScript 1st Edition (ECMA-262)
The definition of 'The conditional operator' in that specification.
Standard Початкове визначення. Реалізоване у JavaScript 1.0.

Сумісність з веб-переглядачами

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
Conditional operator (c ? t : f)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support YesSafari Full support YesWebView Android Full support 1Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support 1.0nodejs Full support Yes

Legend

Full support  
Full support

Див. також