JavaScript Ternary Operator

JavaScript Ternary Operator is used in the place of if-else statement sometimes. It is also called the Conditional Operator sometimes. It does exactly the same thing as if-else statement and it’s syntax is also said to be smaller 😉.

Be sure to check out our JavaScript If-Else lesson before you jump on the ternary operator for better learning.


How Ternary Operator (Conditional Operator) works? 🤔

The Ternary Operator checks whether a certain condition is true, then it performs a certain task. It is the only operator in JavaScript that takes three operands.

The ternary operator is denoted by a question mark ? followed by a colon :.

It’s syntax is given below:

condition ? expression1 : expression2
  • If the condition is true, then expression1 will run.
  • If the condition is false, then expression2 will run.

Example

true ? console.log("This message will be displayed.") : console.log("This message will not be displayed.");

Output

This message will be displayed.

Some more Examples

var age1 = 18, age2 = 16;

// The first expression runs as age1 >= 18 is true
(age1 >= 18) ? console.log("You are qualified to drive") : console.log("You are not qualified to drive");

// The second expression runs as age2 >= 18 is false
(age2 >= 18) ? console.log("You are qualified to drive") : console.log("You are not qualified to drive");

Output

You are qualified to drive
You are not qualified to drive

Replacing If-Else with Ternary (Conditional) Operator 🤯

Here, we will take a look at how if-else statement can be replaced by a ternary operator resulting in a much cleaner code and smaller syntax.

Example with If-Else Statement

var weather = "rainy";

if (weather === "rainy") {
  console.log("Let's not go outside because it's raining.");
} else {
  console.log("Let's go outside.");
}

Output

Let's not go outside because it's raining.

Example with Ternary (Conditional) Operator 😎

var weather = "rainy";

weather === "rainy" ?
  console.log("Let's not go outside because it's raining.") :
  console.log("Let's go outside.");

Output

Let's not go outside because it's raining.

Nested Ternary (Conditional) Operator ⚡

We can also nest conditions just like we did in our JavaScript Nested If-Else lesson.

Example

var age = 16;

var message = (age > 13) ? (age >= 18 ? 'a Teenager and Eligible for driving.' : 'a Teenager') : 'a Kid';

console.log(`You are ${message}`);

Output

You are a Teenager

Chaining Ternary (Conditional) Operators 🔗

The JavaScript Ternary Operators can be “chained” 🔗 or added together to check conditions one after the another. It is an alternative to the If…Else If Statement.

Example

var num = 20;

(num > 100) ?
  console.log("Greater than 100") :
  num > 50 ?
    console.log("Greater than 50") :
    num > 10 ?
      console.log("Greater than 10") :
      console.log("Less than 100");

Output

Greater than 10

In this way, Ternary (Conditional) Operator in JavaScript help us write conditional statements in a concise and cleaner way.