What is the ternary operator in JavaScript?

Ternary operators are the only operator in JavaScript that takes 3 operands. They are often used as the shortcut to if statements in JavaScript.

Work with an example to refactor a code written with a if statement to a ternary code block.

Code

let weather = "rainy"

// Using if statement
if (weather === "sunny") {
    console.log("Happy")
} else {
    console.log("Meh!")
}

// using ternary operator
weather === "sunny" ? console.log("Happy") : console.log("Meh!")

Full Transcript

0:00 Hello there, it's harit from bonsaiilabs. In today's session, we are going to learn about ternary operators. Now let's say we want to write the code that prints out our mood based on the weather. So for example, if it is sunny, we feel happy, but if it is not sunny we feel, meh! Not so happy. So let's see the code using the if statement first. We have a variable called weather whose current value is cloudy. Then we have a if statement, which checks if the weather value is sunny, it prints out happy on the console. Otherwise it prints meh! on the console. Now let's go ahead and run that. So when we print, we get meh! on the console. Now let's change the value to sunny and try to print again. And then we see the value of happy on the console. Now we can use the ternary operator to write the if statement from line three to line seven into a single line.

0:55 The ternary operator is the only JavaScript operator that takes in the three operands - a condition followed by a question mark and then followed by the expression to execute if the condition is true. It is then followed by a colon and then followed by the expression if the condition is false. Let's see how our original, if block can be converted into a ternary code block. First the condition will move into the first block. Then, the statement which belongs to the true block will come as the second operand and finally the statement related to the else block will come as the third operand. The ternary operator is often used as the shortcut to the if statement. Let's write the code next to prove that our understanding is correct. We will first copy the condition, which is weather equal sunny and we will paste it here followed by the question mark.

1:52 Then we will copy the statement which should execute. If the condition is true, we paste it next and after that we will put the colon symbol and then the statement which should execute if the condition is false. We will comment out the original if statement, and then we are going to run the code again. As you see, since the weather is sunny, our mood is happy. Now let's change it to rainy and see the mood change. Great! So I hope now you know how to write ternary operators and how you can refactor the if statements using the ternary operators. And that's it. If you like the video, consider subscribing us to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. See you next time.