Ternary Operator in JavaScript

Ternary Operator in JavaScript | With the help of different cases and instances, you will study the ternary operator in JavaScript in this article. In some cases, a ternary operator can be used to substitute an if…else expression. 

What exactly is a Ternary operator in JavaScript?
A ternary operator analyzes a circumstance and then runs a piece of code depending on the outcomes of the evaluation.

Its syntax is as follows:-
condition? expression1: expression2

The test condition is evaluated by the ternary operator. If the criteria are fulfilled, expression1 is run. Expression2 is implemented if the condition becomes false.

The ternary operator requires three operands, hence the name. It is also referred to as a conditional operator. For example,

let age = 19;
let message;

if (age >= 18) {
   message = 'You can vote.';
} else {
   message = 'You cannot vote.';
}
console.log(message);

Output:-

You can vote.

n this case, we display a message telling that a user can vote if they are at least 18 years old. Instead of the if-else expression, you can use a ternary operator like this:-

let age = 19;
let message;

age >= 18 ? (message = 'You can vote.') :
    (message = 'You cannot vote.');

console.log(message);

Output:-

You can vote.

The syntax of the ternary operator employed in an expression is shown below:-
let variableName = condition ? expressionIfTrue : expressionIfFalse;

If the statement is fulfilled, the variableName will be the output of the first expression (expressionIfTrue), or it will be expressionIfFalse.

Ternary Operator in JavaScript Examples

Different places where the ternary operator can be used are given below along with examples.

1) Performing several statements with the ternary operator in JavaScript

The ternary operator is used in the following example to complete numerous operations, each separated by a comma. As an example:-

let permit = true;
let permitURL = permit
    ? (alert('Welcome to the home page!'), '/backend_edit')
    : (alert('Woops you cannot access the home page!'), '/error');

console.log(permitURL); 

Output:-

Welcome to the home page!
/backend_edit

In this case, the ternary operator returns the final value in the comma-separated sequence.

2) Example of a nested ternary operator in JavaScript

let a = 3;
// If the test scores are more than or 
// equal to 10 the result will be positive. 

let result = (a >= 10) ? (a == 0 ? "zero" : "positive") : "negative";
console.log(`The test is ${result}.`);

Output:-

The test is negative.

When feasible, avoid nested ternary operators because they render the code difficult to read.

3) An example of using numerous ternary operator in JavaScript

The following example demonstrates how to combine two ternary operators in a single expression:

let temperature = 32;
let message = temperature >= 100 ? 'Too Hot'
    : temperature >= 50 ? 'Hot' : 'Normal';
console.log(message);

Output:-

Normal

Thus, we are at the end of this article where we studied what is the ternary operator in JavaScript. We use the ternary operator (?:) to make the code more compact. Using the ternary operator in JavaScript is advisable whenever it helps the code easier to read, however, one should avoid utilizing ternary operators if your logic comprises a lot of if…else expressions.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!

Search