Updated March 27, 2023
Introduction to Ternary Operator JavaScript
While coding in any language, we use multiple ways for handling conditional situations. The most commonly used conditional statement is ‘if’. In javascript, We can use ‘if’,”if-else”,”if-else if” ladder, etc. One of the most compact conditional expression use in javascript is the ternary operator. It is compact because mostly the condition is represented in a single-line statement. We can use this instead of the ‘if’ statement in javascript.
The ternary operator is most frequently used to check the null conditions and handle them or, in other cases, situations where we want to perform certain code on fulfilling some condition and otherwise perform some other code. The if-else ladder working can also be replaced with a ternary operator as it is right-associative. We can nest one ternary operator inside other and so on according to our requirement, which is called chaining. This article will learn all these things about the ternary operator and how we can use it to achieve our purpose while coding.
Syntax
Below is the syntax for the Ternary Operator:
condition ? expressionIfTrue : expressionIfFalseAs can be seen, the ternary operator consists of three operands inside it. This is the only operator that takes three operands in javascript.
- Condition: The first operator is the conditional expression whose evaluated resultant value is used to decide which code will execute.
- ExpressionIfTrue: The second operator is the expression or code that will execute if the first parameter’s condition evaluates to true result or equivalent of true (for example, 1).
- ExpressionIfFalse: The third operator is the expression or code that will execute if the condition mentioned in the first parameter evaluates to false result or the equivalent of false (for example 0, null, undefined, blank string(“ ”), NAN).
The above syntax is internally similar to working of the following if-else statement:
Syntax:
if ( Condition ) {
Expression If True;
} else {
Expression If False;
}The output of both the above syntax and ternary operator syntax being used will result in the same resultant/same code execution.
Example to Implement Ternary Operator in JavaScript
Let us see how we can use this ternary operator while coding in JavaScript:
Example #1
Consider one example where we want to cut the fair of the ticket, which is separate for children and adults. Children below the age of 13 should be charged Rs. 100 while all the adults and children above age 13 should be charged Rs. 200 for a particular occasion. Let us code for the same in javascript.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Demonstration for ternary operator in javascript</h1>
<p>The fair charged for the person below 13 years of the age should be Rs.100 while for all others it should be Rs.200.</p>
<p>Enter the age of the person for whom fair charge is to be evaluated</p>
<input id="personAge" value="12" />
<button onclick="myFunction()">Get the fair charges</button>
<p id="sampleDemo"></p>
<script>
function myFunction() {
var currentAge = document.getElementById("personAge").value;
var chargesMessage = (currentAge < 13) ? "Rs.100 Should Be Charged.":"Rs.200 Should Be Charged.";
document.getElementById("sampleDemo").innerHTML = chargesMessage;
}
</script>
</body>
</html>Output:
- The output of the above code when we enter age less than 13 and click on the “Get the fair charges” button is as follows-
- The output of the above code when we enter age greater than or equal to 13 and click on the “Get the fair charges” button is as follows-
Example #2
Now let us see what will be the output when a simple if-else statement is used in the above example instead of the ternary operator.
Code:
<!DOCTYPE html>
<html>
<body>
<h1>Demonstration Using if-else Statement</h1>
<p>The fair charged for the person below 13 years of the age should be Rs.100 while for all others it should be Rs.200.</p>
<p>Enter the age of the person for whom fair charge is to be evaluated</p>
<input id="personAge" value="12" />
<button onclick="myFunction()">Get the fair charges</button>
<p id="sampleDemo"></p>
<script>
function myFunction() {
var currentAge = document.getElementById("personAge").value; if(currentAge < 13){
var chargesMessage = "Rs.100 Should Be Charged.";
}else{
var chargesMessage = "Rs.200 Should Be Charged.";
}
document.getElementById("sampleDemo").innerHTML = chargesMessage;
}
</script>
</body>
</html>Output:
- The output of the above code when we enter age less than 13 and click on the “Get the fair charges” button is as follows-
- The output of the above code when we enter age greater than or equal to 13 and click on the “Get the fair charges” button is as follows-
As can be seen, both the ternary operator and is-else statement return the same output and function in a similar fashion.
Chained Ternary Operator
As discussed previously, the ternary operator is right-associative, which means it can be further extended and nested on the right side. This is called as Chaining of ternary operators. The chained ternary operator is very much similar if-else ladder. Let us see how it can be implemented and the if-else ladder’s output and chained ternary operator in a single example.
Code:
<!DOCTYPE html> <html> <body>
<h4>Demonstration for chained ternary operator and if-else ladder in javascript</h4>
<p id="sampleDemo1"></p>
<p id="sampleDemo2"></p>
<script>
var achievedGrade;
var achievedMarks = 75;
if (achievedMarks < 35)
{
achievedGrade = 'Fail';
}
else if (achievedMarks < 65)
{
achievedGrade = 'Pass'
}
else if (achievedMarks < 85)
{
achievedGrade = 'Distinction'
}
else
{
achievedGrade = 'High Distinction';
}
document.getElementById("sampleDemo1").innerHTML = "Using if-else ladder,output is "+achievedGrade;
var achievedGrade2 = (achievedMarks < 35) ? 'Fail' : (achievedMarks < 65) ? 'Pass' : (achievedMarks < 85) ? 'Distinction' : 'High Distinction';
document.getElementById("sampleDemo2").innerHTML = "Using ternary operator,output is "+achievedGrade2;
</script>
</body>
</html>Output:
- The output of the above code is as follows –
- If the achieved marks are changed to 60, then the output of the above code is as follows –
It can be seen that it gives the same output for both the chained ternary operator and the if-else ladder.
Recommended Articles
This is a guide to Ternary Operator JavaScript. Here we discuss Syntax, examples to implement ternary operators in JavaScript with proper codes and outputs. You can also go through our other related articles to learn more –
