Files
freeCodeCamp/guide/english/javascript/ternary-operator/index.md
Manas Khurana f09eb76794 Remove redundant text + common names + change ambiguous text (#23564)
1. Running functions using ternary already has another portion to itself. So, the description before it is repetition of the same thing, hence redundant.
2. The warning for using the operator sparingly is mentioned twice, hence it is also redundant code
3. In multiple places, terms that have specific meaning in programming languages are used which can cause ambiguity in the mind of the reader.
4. Ternary operator is also often referred to as the conditional operator, which was missing here.
2018-12-05 07:26:56 -06:00

2.3 KiB

title
title
Ternary Operator

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.

Read more: MDN