2.5 KiB
title |
---|
Ternary Operator |
The Ternary operator replaces an if
/else
block in a condensed format. The following is the general format of the ternary operator.
condition ? expr1 : expr2
Description
If condition is true, the operator resolves to the value of expr1; otherwise, it resolves to the value of expr2.
For example, to display a different message based on the value of the isMember variable, you could use this statement:
let isMember = true;
let message = isMember ? 'Welcome Back!' : 'You need to login'; // 'Welcome Back'
Another useful method to using a Ternary operator would be to envoke it to conditionally execute a function or method
function memberOpen(){
console.log("open");
}
function memberClose(){
console.log("close");
}
let isMember = true;
(isMember) ? memberOpen() : memberClose();
Running functions with ternary operator
It's also possible to run functions using the ternary operator, which sometimes can be useful and more readable. However, use it carefully, because then code is harder to debug.
const runFirst = true;
runFirst ? first() : second();
Chaining using the ternary operator
You can also chain a ternary operator indefinitely, in a similar way to using else if's
before the final else of an an if
/else
block. Each time the colon is used to state the else part of the ternary operator a new condition can be stated until the final termination condition is used.
function displayNum(num) {
return num === 3 ? 'number is 3' : num === 2 ? 'number is 2' : num === 1 ? 'number is 1 ' : 'number is not in range';
}
To ease readability, this is often formatted across multiple lines.
function displayNum(num) {
return num === 3
? 'number is 3'
: num === 2
? 'number is 2'
: num === 1
? 'number is 1'
: 'number is not in range';
}
This method needs to be used sparingly in the right places however, as with multiple else if's
it can sometimes lead to more readable code using a switch statement.
Read more: MDN