JavaScript: What is the ternary operator?

Learn how to shorten your if statements into one line of code with the ternary operator and four practical examples.

if this then that via unsplash.com

A typical if statement

Say we have the age of a person and want to assign true if they’re old enough to drive, and false if they aren’t. For this example, we’ll assume you have to be 16 to drive. An if statement for this scenario might look something like this:

let age = 20;
let driver;
if (age >= 16) {
  driver = true;
} else {
  driver = false;
}

But what if I told you we could do the same exact thing in just two lines of code? And that the if statement would be just one line long?

let age = 20;
let driver = age >= 16 ? true : false;

Shorter code with the same result of driver = true;. How does it work? Enter the ternary operator…

The Ternary Operator

The syntax of the ternary operator is quite simple:

// ternary operator
condition ? value if true : value if false
// typical if statement
if ( condition ) {
  value if true;
} else {
  value if false;
}

1. Our condition is what we’re actually testing. This where your ===, <=, >=, etc. conditionals would go.
2. A ? separates our conditional from our true value. Anything between the ? and the : is what is executed if the condition evaluates to true.
3. Finally a : colon. If your condition evaluates to false, anything after the colon is executed.

Lets look at another example:

In this example, we’re programming for a movie theater that has discounted tickets for students. If you’re a student, the ticket price is $8, else it’s $10:

let isStudent = true;
let price = isStudent ? '$8.00' : '$10.00'
console.log(price);
// '$8.00'

What if our movie theater gives student discounts and senior discounts? We can nest ternary operators to test multiple conditions.

In this scenario the regular ticket price is $10. Students pay $8. Senior Citizens pay $6. Here’s what the code for a Senior would look like:

let isStudent = false;
let isSenior = true;
let price = isStudent ? '$8.00' : isSenior ? '$6.00' : '$10.00'
console.log(price);
// '$6.00'

That’s a lot of question marks and colons — lets break it down.

1. First we test isStudent — since that is false, the code after the : is executed. After the : we have a new condition:
2. Our second condition tests isSenior — since this is true, the code after the ? but before the : is run.
3. price is assigned the value of '$6.00' which is then logged to the screen.

Ternary and multiple operations

As a quick aside, it is also possible to run multiple operations within a ternary as long as we separate the operations with a comma. Notice I’ve also used parenthesis to help group my code:

let isStudent = false;
let price = '$10.00';
isStudent ? (
  price = '$8.00',
  alert('Please check for student ID')
) : (
  alert('Enjoy the movie')
);

In the above example, the price of our movie is already set to $10. If isStudent is true, we adjust the price down to $8, then send an alert to have the cashier check for student ID. If isStudent is false, we alert to enjoy the movie.

Welcome to codeburst.io

I hope you enjoy my articles. Just yesterday I launched codeburst.io — the newest online publication that will showcase web development articles and tutorials from writers all over the world.

I learned everything I know about Web Development from the internet. People, more experienced than myself, wrote articles and tutorials and shared them so I could become the developer I am today. With the creation of Codeburst, I’ll be able to continue to provide tutorials, news, and articles to web development students everywhere. More importantly, I look forward to now being able to provide a space for other writers to showcase and share their knowledge.

So whether you’re just starting to learn Web Development, or would like to help others learn — Welcome! Please use the buttons below to follow us!

If you’d like to become a writer, check out this article.

❤ If this post was helpful, please hit the little blue heart! And don’t forget to check out the 5 Best Courses for Learning Full Stack Web Development