JavaScript ternary operator is frequently used as a shortcut for the if statement. It’s a one-line shorthand for an if-else statement and is also called the conditional operator in JavaScript.
The ternary operator is the only JavaScript operator that takes three operands. First condition is followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy.
Syntax
condition ? exprIfTrue : exprIfFalseParameters values
condition:expression whose value is used as a condition.exprIfTrue: Value or expression on true condition.exprIfFalse: Value or expression on false condition.
Example of JavaScript ternary operator
Let’s see the example of how to use the ternary operator as the shortcut for the if-else statement in JavaScript
<html>
<head>
<title>Sample Code</title>
<script type="text/javascript">
var age = 19;
var canDrive = age > 16 ? 'YES' : 'No';
alert(canDrive)
</script>
</head>
</html> Output:
Ternary operator multiple conditions JavaScript
The ternary operator seems more appropriate since you have fewer conditions, although an if would be much easier to read on Multiple conditions.
If-else statement for multiple conditions
String year = "senior";
if (credits < 30) {
year = "freshman";
} else if (credits <= 59) {
year = "sophomore";
} else if (credits <= 89) {
year = "junior";
}Contrast this with the ternary operator:
String year = credits < 30 ? "freshman" : credits <= 59 ? "sophomore" : credits <= 89 ? "junior" : "senior";Nested ternary operator JavaScript
You must search first What is an Alternative to the nested ternary operator in JS? Because the nested ternary operator is a very complicated expression.
Here are alternatives:-
- That
if/elseyou don’t want to do - A
switchcombined withif/else
JavaScript ternary shorthand
use ||. Unlike PHP, JavaScript’s || operator will return the first non-falsy value, not a normalized Boolean.
foo || 'world'Ternary operator without else in JavaScript
First of all, a ternary expression is not a replacement for an if/else construct – it’s equivalent to an if/else construct that returns a value. That is, an if/else clause is code, and a ternary expression is an expression, meaning that it returns a value.
Code for without else:-
var x = condition || null;Do comment if you have doubts or suggestions on this topic.
Note: The All JS Examples codes are tested on the Safari browser (Version 12.0.2) and Chrome.
OS: macOS 10.14 Mojave
Code: HTML 5 Version