JavaScript Ternary Operator Explained with Examples

Guide
1

The Ternary operator replaces an if / else block in a condensed format. It is also referred to as the conditional operator, inline if (iif), or ternary if. The following is the general format of the ternary operator.

condition ? expr1 : expr2

Description

If condition evaluates to true, the operator resolves to the value of expr1 ; otherwise, it resolves to the value of expr2 .

For example, to display a different message based on the value of the isMember variable, you can use the following statements:

let isMember = true;

let message = (isMember) ? 'Welcome Back!' : 'You need to login'; // 'Welcome Back'

:rocket: Run Code

Running functions with ternary operator

It’s also possible to run functions using ternary operator, which sometimes can be useful and more readable.

    const runFirst = true;
    (runFirst) ? first() : second();

Chaining using the ternary operator

You can also chain a ternary operator indefinitely, in a similar way to using else if's before the final else of an an if / else block. Each time the colon is used to state the else part of the ternary operator a new condition can be stated until the final termination condition is used.

    function displayNum (num) {
     return  num === 3 ? 'number is 3' : num === 2 ? 'number is 2' : num === 1 ? 'number is 1 ' : 'number is not in range';
    }

To ease readability, the code using ternary operators is often formatted across multiple lines as follows:

    function displayNum(num) {
        return num === 3
            ? 'number is 3'
            : num === 2
                ? 'number is 2'
                : num === 1
                    ? 'number is 1'
                    : 'number is not in range';
    }

This way of using the ternary operator needs to be done sparingly and in the right places, which is why (as is the case with using multiple else if's ), it can sometimes lead to more readable code by using a switch statement instead.

It is advisable to use the ternary operator only in cases which include both if and else conditions, otherwise using an if block is recommended. Chaining ternary operators without care may cause unforeseen bugs.

12 Likes