Chaining Ternary Operators in JavaScript Tutorial

Chaining ternary operators lets you write else if logic as a single expression. Instead of multiple if statements, you connect ternaries so each : leads into the next condition.

javascript

const score = 78;
 
const grade = score >= 90 ? "A"
            : score >= 80 ? "B"
            : score >= 70 ? "C"
            : "F";
 
console.log(grade); // "C"

This chain reads like an else if: "If 90 or above, A. Otherwise, if 80 or above, B. Otherwise, if 70 or above, C. Otherwise, F." The formatting makes the logic scannable.

How Chaining Works

Stripped of any specific condition, a chained ternary is really just one ternary nested inside the false branch of another, repeated as many times as you need. A chained ternary follows this structure:

javascript

condition1 ? value1
: condition2 ? value2
: condition3 ? value3
: fallbackValue

Each ? introduces a new condition and its matching value. Each colon either leads to the next condition or, at the end, provides the final fallback.

JavaScript evaluates this left to right:

• Check condition1. If true, return value1 and stop.
• Otherwise, check condition2. If true, return value2 and stop.
• Otherwise, check condition3. If true, return value3 and stop.
• If nothing matched, return fallbackValue.

Formatting Makes the Difference

The difference between a readable chain and a mess is formatting. Compare:

javascript

// Unreadable: everything on one line
const grade = score >= 90 ? "A" : score >= 80 ? "B" : score >= 70 ? "C" : "F";
 
// Readable: each condition on its own line, colons aligned
const grade = score >= 90 ? "A"
            : score >= 80 ? "B"
            : score >= 70 ? "C"
            : "F";

The second version mirrors the visual structure of an else if chain. Each line is one condition and one outcome, and the final colon holds the fallback.

When Chaining Beats else if

A chained ternary is an expression, which means it works in places where if statements cannot go:

Inside a return statement

javascript

// Chained ternary: direct return
function getTicketPrice(age) {
  return age < 5 ? "Free"
       : age < 13 ? "$8"
       : age < 65 ? "$15"
       : "$10";
}

The equivalent with if needs early returns instead of a single expression, since a plain if statement cannot produce a value on its own:

javascript

// if/else: needs a variable and multiple lines
function getTicketPrice(age) {
  if (age < 5) return "Free";
  if (age < 13) return "$8";
  if (age < 65) return "$15";
  return "$10";
}

Both are readable. The ternary version puts the entire logic in one expression. The if version uses early returns. Choose the style that fits your codebase.

Inside JSX or template literals

In React, you cannot write if statements inside JSX, but a chained ternary works because it is an expression:

javascript

<div className={
  status === "online" ? "green"
  : status === "away" ? "yellow"
  : status === "offline" ? "gray"
  : "black"
}>

As a const initializer

A chained ternary also fits naturally into a const declaration, since the whole assignment happens in one step:

javascript

const direction = key === "ArrowUp" ? "up"
                : key === "ArrowDown" ? "down"
                : key === "ArrowLeft" ? "left"
                : key === "ArrowRight" ? "right"
                : null;

Using const with a chained ternary means the variable is assigned once and never changes, which is cleaner than a let variable that gets reassigned inside an if chain.

When to Stop Chaining

The limit is readability, not syntax. Here are the warning signs:

• More than three levels: if you have four or more ? operators, switch to if/else if or switch.
• Complex conditions: if each condition is more than a simple comparison, the chain becomes hard to parse.
• Mixed logic: if some branches do more than return a value (function calls, object mutations), use if/else.

javascript

// Too much: hard to scan, easy to misread
const message = isError ? (code === 404 ? "Not Found" : code === 500 ? "Server Error" : "Unknown Error") : isPending ? "Loading..." : isSuccess ? "Done" : "Idle";

Splitting the outer conditions into if/else if while keeping the small inner ternary makes the structure much easier to scan:

javascript

// Better as if/else if
let message;
if (isError) {
  message = code === 404 ? "Not Found" : code === 500 ? "Server Error" : "Unknown Error";
} else if (isPending) {
  message = "Loading...";
} else if (isSuccess) {
  message = "Done";
} else {
  message = "Idle";
}

The fix does not have to be all if/else. Notice that the inner ternary for error codes is fine as a small chain. The problem was nesting one chain inside another. For basic ternary syntax, see the ternary operator guide.

The Golden Rule

Read your chained ternary out loud. If it sounds like a clear sentence, keep it. If you trip over the logic, rewrite it.

javascript

// Reads like a sentence: good chain
const label = isEmpty ? "No items" : count === 1 ? "1 item" : `${count} items`;
 
// Reads like a puzzle: use if/else instead
const action = hasAdmin && !isBanned ? "promote" : hasAdmin && isBanned ? "unban" : !hasAdmin && isOwner ? "request" : "view";

The first chain answers one question clearly ("what label do I show?"). The second chain mixes different variables and conditions across branches. If you need to reread a chain to understand it, rewrite it as if/else if. For more on writing clean conditional logic, see the else if chaining guide.