How to use multiple ternary operators in a single statement in JavaScript?

JavascriptProgramming ScriptsWeb DevelopmentFront End Technology

In this article we will get to know about JavaScript ternary operator and how to use multiple ternary operators in a single statement. First, we will understand the ternary operator and then move on to the multiple ternary operators.

Ternary Operators in JavaScript

Ternary operator is an operator that we can say as a shorten form of if-else conditional statement, but rather than two it takes three operands.

We use ternary operator to write multiline conditional statement block into a simple one-liner form, so this is the reason this operator also called as inline-if operator.


var result = Condition? Expression_if_true: Expression_if_false

Let’s see how we write our conditional statement using if-else

Example 1

<!DOCTYPE html> <html> <body> <script> var num=10 if(num==14) document.write("Yes equal"); else document.write("Not equal"); </script> </body> </html>

Here if our num variable is equal to 14 as given in if statement then our output will be Yes equal else our output would be Not equal.

As you can see, we are using multiline statement to do this operation, which can easily be done in one line statement using ternary operator.

Let’s make the same program using ternary operators

<!DOCTYPE html> <html> <body> <script> var num=10; var output= (num===14)?"Yes equal": "Not equal"; document.write(output) </script> </body> </html>

So, you can observe we’ve made the multiline statement into one.

Example 2

<!DOCTYPE html> <html> <body> <script> var string ="You" var num=100 if(num>=100) string= string+" did it."; else string=string+" didn't."; document.write(string); </script> </body> </html>

Let’s make it one liner using ternary operator

<!DOCTYPE html> <html> <body> <script> var string ="You" var num=100 string+= (num>=100)?" did it" :" didn't"; document.write(string); </script> </body> </html>

Multiple Ternary Operators in a Single Statement

Ternary operator can also be use in the nested statement where we can avoid a lot of multiline statement and can make all that working in single line statement.

Example 1

Let’s see using an example −

<!DOCTYPE html> <html> <body> <script> var num=175 var winner="None"; if(num>=100){ if(num>200){ winner="Josephus" } else{ winner="Jenny" } } else{ if(num<50){ winner="Mohan" } else{ winner="Shital" } } document.write(winner) </script> </body> </html>

So here we entered the first if block as number is >=100 and inside the first block we fall into else part as num given is lesser than 200 so, Jenny is winner.

So, in this program we have so many multiline statements. Now, let’s make the same program using ternary operator.

<!DOCTYPE html> <html> <body> <script> var num=175 var winner="None"; winner= num>=100?(num>200?"Josephus":"Jenny"):(num<50?"Mohan":"Shital"); document.write(winner) </script> </body> </html>

Example 2

<!DOCTYPE html> <html> <body> <script> var age=17; var status="" if(age>14){ if(age>=18){ status="Adult"; } else { status="Teenager"; } } else { if (age > 0){ status="Child"; } else { status="Oops can’t decide ☹"; } } document.write(status); </script> </body> </html>

Let’s make the same program using ternary operator

<!DOCTYPE html> <html> <body> <script> var age=16 var status= age>14?(age>=18?"Adult":"Teenager"):(age>0?"Child":"Oops can’t decide"); document.write(status) </script> </body> </html>

So, from both above examples you can observe that we have reduced multiline if-else conditional statement into one line statement using ternary operator.

Hope you got the idea behind using multiline ternary operator in JavaScript.

Updated on 11-Oct-2022 08:38:33