JavaScript Ternary Operator

The JavaScript ternary operator is useful when you need a conditional value, not when you want a smaller-looking if statement. That distinction keeps the operator readable. A ternary should answer one question and return one of two values. When it starts doing work, calling functions for side effects, or nesting three levels deep, it has overstayed its welcome.

The syntax is:

condition ? valueIfTrue : valueIfFalse

The value problem

An if statement does not produce a value. It runs a block.

let label;

if (isLoggedIn) {
  label = "Account";
} else {
  label = "Sign in";
}

That code is fine, but the variable has to be declared first and assigned later. A ternary lets the conditional logic live where the value is created:

const label = isLoggedIn ? "Account" : "Sign in";

This is the best use case: a small binary choice where the output is a value.

Ternaries are expressions

Because a ternary is an expression, you can use it anywhere JavaScript expects a value:

const accessLevel = role === "admin" ? "full" : "limited";

const message = `Status: ${isOnline ? "online" : "offline"}`;

button.disabled = isSubmitting ? true : false;

That last line can be simplified:

button.disabled = isSubmitting;

A ternary is not automatically better just because it is shorter. If the condition already gives you the boolean you need, use the boolean.

Truthy and falsy conditions

The condition is tested using JavaScript truthiness:

const displayName = username ? username : "Guest";

If username is an empty string, null, or undefined, the result is "Guest". If username is "Ada", the result is "Ada".

That can be right or wrong depending on the data. If 0 is a valid value, a truthy check may be too broad:

const countLabel = count ? `${count} items` : "No items";

When count is 0, this returns "No items". That may be fine. In a different context, 0 might be a meaningful value you should display. For the full coercion rules, see Truthy and Falsy Values.

Good ternary examples

Ternaries work well for display labels:

const statusText = isPublished ? "Published" : "Draft";

They work well for small return values:

function getDiscount(isStudent) {
  return isStudent ? 0.2 : 0;
}

They also work inside map when each item becomes one of two possible values:

const rows = users.map((user) => ({
  id: user.id,
  label: user.active ? user.name : `${user.name} (inactive)`,
}));

In each case, the ternary returns a value. It does not perform an action.

Do not use ternaries for side effects

This is legal JavaScript:

isLoggedIn ? redirectToDashboard() : showLoginModal();

It is also the wrong shape. The point of the code is to do one of two actions. An if statement communicates that directly:

if (isLoggedIn) {
  redirectToDashboard();
} else {
  showLoginModal();
}

The difference is not moral. It is about reading. Ternaries read as value selection. if statements read as branching behavior.

Nested ternaries need suspicion

Nested ternaries are not forbidden, but they get hard to scan quickly:

const color = isError ? "red" : isWarning ? "orange" : "green";

That version is still small enough to survive. Formatting helps:

const color = isError
  ? "red"
  : isWarning
    ? "orange"
    : "green";

If the logic grows, use if or switch:

function getStatusColor(status) {
  switch (status) {
    case "error":
      return "red";
    case "warning":
      return "orange";
    case "success":
      return "green";
    default:
      return "gray";
  }
}

The Switch Statements guide covers that shape.

Common mistakes

Both branches are required:

const label = isActive ? "Active";
// SyntaxError

If you only need to run something when a condition is true, use if:

if (isActive) {
  showBadge();
}

Do not confuse && with a full replacement for ternary logic:

const label = isActive && "Active";

When isActive is false, label becomes false, not an empty string. That can leak into UI output or data structures if you are not careful.

Key Takeaways

• Use a ternary when you need one of two values.
• Use if when you need one of two actions.
• Keep ternaries small enough to read without mentally reformatting them.
• Remember that the condition uses truthy and falsy rules.
• If the branches keep growing, promote the logic to if, switch, or a named helper.