JavaScript Ternary Operator – How it works

What is Ternary Operator?

The word “Ternary” has derived from the Late Latin word ternarius (consisting of the three things), from terni (“three each”). It is the only operator in JavaScript that consists of three parts.

A ternary Operator or Conditional Operator is a kind of operator which works as an alternative to the if-else condition and is written in a single line. It is also known as shorthand if-else or inline if statement.

The Ternary Operator accepts three operands

1. User-defined condition followed by the question mark “?“.
2. True Expression -> If the condition specified is true then this part of the code will get executed followed by “:”
3. False Expression -> Else if the given condition is false then this part of the code gets executed

Syntax

Condition ? TrueExp : FalseExp

Let’s look into the Parameters of the Ternary operator

• Condition: Firstly, we need to write our expression that will be checked whether the given statement is true or false
• TrueExp: If the given statement or condition is true then the TrueExp part will get executed and returns the result.
• FalseExp: If it is false then the FalseExp part will get executed and returns the result.

⌚ for Hands-On

A Basic Example

let age = prompt(“Enter your age: “);
const votingAge = age >= 18 ? “Can Vote” : “Cannot Vote”;
console.log(You ${votingAge} in the elections);
Code language: JavaScript (javascript)

Output

Fun with NULL Values

What if someone gives a null value to the expression ?. Let’s check

const greet = (human) => {
const name = human ? human.name : “Buddy”;
return `Hola ${name}`;
}
console.log(greet({name : “Aman”}));
console.log(greet(null));
Code language: JavaScript (javascript)

Output

Nested Ternary Operator

Let’s look into the nested one as well. It is similar to the nested if-else condition i.e. if … else if … else

let num = prompt(“Enter any Integer: “);
let res = (num >= 0) ? (num == 0 ? “Zero” : “Positive”) : “Negative”;
console.log(res);
Code language: JavaScript (javascript)

Output

NOTE:- It is always recommended to avoid the nested ternary operator as it doesn’t look very clean which sometimes makes it hard to read.

Conclusion

In summary, Ternary Operator or Shorthand if-else operator or Inline if statement in JavaScript is a very common way to express the if-else condition in a single line yet very powerful that one must use it with some precautions.

Ternary Operator can make your code (if-else condition) very concise if used efficiently else it can lead to difficulty in maintaining, reading, and understanding the code. Hence it is always advised to maintain extra caution while using ternaries as its goal should not be only saving 2 to 3 lines of code else it should make the code simple and readable.