JavaScript Ternary Operator

What is a Ternary Operator?

In JavaScript, Ternary operators are also known as Conditional Operators, it also offers us a better approach to express conditional statements such as if else. It operates on three operands: a condition, a value to return if the condition is true, and a value to return if the condition is false.

Simply put, it helps to think of the ternary operator as a shorthand way of writing an if-else statement.

During coding in any language, we use various ways to handle conditional situations. The common one is the use of if statement; instead of using the if statement, we can use the ternary operator in JavaScript. The ternary operator assigns a value to the variable based on a condition provided to it.

It is the only operator in JavaScript that takes three operands. The working of this operator is the same as the if-else conditional statement. We can say that it is the shortcut of the if-else.

This operator includes three operands: a condition followed by a question mark (?) sign, and two expressions separated by the colon (:). The first expression is executed when the condition is true, and the second expression is executed when the condition is false.

Syntax

The syntax of the ternary operator in JavaScript is as follows:

Parameters

• Condition: It is an expression whose value is used as a condition.
• trueExpression: An expression that is executed if the condition evaluates to be true value.
• falseExpression: An expression that is executed if the condition is false.

Why Should You Use JavaScript Ternary Operator?

The JavaScript ternary operator is a concise way to write conditional expressions. Here are some reasons why you should use the ternary operator in JavaScript:

Conciseness

It allows us to express the conditional logic compact and readable, especially for the simple condition.

Readability

For simple conditions, we can use the ternary condition to make our code more readable by keeping the logic inline rather than breaking it into multiple lines for an if statement.

Avoid repetition

When we use the ternary operator it helps us to avoid repeating similar code blocks for different branches of a condition.

Functional style

In functional programming, it is preferred to use the ternary operator over the traditional if statement because it's more in line with the functional paradigm of avoiding mutable states.

Inline usage

It is particularly very helpful when we assign values to variables inline or when we need to evaluate a condition and return a value immediately without the need for a full if statement.

However, it is important to use the ternary operator wisely. We can make our code harder to read if the condition is too complex or if the result of the expression becomes complicated. In such cases, it's often better to use the traditional if statement for clarity.

Example

This is a simple example of checking whether the number is odd or even using the ternary operator. The result will display using the alert() dialog box.

Output

After the execution, the output will be -

Example 2:

Output

After the execution, the output will be -

Advantage of Ternary Operator in JavaScript

The ternary operator offers several advantages in JavaScript:

Efficiency

With the use of the ternary operator, we can make our code more efficient by performing conditional checks quickly and clearly.

Clarity

When we use it appropriately it can enhance the code clarity by expressing the condition and its results in a single line.

Simplified logic

The ternary operator helps us to simplify the decision-making logic and make it easier to understand and maintain.

The ternary operator is a valuable tool in JavaScript for handling conditional logic effectively and concisely.