Unravelling the Ternary Operator

In programming, getting the fundamentals right can save a whole lot of time, and it sort of makes everything we code make more sense to us as developers.

Today, we're going to discuss the Ternary Operator.

Whenever we use a condition, like in an if statement for example, it's usually a question that would require an answer, right? Exactly. So the ternary operator works based on this same concept.

For example:

What is your name? I'm Jasmond.

Here, we clearly see that even in human languages, whenever we ask a question, we use a question mark after it, and then the answer to the question right after the question mark. In other words, the question mark separates the question from the answer. This same approach was adopted in the Ternary operator by programming languages.

Regular if statement approach

let age = 12;

if (age >= 18) 
    console.log("You are eligible to vote")
else if (age < 18)
    console.log("You'll get there soon, be patient")
else
    console.log("Please enter a valid age)

Ternary operator approach

let age = 12;

age >= 18 ? console.log("You are eligible to vote") 
: age < 18 ? console.log("You'll get there soon, be patient")
: console.log("Please enter a valid age)

• Since our conditions are like questions, we use question marks (?) after them, and we separate our various conditions and their respective pieces of code to be executed with colons (:)
• Just like in English, what's at the left of a question mark is the question (condition in this case), and what's at the right of it is the answer to the question (the line(s) of code to be executed).
• For the else statement, since it doesn't have any condition (no question), we simply again separate that section with a semicolon, and place the pieces of code to be executed there

Syntax

Without formatting:

condition1 ? code to be executed : condition2 ? code to be executed : code to be executed if all previous conditions are false

With formatting:

Sometimes, if our ternary operator statement is very long, for easy readability, it may be better to format it like so:

condition1 ? code to be executed

: condition2 ? code to be executed

: code to be executed if all previous conditions are false

Some people format like this:

condition1

? code to be executed

: condition2

? code to be executed

: code to be executed if all previous conditions are false

Personally, I prefer the first way of formatting, because it keeps the condition (question) and the code to be executed (answer) on the same line.

NOTE: In Ternary Operator statements, we do not use semicolons right after the part of code to be executed, but instead, we use semicolons at the end of the line, after the whole ternary operator statement.

age >= 18 ? console.log("You can get a driver's license"); : console.log("You can't get a driver's license now")

The line of code above will give an error when run because of the semicolon. Instead we omit the semicolon and do it like so, placing the semicolon after everything:

age >= 18 ? console.log("You can get a driver's license") : console.log("You can't get a driver's license now");

Using the Ternary Operator with variables

// A program to check if a number is positive, negative or zero.
// To keep it simple, we'll hardcode the number into a variable.

let num = 3;
let result;

result = num > 0 ? "positive" : num < 0 ? "negative" : 0

From the code snippet above, the parts to be executed are values, which would be assigned to the variable result if that specific condition is true. They could be expressions too, which as you know, would be evaluated into values.

So the next time the Ternary Operator seems confusing to you, think of it as pairs of questions and answers, with a question mark separating a question from an answer, and columns separating each pair from the other.

I hope this article has helped you to understand how the Ternary Operator really works. Thanks for reading the article.

Comments

[Jon Randy 🎖️]

Its name is actually the 'conditional' operator, and it is a ternary operator (one that takes 3 operands). It's sometimes referred to as the ternary operator as it's the only operator in the language that takes this many operands. Most operators are either binary (two operands) or unary (one operand)

[Obafemi Olorede]

You're definitely right and I'll edit the article based on this. Thanks for dropping a comment