Javascript shorthand for if/else statements explained
If you’re looking for Javascript shorthand for if/else
statements, you’re probably looking for the ternary – a.k.a the conditional – operator.
🎧 Debugging Jam
Calling all coders in need of a rhythm boost! Tune in to our 24/7 Lofi Coding Radio on YouTube, and let's code to the beat – subscribe for the ultimate coding groove!" Let the bug-hunting begin! 🎵💻🚀
![24/7 lofi music radio banner, showing a young man working at his computer on a rainy autmn night with hot drink on the desk.](https://www.decodingweb.dev/wp-content/themes/lisboa/assets/img/radio-banner.webp)
JavaScript ternary operator takes three operands: a condition
followed by a question mark (?
), and two JavaScript expressions separated by a colon (:
).
![Woman thinking](https://www.decodingweb.dev/wp-content/themes/lisboa/assets/img/woman-thinking.png)
Psssst! Do you want to learn web development in 2023?
![Pixel question mark](https://www.decodingweb.dev/wp-content/themes/lisboa/assets/img/pixel-question-mark.png)
The expression on the left side of the colon will be executed if the condition is true (or more precisely truthy). But if the condition is false (falsy), the right-side expression will be executed:
condition ? exprIfConditionIsTruthy : exprIfConditionIsFalsy
The result of a ternary operator can be assigned to a variable, and used in another expression. You can also use it when returning a value in a function.
Let's see some use cases.
Initializing variables: The most common use case of ternary operators is initializing variables:
let backgroundColor = isChrismas ? 'red' : 'yellow'
With a JavaScript if/else
statement, you'd achieve the same thing like so:
let backgroundColor = ''
if (isChristmas) {
backgroundColor = 'red'
} else {
backgroundColor = 'yellow'
}
Not bad either.
Ternary operator in functions: You can use the ternary operator to return a value from a function.
The following function determines whether a number is even or not:
function isEven (value) {
return value % 2 === 0 ? true : false
}
Ternary operator in strings: You can also use the ternary operator when generating strings:
let greeting = 'Welcome dear ' + user ? user.name : 'user'
In the above example, if the user is authenticated, we'll greet them by name, otherwise 'Welcome dear user' would be displayed.
Ternary operators can be nested
The ternary operator is right-associative, meaning it can be nested - just like having consequent if/else
blocks.
On the other hand exprIfConditionIsTruthy
and exprIfConditionIsFalsy
operands can be a ternary operator:
let someVariable = condition1 ? value1
: condition2 ? value2
: condition3 : value 3 : value 4
Readability of the ternary operator in JavaScript
Even though the ternary operator is short and sweet, it doesn't make other conditional statements a bad choice.
Sometimes a simple if/else
statement is more readable than a ternary operator, regardless of the number of lines.
Which one would you choose for nested conditions:
❋ The ternary apporach
function someFunction() {
return condition1 ? value1
: condition2 ? value2 : value3
}
❋ The if/else approach:
function someFunction () {
if (condition1) {
return value1
} else if (condition2) {
return value2
}
// If none of the above are truthy
return value3
}
Although the latter approach needs a few more lines, it's closer to human language. As a rule of thumb, the ternary operator is handy for one-liners. For other flow control scenarios, use a simple Javascript if
statement.
Alright, I think that does it for today! I hope you found this quick guide helpful!
Thanks for reading.
Never miss a guide like this!
Disclaimer: This post may contain affiliate links. I might receive a commission if a purchase is made. However, it doesn’t change the cost you’ll pay.