The One Liner If Statement (Kinda): Ternary Operators Explained

What Is a Ternary Operator?

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. — MDN

Following the description, a ternary operator would be written like this:

condition ? ifTrue : ifFalse

What Is The Difference Between the Ternary Operator And An If Statement?

The difference between the two is If is a statement whereas a ternary operator is an expression; the latter returns a value while the former does not.

Where To Use a Ternary Operator?

A ternary operator should be used in a situation where an if statement would create unneeded clutter (single-line variable assignments and single-line conditionals are great examples) or where an if statement can’t be used, but if statement functionality is still needed.

A perfect use of a ternary operator would be a case like this one:

let patronAge = 18;
let canDrink = false;
if (patronAge <= 21){
canDrink = true;
}
console.log(canDrink)
//Do More Stuff

We can shorten the above example into this:

const patronAge = 18;
let canDrink = false;
canDrink = (patronAge <= 21 ? true : false);
//Do More Stuff

But, the ternary operator can be used in more interesting ways.

For example, we could selectively render a Font Awesome icon based on a props boolean with this line:

<FontAwesomeIcon icon={props.dark ? faMoon : faSun} size=”1x” />

Or we can create a dark/light mode for our app by assigning a CSS class to our parent div based on props like this:

<div className={!props.dark ? “light” : “dark”}>
<! — Stuff Here →
</div>

Multiple Operations

If we wanted to added multiple operations to a ternary operator all we need to add a comma and a couple sets of parentheses like this:

const patronAge = 18;
let canDrink = false;
patronAge <= 21 ? ((canDrink = true), alert(“Cannot Drink”))
: ((canDrink = false), alert(“Cannot Drink”));
//Do More Stuff

This is where we get into when not to use a ternary operator.

Where Not To Use A Ternary Operator.

Ternary operators are pretty sweet, but they are tools that should be used when appropriate. Just like you wouldn’t use a hammer to bake a cake you shouldn’t be using a ternary operator in every situation you can. Just because you can use it does not mean you should use it. In the code example above I showed how we would allow multiple operations to take place in a ternary operator but the code above isn’t very readable. The whole point of using a ternary operator is to cut the fluff. Sometimes trying to cut the fluff makes the code less readable. We can take the code above and refactor it into this:

const patronAge = 18;
let canDrink = false;
if (patronAge <= 21) {
canDrink = true;
alert(“Cannot Drink”);
} else {
canDrink = false;
alert(“Cannot Drink”);
}

And sure, it has more lines than the previous example, but it is a heck of a lot more readable. Less readable code leads to bugs later, which piles unneeded stress onto you and the devs you are working with.

Conclusion

In my opinion ternary operators should replace single-line variable assignments and single-line conditionals when writing code, they do in mine. But, once our syntactic sugar starts interfering with the readability of our code that’s where we should think about going back to the if, if…else, and if…else if statements.

Feel free to leave a comment if you have any questions, suggestions, or anything else!