Web/JavaScript/Reference/Operators/Conditional Operator
The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.
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.
Syntax
condition ? exprIfTrue : exprIfFalse
Parameters
condition- An expression whose value is used as a condition.
exprIfTrue- An expression which is evaluated if the
conditionevaluates to a truthy value (one which equals or can be converted totrue). exprIfFalse- An expression which is executed if the
conditionis falsy (that is, has a value which can be converted tofalse).
Description
Besides false, possible falsy expressions are: null, NaN, 0, the empty string (""), and undefined. If condition is any of these, the result of the conditional expression will be the result of executing the expression exprIfFalse.
Examples
A simple example
var age = 26;
var beverage = (age >= 21) ? "Beer" : "Juice";
console.log(beverage); // "Beer"
Handling null values
One common usage is to handle a value that may be null:
let greeting = person => {
let name = person ? person.name : `stranger`
return `Howdy, ${name}`
}
console.log(greeting({name: `Alice`})); // "Howdy, Alice"
console.log(greeting(null)); // "Howdy, stranger"
Conditional chains
The ternary operator is right-associative, which means it can be "chained" in the following way, similar to an if … else if … else if … else chain:
function example(…) {
return condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: value4;
}
// Equivalent to:
function example(…) {
if (condition1) { return value1; }
else if (condition2) { return value2; }
else if (condition3) { return value3; }
else { return value4; }
}
Specifications
| Specification |
|---|
| ECMAScript (ECMA-262)The definition of 'Conditional Operator' in that specification. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop | Mobile | Server | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Conditional operator (c ? t : f)
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 10.1 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
nodejs
Full support 0.1.100 |
Legend
- Full support
- Full support
See also
- if statement
- Nullish coalescing operator
- Optional chaining
- [[../../../../../Learn/JavaScript/Building_blocks/conditionals|Making decisions in your code — conditionals]]
- Expressions and operators
Conditional (ternary) operator by Mozilla Contributors is licensed under CC-BY-SA 2.5.