JavaScript Ternary Operator with Examples

Ternary operator javaScript; Through this tutorial, i am going to show you in detail about javaScript ternary operators and how to use it.

JavaScript Ternary Operator

The ternary operator is a short way to declare a conditional statement and js ternary operator is the only operator that takes three operands.

For example, if the specified test condition met is true, then execute block of code.

var a = 2020;
if (a > 2021) {
    console.log('true');
} else {
   console.log('false');
}

Instead of js if-else statement, you can use the ternary operator.

See the following example:

var a = 2020;
var b = a > 2021 ? 'true' : 'false';
console.log(b)

When using ternary operator instead of if-else statement, code looks much cleaner.

Syntax of the ternary operator is as following:

condition ? expression_1 : expression_2;

As mention above, the JavaScript ternary operator is the only operator that takes three operands.

The condition is an expression that evaluates to a Boolean value, either true or false. If the condition is true, the ternary operator returns expression_1, otherwise, it returns the expression_2.

JavaScript ternary operator examples

1: Set default parameter

When you create a function and use the ternary operator inside the function. If you not pass any value in these functions, the ternary operator is to set default parameters of a function.

See the following example:

function foo(bar) {
    bar = typeof(bar) !== 'undefined' ? bar : 10;
    console.log(bar);
}
foo(); // 10
foo(20); // 20

In this example, if you don’t pass the bar parameter, its value is set to 10. Otherwise, the bar parameter uses its passed value, in this case, it is 20.

2: Perform multiple operations

It’s possible to perform multiple operations in each case of the ternary operator, each operation is separated by a comma. See the following example:

var authenticated = true;
var nextURL = authenticated ? (
    alert('You will redirect to admin area'),
        '/admin'
) : (
    alert('Access denied'),
        '/403'
);
// redirect to nextURL here
console.log(nextURL); // '/admin'

In this example, the returned value of the ternary operator is the last value in the comma-separated list.

3: Basic ternary operator

See the following example:

var a = 1;
var b = a != 1 ? true : false;

If the a is 1, then the b variable is set to false, otherwise, it is set to true.

4: Nested ternary operators in js

The following example shows how to use nested ternary operators in the same expression:

var speed = 90;
var message = speed >= 120 ? 'Too Fast' : (speed >= 80 ? 'Fast' : 'OK');
console.log(message);

It is a best practice to use the ternary operator when it makes the code easier to read. If the logic contains many if...else statements, you shouldn’t use the ternary operators.

Conclusion

In this tutorial, you have learned everything about JavaScript ternary operator.

JavaScript Ternary Operator with Examples