What is Conditional Operator (?:) in JavaScript?

JavascriptWeb DevelopmentFront End Technology

This tutorial will teach us about the conditional operator (?:) in JavaScript.

The conditional operator is also called the ternary operator, containing the 3 parts. The first part contains the condition and executes the second part if the condition evaluates the true; Otherwise, it executes the third part.

In other words, the conditional operator or ternary operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation.

Users can write the single or multiple conditional statements using the if-else statement as given below.

If (condition) {
   // some executable code
} else {
   // some code
}

The above-given code is the old way to write the conditional statement and is not much readable. So, users can follow the syntax below to use the ternary operators to write conditional statements.

Syntax

Condition ? First statement : Second statement

In the above syntax, there are 3 operands. The first operand is the condition written before the question mark (?), and in the same way, the second operand is written between the question mark (?) and colon (:) and the third operand is written after the colon (:).

Parameters

  • Condition − It is a conditional statement.

  • First Statement − If the conditional statement evaluates true, First Statement will be executed.

  • Second Statement − If the conditional statement evaluates false, the Second statement will be executed.

Example 1

You can try to run the following code to understand how Ternary Operator works in JavaScript

<html> <body> <script> var a =10; var b =20; varlinebreak = "<br />"; document.write ("((a > b) ? 100 : 200) => "); result =(a > b) ? 100 : 200; document.write(result); document.write(linebreak); document.write ("((a < b) ? 100 : 200) => "); result =(a < b) ? 100 : 200; document.write(result); document.write(linebreak); </script> </body> </html>

Example 2

We are comparing the two strings in the example below, which will work as a condition of the ternary operator. If both strings are the same, the ternary operator will print the first statement; otherwise, it will print the second statement.

<html> <body> <h2>Using the <i>ternary (? :)</i> operator to write the condtional statements</h2> <p id = "output"> </p> <script> let output = document.getElementById("output"); let str = "TUTORIALSPOINT"; output.innerHTML += "tutorialspoint" == str ? "tutorialspoint and TUTORIALSPOINT is same. " : "tutorialspoint and TUTORIALSPOINT is not same. <br/> " output.innerHTML += "TUTORIALSPOINT" == str ? "tutorialspoint and TUTORIALSPOINT is same. " : "tutorialspoint and TUTORIALSPOINT is not same. " </script> </body> </html>

Creating the conditional chains using the ternary (? :) operator

Have you ever written conditional chains with the if-else statement like the one below?

if (condition 1) {
   // some code
} else if (condition 2) {
   // some code
} else {
   // some code
}

As users can see, the above if-else statement for the conditional chains is not much readable, so we can use the ternary operator to make its syntax easy and readable.

Users can follow the syntax below to create the conditional chains using the ternary operator.

Syntax

let output = condition 1 ? first statement : condition 2 ?
             second statement : condition 3 ? third statement :
             fourth statement;

We have written the 3 different conditions and multiple statements in the above syntax, which will be executed according to the truth value of any of the given conditions. The above syntax will give the same result as the if-else conditional chains.

Example

We have declared the number variable in the below example and checking its value is less than a particular number or not using the conditional chains of the ternary operator.

<html> <body> <h2>Using the <i>ternary (? :)</i> operator to write the condtional chains</h2> <p id = "output"> </p> <script> let output = document.getElementById("output"); let num = 40; output.innerHTML = "num is "; output.innerHTML += num < 10 ? "less than 10" : num < 20 ? "less than 20" : num < 30 ? "less than 30" : num < 40 ?"less than 40" : "less than 50"; </script> </body> </html>

We have learned to use the ternary operator in different use cases. Users can use it to create a single conditional statement or chains of the conditional statement, and we have seen that via example also in this tutorial.

raja
Updated on 31-Oct-2022 12:00:15

Advertisements