How to use a Ternary in JavaScript
A conditional short cut to save time and space
If a traditional if-else check is the bread and butter of programming, a ternary is the toaster. Which is to say that ternaries make things better. They do seem odd at first, but once you get used to them, they’ll become one of your favorite tools, especially if you use React.
What’s the syntax?
Here’s a function that uses an if-else, and then a ternary:
// traditional
const movieLengthCheck1 = (runtime) => {
if (runtime <= 90) {
return 'Short!';
} else {
return 'Long.';
}
}// ternary
const movieLengthCheck2 = (runtime) => {
return runtime <= 90 ? 'Short!' : 'Long.';
}
Broken down into its pure components, it’s the same three parts of any if-else check: a condition to check, a value if the condition is true, and a value if the condition is false. Here’s the pseudo code:
(condition) ? (if condition true) : (if condition false)You don’t need the ( ) as you saw earlier, but feel free to use them to help solidify the concept in your mind. Think of it as if the ? is asking a question, and the : separates the responses. The first option is for true, and the second option is for false. The order never changes. So in our example, if the runtime is less than 90 , then the ternary evaluates to Short!, otherwise, it evaluates to Long..
Keep in mind that truthy and falsy values still work like they normally do. Also, you can use ternaries in variable assignments as well:
const getMovieReview = (wasEnjoyed) => {
const opinion = wasEnjoyed ? 'Great!' : 'Bad.';
return `I thought the movie was ${opinion}`;
}When would I use it?
Ternaries are usually used when there are two simple choices, but you don’t want to take up a bunch of lines. You’ll be using them a lot if you’re a React dev. They’re one of the most common ways to handle conditional rendering in React. This is because they are a single expression with a return value, so you can use them right in the JSX:
const Greeting = (props) => {
return (
<h1>
{ props.isHappy ? "Hey hey!!" : "Hello." }
</h1>
);
}Some style tips
Just two quick things before you go. When breaking a ternary into multiple lines, the convention is to start each new indented line with the ? and : like so:
const isBirthday = true;
const greeting = isBirthday
? 'Hello! Today is my Birthday!!'
: 'Hey. I wish it was my birthday.'Also, earlier I said ternaries are for two values, however that’s not the whole truth. There is a way to “chain” ternaries together to get more options. You can do this by making the false condition check value another ternary:
const greeting = isMorning
? "Good Morning"
: isAfternoon /* new ternary */
? "Good Afternoon"
: "Good Evening"Now we have three different greetings, based off of two different checks. Theoretically, you could chain as many as you like. I don’t use them though, since I personally think they are harder to read. I gave a simple example here, but with real checks they get complex quick. I feel ternaries work best when they’re simple, like returning a React component or null. However, that’s just my opinion, and there are some great counterarguments for using ternary chaining.
Like so many things in coding, once you learn the syntax, it’s up to you to find your own style. If you’ve ever seen a case where chained ternaries are perfect, let me know!
happy coding everyone,
mike
