What is Ternary Operator in JavaScript?

Almost every programming language supports a ternary operator, including Java, JavaScript, C++, C#, and many more. Users can also term this operator a conditional operator as this operator is more concise compared to the conditional statement, i.e., if-else statement.

We will discuss the ternary operator and its uses with the following code snippets.

What is a Ternary Operator in JavaScript?

Operators are symbols that act upon operands when users call them. In other words, they are the constructs that can operate the value of operands.

The ternary operator is one of the widely used conditional operators. The "conditional" or "Question mark" operator in JavaScript is a ternary operator having three operands. It is the only operator in JavaScript that has three operands. These are:

A conditional operand, heeded by a question mark ( ? ), an expressional operand that executes if the condition becomes "true," followed by a colon ( : ), and ultimately, the expressional operand that executes if the condition becomes false. Since the operator performs based on the conditions of the expressions, it is called the conditional operator in JavaScript.

The conditional part, value if true, and value if false

The assessment of the conditions should result in either true or false or as a Boolean value.

The value of true will lie between "?" & ":" and is performed if the condition results as true. Similarly, the false value will lie after ":" and the interpreter executes the second part if the provided condition results in false.

Syntax:

condition ? value if true : value if false

Examples of code snippets of the if-else statement and the JavaScript ternary operator:

var a = 60;
if(a >= 30)
{
    console.log("The student has passed...");
}
else {
    console.log("The student has failed...");
}

Output:

Run Code

Using ternary operator:

var a = 60;
console.log(( a >= 30 ) ? "The student has passed" : "The student has passed failed" );

Output:

Run Code

Explanation:

As we can see, the above two codes make users clear with the concept that the ternary operator is much more efficient than the if-else statement of JavaScript. It is because the if-else statement executes and checks both the conditions by undergoing the two blocks of conditions consecutively, i.e., for the if and else blocks; individually.

It makes the code a little complex compared to the ternary operator, which ends in just one line.

Another example of the ternary operator is as follows:

    let demo = 93.76;
    let a = (demo <= 40) ? "The result is not satisfactory..." : 
             (demo <= 60) ? "The result is in an average..." :
             (demo <= 80) ? "The result is Good..." : "The result is Excellent..." ;
    document.write(a);

Output:

Run Code

Explanation:

Here, the three different conditions show the range of the result of a random student. The first condition tells whether the result lies between 0 to 40, the second for the range above 40 to 60.

The third condition shows two nested conditions, one with the result that has a range below 80 and the other above 80. We have 93.76 percent as the result that satisfies the last condition, i.e., the last condition with nested condition (within the ternary operator).

How to use the ternary operator in JavaScript?

Let us see the example to understand how the operator works:

let demo = "Steben Joseph";
demo ? console.log("Hey " + demo) : console.log("Hey " + "Guest");

Output:

Run Code

Explanation:

In the above code snippet, we can see that the ternary operator checks the condition based on the variable that we have called within the console.log function. It checks whether the variable we have called matches the variable we declared in the first statement.

If the condition satisfies, it executes the first part, i.e., executes the value for true, or else, it will execute the value as false.

Advantages of using the ternary operator in JavaScript:

Users can use this operator to make their code fast, efficient, short, and easy to read. So, users can handle multiple line expressions using the ternary operator.

Nested Ternary Operator In JavaScript:

Since users are familiar with the nested JavaScript if-else blocks and how it works, they can also use nested ternary operators. The nested ternary operators execute the conditions within another ternary operator.

var x = 3,
y = 12,
z = 10;
var demo1 = x >= y ? (x >= z ? x : z) : y >= z ? y : z;
console.log (demo1)

Output:

Run Code

Explanation:

Here, the nested ternary operator uses three conditions, out of which the condition that the expression will satisfy is the final output.

Difference between if-else statement and ternary operator:

Characteristics	Ternary Operator	If-else
Speed	The ternary operator is a statement in JavaScript, and a statement is faster than Block.	The if-else is a programming block.
Efficiency and readability	The ternary operator is more efficient and readable.	The if-else block makes the program lengthy and is less efficient when users need to use multiple-line conditional programs.
Usage	The Ternary Operator is inconvenient when users use several statements or a function.	For this, the if-else is more appropriate.

Conclusion:

In this guide, we have seen the functioning of the ternary operator and its difference with the if-else block. It might appear a little unnerving at the beginning of your JavaScript program, but after reading this guide, you can learn how both the ternary and nested ternary operator work.

So, you can know when to choose one over the other and when to use the if-else block and the conditional operator in JavaScript.