JavaScript Ternary Operator is used in the place of if-else statement sometimes. It is also called the Conditional Operator sometimes. It does exactly the same thing as if-else statement and it’s syntax is also said to be smaller 😉.
Be sure to check out our JavaScript If-Else lesson before you jump on the ternary operator for better learning.
How Ternary Operator (Conditional Operator) works? 🤔
The Ternary Operator checks whether a certain condition is true, then it performs a certain task. It is the only operator in JavaScript that takes three operands.
The ternary operator is denoted by a question mark ? followed by a colon :.
It’s syntax is given below:
condition ? expression1 : expression2
- If the condition is true, then expression1 will run.
- If the condition is false, then expression2 will run.
Example
true ? console.log("This message will be displayed.") : console.log("This message will not be displayed.");
Output
This message will be displayed.
Some more Examples
var age1 = 18, age2 = 16;
// The first expression runs as age1 >= 18 is true
(age1 >= 18) ? console.log("You are qualified to drive") : console.log("You are not qualified to drive");
// The second expression runs as age2 >= 18 is false
(age2 >= 18) ? console.log("You are qualified to drive") : console.log("You are not qualified to drive");
Output
You are qualified to drive
You are not qualified to drive
Replacing If-Else with Ternary (Conditional) Operator 🤯
Here, we will take a look at how if-else statement can be replaced by a ternary operator resulting in a much cleaner code and smaller syntax.
Example with If-Else Statement
var weather = "rainy";
if (weather === "rainy") {
console.log("Let's not go outside because it's raining.");
} else {
console.log("Let's go outside.");
}
Output
Let's not go outside because it's raining.
Example with Ternary (Conditional) Operator 😎
var weather = "rainy";
weather === "rainy" ?
console.log("Let's not go outside because it's raining.") :
console.log("Let's go outside.");
Output
Let's not go outside because it's raining.
Nested Ternary (Conditional) Operator ⚡
We can also nest conditions just like we did in our JavaScript Nested If-Else lesson.
Example
var age = 16;
var message = (age > 13) ? (age >= 18 ? 'a Teenager and Eligible for driving.' : 'a Teenager') : 'a Kid';
console.log(`You are ${message}`);
Output
You are a Teenager
Chaining Ternary (Conditional) Operators 🔗
The JavaScript Ternary Operators can be “chained” 🔗 or added together to check conditions one after the another. It is an alternative to the If…Else If Statement.
Example
var num = 20;
(num > 100) ?
console.log("Greater than 100") :
num > 50 ?
console.log("Greater than 50") :
num > 10 ?
console.log("Greater than 10") :
console.log("Less than 100");
Output
Greater than 10
In this way, Ternary (Conditional) Operator in JavaScript help us write conditional statements in a concise and cleaner way.