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

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Синтаксис

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));             // "Привіт, незнайомець"​​​​​

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

Тернарний оператор є правоасоціативним, це означає, що він може створювати ланцюги наступним чином, схоже на ланцюг 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; }
}

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

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

Див. також

• Оператор if
• Оператор null-об'єднання
• Необов'язкове ланцюгування
• Making decisions in your code — conditionals
• Вирази та оператори