The Shorthand Guidebook: Ternary Operators

Understanding Conditionals

In order to understand the ternary operator, you should have a solid understanding of if…else statements:

The program flow here is pretty straight-forward: If the variable dogPerson evaluates to truthy, execute the code in the first set of curly braces. If it evaluates to falsy, execute the code in the second set of curly braces. This is about as simple as a conditional statement can get, which begs the question: does it really need to span multiple lines?

Ternary Operators: The Basics

The ternary operator takes 3 operands: the first is the condition being tested, followed by the expression to execute if the condition evaluates to truthy, and then the expression to execute if the condition evaluates to falsy. The basic structure for the conditional looks like this

condition ? ifTrue : ifFalse

You can already see how this can condense simple logic into one line of code, without impeding legibility. Taking the example from earlier, we can rewrite our code using a ternary operator to look like this:

In this situation, we are assigning a string to a variable based on how the condition evaluates, but you can do much more than that. In fact, ternary operators become even more convenient when you call functions within them. Take a look at this example below, I’m using two functions (makeDog and makeCat) in my ternary conditional statement at the bottom on the Javascript file on line 38 to choose a random image of either a dog or a cat to display, based on what the user selects.

(There is, of course, more refactoring we could do here to make this code even more efficient, but I’m trying to illustrate a point ?)

Ternary Operators: A Step Further

So far, we’ve looked at ternary operators as a way to evaluate a statement and return one of two values. You can have a bit more fun with it and “chain” the ternary operator to create a structure that is closer to an if…elseif conditional:

function chainedTernary(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

A word of warning when it comes to chaining ternary operators: be mindful that choosing the shorthand over a traditional if..elseif conditional doesn’t impede the legibility of your code, or try to accomplish something that the ternary operator just isn’t cut out for.

Conclusion

The ternary operator is a relatively simple concept that can really make a difference when you implement it in your Javascript code. As with any type of shorthand, if you find yourself using shorthands and pondering whether or not your code will be easily maintained in the future, always proceed with caution. Shorthands exist to help with the readability and clearness of code, not to fight it. This is the first in a series of blogs I’ll be doing on some quick shorthand tips, I hope you have found the information useful for your next project! If you’d like to read more about conditionals and ternary operators, check out this resource from MDN. Happy coding!