Ternary Operators in JavaScript

The ternary operator is essentially a short cut for the “if” statement in Javascript. It makes our code look neater and abstracts away several lines of code.

Photo by Davor Denkovski on Unsplash

What is the ternary operator and how do we use it?

Here is Web MDN docs definition:

“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.”

Read that again a couple of times, and if you still don’t understand, no worries. In this post I’ll work on breaking down the ternary operator. I came across the ternary operator when I was first learning to code. At the time when I first saw it, I had no idea how it worked, but I loved that it shortened the solution to a Ruby problem I was working on at the time. To break it down for myself I began swapping it out of old problems I had solved to try and understand it better. It wasn’t until I spoke with a coach when I actually began to gain a deeper understanding of what was going on under the hood.

The ternary operator looks at three things. First is the condition, or in other words: the start of the if statement. Following the condition is a question mark (?). As an example, let’s say we want to create a function or program that filters red and green tomatoes and let’s call the function sortTomatoes. We’ll have three tomatoes, tomatoA, tomatoB, and tomatoC. And then let’s say that to sort the red and green tomatoes, we want our function to behave in the following way: If a tomato is red, then it is ripe and we let it through the filter, and if it is not red then it is not ripe and so it doesn’t pass through the filter.

let tomatoA = {color : "red"}
let tomatoB = {color : "green"}
let tomatoC = {color : "red"}

const sortTomatoes = (tomato) => {
   if (tomato.color === "red"){
      // if it's true
      return "the tomato is ripe!"
   } 
      // if it's false
      return "Green Alert!" 
}

In the code above we see our example of the tomatoes being processed through an if statement. Next let’s refactor this code to be a ternary.

const sortTomatoes(tomato){
   (tomato.color === red) ? "The tomato is ripe!" : "Green Alert!"
} 
//Results: 
//input: tomatoA => "The tomato is ripe!"
//input: tomatoB => "Green Alert"
//input: tomatoC => "The tomato is ripe!"

In the code above we have three operands within the ternary statement:
1) The condition (tomato.color === red)
2) A return value of: “The tomato is ripe!” and
3) A return value of: “Green Alert!”.

So what is happening here? In the above code, we have a condition that needs to be met. The question (?) operator poses the question: “is the condition true or false?”; in this case, “is the tomato red?”. Next we have two values separated by a colon (:). In the case of our example above, the two values are strings. The value to the left of the colon is returned if the condition is truthy, while the value to the right is returned if the condition is falsey. Because tomatoA and tomatoC are “red”, when they are plugged into the sortTomato function, we get “The tomato is ripe!” returned to us, and since tomatoB is “green” we get “Green Alert!” as the result when we have tomatoB as our input. If you’re wondering, “what if the tomato is any other color?” In that case, the output of our function will be “Green Alert!” As long as a tomato is any color other then red, it will return as falsey in our condition thus returning the the value to the right of the colon (:).

I hope this was of value. There is some thought around ternary’s — that although they make our code more concise, they are hard to read. My intention is that through practice and repeated exposure, ternaries will slowly become more and more frequent in appearance. I will conclude here.

Resources mentioned below:
Conditional (Ternary) Operator