Replace Your JavaScript If/Else Statements with the Ternary Operator

As you learn to program, you’ll inevitably run into scenarios where you think, I could have written that better.

Opportunities to rewrite your code, which is called refactoring, are always present. Doing so is a sign that your programming skills are maturing.

Variables and if/else statements are two of the first programming concepts, and so refactoring simple if/else assignment statements is a perfect time to practice refactoring.

Let’s take a look at the following assignment of a variable canVote that will either be true or false based on a condition.const age = 19;if(age >= 18) {
  const canVote = true;
} else {
  const canVote = false;
}

This type of code block is simple enough, but examination reveals redundancies—we have two assignment statements for canVote. In fact, the entire purpose of the if/else statement is to assign a value to canVote.

This is where the ternary operator ?: comes into play and shines.

What is the Ternary Operator?

The ternary operator is a shorthand technique for assigning one of two values based on a condition. Let’s refactor the above code with the ternary operator first and then talk about its syntax and benefits.const age = 19;const canVote = (age >= 18) ? true : false;

We’ve taken our five line if/else statement and condensed it to a single line. Awesome! Now, as code condenses it can be harder to read initially, and so let’s deconstruct the ternary operator’s pieces.

First of all, the ternary operator has three operands—values that are operated on—which is where its name comes from. In order of appearance, the operands are the condition, positive assignment, and negative assignment.(condition) ? positive assignment : negative assignment

So how does it work?

The condition is first evaluated as an expression, meaning it will either be true or false. When the condition evaluates true, the positive assignment is returned. When the condition evaluates false, the negative assignment is returned.

In the context of our previous code example, the returned value is assigned to canVote.

If the syntax throws you for a loop, you’re not alone. It’s easy to mix-up the different symbols, which is why I always write ternary operations inside out.// step 1: write the ternary syntax
const canVote = () ? : ;// step 2: fill in the condition and assignments
const canVote = (age >= 18) ? true : false;

Keep in mind that the equals sign and semicolon aren’t part of the ternary operator—they’re part of the larger assignment statement.

Why Should I Use the Ternary Operator?

Now that we’ve introduced the operator and demonstrated how to refactor old code, what’s so great about it?

Admittedly, I was resistant to adopt the ternary operator when I first learned about it. I believed the if/else statement was easier to read. And it is…in a vacuum.

Our brain will recognize the words if and else much faster than lifting () ? : from a line of code. However, when your if/else assignment exists in the larger context of a program, the vertical real estate that’s gained from the ternary operator is no joke.

Moreover, what happens if we rename canVote? The change has to happen in two places with the traditional if/else statement. A ternary operator assignment only happens in one place.

Once you get more comfortable, the ternary operator can also be used in functions to simplify return statements.function canVote(age) {
  return (age >= 18) ? true : false;
}

Yes, I know that the above could be further refactored to simply return the evaluation of age >= 18, but we’ll keep it as is for the sake of consistency.

Have you adopted using the ternary operator in your standard practice? When are your favorite opportunities to condense your code and use it?