This tutorial will help you learn how to replace an if/else
statement with a more concise shorthand syntax called the ternary operator.
The conditional operator – also known as the ternary operator – is an alternative form of the if/else
statement that helps you to write conditional code blocks in a more concise way.
The syntax for the conditional operator looks like this:
conditional ? expression_when_true : expression_when_false;
First, you need to write a conditional expression that evaluates into either true
or false
. If the expression returns true, JavaScript will execute the code you write on the left side of the colon operator (:
) when it returns false, the code on the right side of the colon operator is executed.
To understand how it works, let's compare it with a regular if/else
statement. Let's say you have a small program that assigns different exam grades depending on your exam score:
- When you have a score higher than 80, you assign "A" as the grade.
- Else, you assign "B" as the grade.
Here's one way to write the program:
let score = 85;
let grade;
if(score >= 80){
grade = "A";
} else {
grade = "B";
}
console.log(`Your exam grade is ${grade}`);
Alternatively, you can write the above code using the ternary operator as follows:
let score = 85;
let grade = score >= 80 ? "A" : "B";
console.log(`Your exam grade is ${grade}`);
And there you go. The ternary operator shorthand looks way more concise and shorter than a regular if/else
statement.
But what if your code requires multiple if/else
statements? What if you add "C" and "D" grades into the evaluation?
let score = 85;
let grade;
if(score >= 80){
grade = "A";
} else if (score >= 70) {
grade = "B";
} else if (score >= 60) {
grade = "C";
} else {
grade = "D";
}
console.log(`Your exam grade is ${grade}`);
No worries! You can write multiple ternary operators to replace the code above like this:
let score = 85;
let grade = score >= 80 ? "A"
: score >= 70 ? "B"
: score >= 60 ? "C"
: "D";
console.log(`Your exam grade is ${grade}`);
However, it's not recommended to replace multiple if/else
statements with multiple ternary operators because it makes the code harder to read in the future. It's best to stick with either if/else
or switch
statements for such cases.
Thanks for reading this tutorial
I hope it has helped you to understand how the ternary operator works. If you enjoy this tutorial, you may want check out my website at sebhastian.com for more JavaScript goodies.
Also, I have a free weekly newsletter about web development tutorials (mostly JavaScript related).