The JavaScript Ternary Operator

Use of the Ternary Operator is an Important Design Decision

Man Sitting At Desk Using Computer
Cavan Images/Stone/Getty Images

The conditional ternary operator in JavaScript assigns a value to a variable based on some condition, and is the only JavaScript operator that takes three operands.

The ternary operator is a substitute for an if statement in which both the if and else clauses assign different values to the same field, like so:

if (condition)
   result = 'something';
else
   result = 'somethingelse';

The ternary operator shortens this if/else statement into a single statement:

result = (condition) ? 'something' : 'somethingelse';

If condition is true, the ternary operator returns the value of the first expression; otherwise, it returns the value of the second expression. Let's consider its parts: 

  • First, create the variable to which you want to assign a value, in this case result. The variable result will have a different value depending on the condition.
  • Note that on the right hand side (i.e. the operator itself), the condition is first.
  • The condition is always followed by a question mark (?), which can basically be read as "was that true?"
  • The two possible results come last, separated by a colon (:).

This use of the ternary operator is available only when the original if statement follows the format shown above — but this is quite a common scenario, and using the ternary operator can be far more efficient.

Ternary Operator Example

Let's look at a real example.

Perhaps you need to determine which children are the right age to attend kindergarten.

You might have a conditional statement like this:

var age = 7;
var kindergarten_eligible;
 

if (age > 5) {
  kindergarten_eligible = "Old enough";
}
else {
  kindergarten_eligible = "Too young";
}

Using the ternary operator, you could shorten the expression to:

var  kindergarten_eligible = (age < 5) ? "Too young" : "Old enough";

This example would, of course, return "Old enough."

Multiple Evaluations

You can include multiple evaluations, as well:

var age = 7, var socially_ready = true;
   var kindergarten_eligible = (age < 5) ? "Too young"  : socially_ready
   "Old enough but not yet ready" "Old and socially mature enough"

console.log ( kindergarten_eligible ); // logs "Old and socially mature enough" 

Multiple Operations

The ternary operator also allows the inclusion of multiple operations for each expression, separated by a comma:

var age = 7, socially_ready = true;

age > 5 ? (
    alert("You are old enough."),
    location.assign("continue.html")
) : (
    socially_ready = false,
    alert("Sorry, but you are not yet ready.")
);

Ternary Operator Implications

Ternary operators avoid otherwise verbose code, so on the one hand, they appear desirable. On the other hand, they can compromise readability — obviously, "IF ELSE" is more easily understood than a cryptic "?".

When using a ternary operator —  or any abbreviation  — consider who will be reading your code. If less-experienced developers may need to understand your program logic, perhaps the use of the ternary operator should be avoided. This is especially true if your condition and evaluations are complex enough that you would need to nest or chain your ternary operator.

In fact, these kinds of nested operators can impact not only readability but debugging.

As with any programming decision, be sure to consider context and usability before using a ternary operator.