When I first saw if statements using ternary operators, I was confused. "Why is there a question mark?" and "Why is there a colon?" were probably some of the thoughts I had.

After some research and practice, I was finally getting the grasp on how to take my if statements to the next level using ternary operators.

Prerequisites 📝

1. A working knowledge of JavaScript (i.e. if statements and truthy/falsy expressions)
2. A code editor (I recommend Visual Studio Code)

Let's Get Started ✨

First, let's breakdown ternary operators using MDN

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. This operator is frequently used as a shortcut for the if statement.

It looks like this,

condition ? truthy expression : falsy expression

Second, let's take a look at an if statement that could be refactored using the ternary operator

let userIdValid; 

if (userId.value.length === 10) { 
  userIdValid = "the user ID is valid";
}
else {
  userIdValid = "the user ID is not valid";
}

This if statement is a great opportunity to refactor using ternary operators. Let's break it down step by step.

1. Find the condition (userId.value.length === 10)
2. Find the truthy value userIdValid = "the user ID is valid";
3. Find the falsy value userIdValid = "the user ID is not valid";
4. Put it all together using "?" and ":"

(userId.value.length === 10) ? userIdValid = "the user ID is valid" : userIdValid = "the user ID is not valid";

Notice that you only need the ";" at the very end of the statement.

🎉As a bonus🎉, you can refactor this even further by assigning the statement to the userIdValid variable like this,

let userIdValid = (userId.value.length === 10) ? "the user ID is valid" : "the user ID is not valid";

Key takeaways ✨

Refactoring this took 8 lines of code and simplified it down to 1 line. This is great! Adding a code comment right above the statement can help explain what is going on. This is helpful for future you and other fellow developers!

//checking the validity of the userId by checking its length
let userIdValid = (userId.value.length === 10) ? "the user ID is valid" : "the user ID is not valid";

And there you have it! You just wrote an if statement using ternary operators.

Next Steps ✨

Take a look at some of the if statements you have already written in past or current projects. Do any of them present an opportunity to be refactored using ternary if statements? If yes, I encourage you to give it a try!

Thanks for reading! Was this article helpful for you? Any ideas that can be shared? Post a comment below!

P.S. This is my first technical blog post! I found a lot of encouragement from reading The Developer's Guide to Content Creation by Stephanie Morillo. I highly recommend it!