Skip to main content

Ternary Operator

The Conditional (Ternary) Operator is the only JavaScript operator that takes three operands. It is frequently used as a one-line shortcut for the if...else statement, making your code significantly cleaner and more declarative.

info

The word "Ternary" literally means "composed of three parts."

The Syntax​

Instead of writing 5 lines of code for a simple "either/or" decision, the ternary operator lets you do it in one.

index.js
condition ? expressionIfTrue : expressionIfFalse;

Comparative Breakdown​

index.js
const age = 20;
let canVote;

if (age >= 18) {
  canVote = "Yes, you can vote!";
} else {
  canVote = "Not yet.";
}

console.log(canVote); // "Yes, you can vote!"

Why Use It?​

The Ternary operator isn't just about saving space. In modern JavaScript (especially in frameworks like React), it allows you to:

  1. Assign values directly to a constant.
  2. Embed logic inside Template Literals.
  3. Return values from arrow functions without explicit return blocks.

Use Case: Dynamic Template Literals​

const isPremium = true;

// Using ternary inside a string!
const welcomeMessage = `Welcome back, ${isPremium ? 'VIP Member' : 'Guest'}!`;

console.log(welcomeMessage); // "Welcome back, VIP Member!"

Interactive Playground​

Test how the ternary operator handles state changes. In this demo, we check a "User Status" and change the theme dynamically.

tip

Try changing the condition in the JS panel to check for a specific number or a boolean value to see how the UI updates instantly.

Common Pitfalls​

While powerful, don't abuse the ternary operator.

Ternary Hell

Avoid nesting ternaries too deeply. If your logic requires multiple levels of checks, a standard if...else or switch statement is much more readable.

Bad Practice:

index.js
const result = condition1 ? (condition2 ? 'A' : 'B') : (condition3 ? 'C' : 'D');
// ❌ This is hard to read and debug!

Quick Check​

index.js
const score = 85;
const grade = score > 90 ? "A" : "B";

What is the value of grade?

The value of grade is "B" because the condition score > 90 evaluates to false, so the expression after the colon ("B") is returned.