64 lines
2.2 KiB
Markdown
64 lines
2.2 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();
|
||
|
```
|
||
|
|
||
|
![:rocket:](//forum.freecodecamp.com/images/emoji/emoji_one/rocket.png?v=2 ":rocket:") <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 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';
|
||
|
}
|
||
|
```
|
||
|
|
||
|
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>
|