78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
---
|
|
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:
|
|
|
|
```javascript
|
|
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
|
|
|
|
```javascript
|
|
|
|
function memberOpen(){
|
|
console.log("open");
|
|
}
|
|
|
|
function memberClose(){
|
|
console.log("close");
|
|
}
|
|
|
|
let isMember = true;
|
|
|
|
(isMember) ? memberOpen() : memberClose();
|
|
```
|
|
|
|
 <a href='https://repl.it/M8Ge/1' target='_blank' rel='nofollow'>Run Code</a>
|
|
|
|
## 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.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
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.
|
|
|
|
```javascript
|
|
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:** <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator' target='_blank' rel='nofollow'>MDN</a>
|