JavaScript Ternary Operator

What is Ternary Operator in JavaScript?

Ternary Operator in Javascript is a special operator which has three operands. In JavaScript, there is only one such operator, and that is the Conditional Operator or the Question Mark Operator( ?: )

This operator is used to write a conditional block in a simpler form and also can be written inside an expression or a statement; that’s why this operator is also known as the inline-if operator.

Ternary Operator Syntax

After a short introduction on what is the ternary operator and a basic example of it, let's dive into its syntax.

Syntax

The ternary operator is basically a combination of a question mark and a colon. To use this operator, you need to write a conditional expression, followed by a question mark (?).

Then you need to provide two statements or expressions separated by a colon. The first expression ( expression_if_true ) evaluates when the condition results in a true value, and the second expression ( expression_if_false ) evaluates when the condition results in a false value.

Ternary Operator Examples

So, after having some knowledge of how the Ternary Operator works, let's see some examples to get more idea of it.

Example 1:

Suppose you want to check if a person passed or failed an examination. This is how the if-else block would look like:

Using the Ternary Operator, we can write the above block in just one line.

In both cases, the output is:

Example 2:

In this example we will explain about Ternary Chaining. Just like if - else if....else if - else chain, we can also chain Ternary Operator in Javascript.

Chaining of if-else block:

Chaining of Ternary Operator:

Here, we write another ternary statement in the place of "expression_if_false". We can add as many ternary operators as needed.

let's implement chaining in an example:

Suppose you want to check the air quality of an area. So, you have the air quality index, and you have to write the code to check how unhealthy the area is.

Using if-else block one would write:

Using Ternary Operator:

Value of result for both the codes:

Why Use the Ternary Operator in JavaScript?

It is used to make our code short and simpler.

For example: Suppose you want to check if a person is eligible to vote or not; you will write something like this:

The output of the above code will be Eligible. But, using the ternary operator, the code becomes very short and readable in simple cases:

In both cases, the output will be the same ,i.e, Eligible.

Nested Ternary Operator in JavaScript

Similar to nested if-else blocks, we can also use nested ternary operators. i.e., we can use ternary operators within another ternary operator.

Suppose you want to find the largest of three numbers.

Using the if-else block:

Using the Ternary Operator in Javascript:

Basically, one can convert any if-else block to a ternary operator statement. But, converting complex if-else blocks is not recommended, as it will make it harder for someone to read.

Checking Null Values in JavaScript

Ternary Operator can also be used to check null values in JavaScript.

The following values get converted to false in JavaScript:

• null ;
• NaN ;
• 0 ;
• empty string ( "" or '' or `` );
• undefined .

Using the Ternary Operator in Javascript, we can handle these cases easily.

For example:

The output of the above code is:

Explanation: In the first console statement, we pass "Mark" to the function. So, the value of the variable name is "Mark". This variable has a value other than empty string, null, and NaN, this results in true condition. Thus returning the expression_if_true statement, which is "name".

In the second console statement, we pass no arguments to the function. So the value of the variable "name", remains undefined. This results in a false condition. Thus returning the expression_if_false statement, which is "No argument was passed".

Browser Compatibility

The below table explains that what is the minimum version of a specific browser required to support ternary operator: