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;
conditional operator basic syntax

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}`);
A regular if/else statement

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}`);
A ternary operator replacing if/else statement

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}`);
Multiple if/else statements in a program

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}`);
Multiple ternary operators in action

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).