JavaScript Ternary Operator: A Simple Guide with Examples

What Is the JavaScript Ternary Operator?

The JavaScript ternary operator is a short way to write an if-else statement. It checks a condition and returns one of two values depending on whether the condition is true or false.

It is also called the conditional operator because it works with a condition.

Syntax of the Ternary Operator

condition ? valueIfTrue : valueIfFalse;

Here is what each part means:

• condition: The condition you want to check.
• ?: Separates the condition from the true result.
• valueIfTrue: The value returned if the condition is true.
• :: Separates the true and false results.
• valueIfFalse: The value returned if the condition is false.

Example 1: Basic Ternary Operator

Let’s check whether a person is eligible to vote based on their age.

let age = 20;

let result = age >= 18 ? "Eligible to vote" : "Not eligible to vote";

console.log(result);

Output:

Eligible to vote

Explanation:

The condition age >= 18 checks whether the age is 18 or above.

Since the age is 20, the condition is true, so the ternary operator returns "Eligible to vote".

Example 2: Ternary Operator vs If-Else

You can write the same condition using an if-else statement.

Using if-else:

let age = 16;
let result;

if (age >= 18) {
    result = "Adult";
} else {
    result = "Minor";
}

console.log(result);

Using the ternary operator:

let age = 16;

let result = age >= 18 ? "Adult" : "Minor";

console.log(result);

Output:

Minor

Both examples produce the same result. The ternary operator is more concise when you only need to choose between two values.

Example 3: Check Even or Odd

You can also use the ternary operator with the modulo (%) operator.

let number = 7;

let result = number % 2 === 0 ? "Even" : "Odd";

console.log(result);

Output:

Odd

Explanation:

The modulo operator returns the remainder after division. If a number divided by 2 has a remainder of zero, it is even. Otherwise, it is odd.

Example 4: Assign a Discount

Suppose an online store offers a discount to customers who spend ₹1,000 or more.

let amount = 1500;

let discount = amount >= 1000 ? 10 : 0;

console.log(discount + "%");

Output:

10%

If the amount is ₹1,000 or more, the discount is 10%. Otherwise, the discount is 0%.

Example 5: Ternary Operator with Multiple Conditions

You can nest ternary operators to check multiple conditions. However, nested ternaries can become difficult to read.

let marks = 75;

let grade = marks >= 90
    ? "A"
    : marks >= 60
        ? "B"
        : "C";

console.log(grade);

Output:

B

Explanation:

• Marks of 90 or above return grade A.
• Otherwise, marks of 60 or above return grade B.
• If neither condition is true, the result is grade C.

For more complex conditions, using if-else if-else may be easier to understand.

Advantages of the Ternary Operator

1. Shorter code: It can replace simple if-else statements.
2. Easy value assignment: You can assign a value based on a condition in one expression.
3. Readable for simple conditions: It keeps straightforward conditional logic compact.

When Should You Use the Ternary Operator?

Use the ternary operator when you need to choose between two values based on a simple condition.

Avoid deeply nested ternary operators when they make your code difficult to understand. In those cases, use if-else statements instead.

Frequently Asked Questions

1. What is the ternary operator in JavaScript?

The ternary operator is a conditional operator that evaluates a condition and returns one of two values. Its syntax is condition ? valueIfTrue : valueIfFalse.

2. Why is it called the ternary operator?

It is called the ternary operator because it uses three operands: a condition, a value for the true case, and a value for the false case.

3. Is the ternary operator faster than if-else?

For typical JavaScript applications, you should choose between them based on readability rather than performance. Modern JavaScript engines optimize both forms.

4. Can we use multiple conditions in a ternary operator?

Yes. You can use nested ternary operators to check multiple conditions, but if-else if-else is often easier to read for complex logic.

Conclusion

The JavaScript ternary operator is a useful way to write simple conditional expressions. It helps make your code shorter and allows you to assign values based on conditions.

Practice using it with age checks, even-or-odd checks, and discount calculations to understand how it works.

Next tutorial: JavaScript Truthy and Falsy Values.