Home › Courses › Ternary Operator Explained in Depth - Conditional Operator

Ternary Operator Explained in Depth - Conditional Operator

12 / 57

The ternary operator performs the same job as conditional statements (like if-else) that we studied earlier.


Why Do We Need Ternary Operator?

You might think:

If if-else already exists, why do we need another way?

The answer is:

  1. Ternary operator is shorter
  2. It makes code cleaner
  3. It is widely used in frameworks like React and Angular


What is a Ternary Operator?

A ternary operator is a short form of if-else used for decision making.

Syntax:


condition ? value_if_true : value_if_false


Simple Example

Using if-else:

let age = 20;

if(age > 18){
console.log("You are an adult");
}else{
console.log("You are a minor");
}


Using Ternary Operator:

let age = 20;

age > 18
? console.log("You are an adult")
: console.log("You are a minor");

Same result, but with fewer lines.


Better Example (Storing in Variable)

Using if-else:

let age = 30;
let message = "";

if(age > 18){
message = "You are an adult";
}else{
message = "You are a minor";
}

console.log(message);


Using Ternary Operator:

let age = 30;

let message = age > 18
? "You are an adult"
: "You are a minor";

console.log(message);

This looks cleaner and more readable.


Complex Example (Grading System)

Using if-else:

let score = 90;
let grade = "";

if(score > 80){
grade = "A";
}else if(score > 60){
grade = "B";
}else if(score > 40){
grade = "C";
}else if(score > 30){
grade = "D";
}else{
grade = "Fail";
}

console.log(grade);


Using Ternary Operator:

let score = 90;

let grade = score > 80 ? "A" :
score > 60 ? "B" :
score > 40 ? "C" :
score > 30 ? "D" :
"Fail";

console.log(grade);

This entire logic is written in one line.


Important Points

  1. Ternary operator is best for short conditions
  2. Avoid using too many nested ternary operators (it becomes hard to read)
  3. It is widely used in React and Angular


Common Mistakes

  1. Writing very complex nested ternary expressions
  2. Using ternary where if-else is clearer
  3. Forgetting readability

Bad example:

let result = condition1 ? value1 : condition2 ? value2 : condition3 ? value3 : value4;

This can become confusing for beginners.

Share this lesson: