JavaScript Ternary Operator (? :): Conditional Expressions

Ternary Operator Fundamentals

The ternary operator (? :) evaluates a condition and returns one of two values based on result.

Syntax: condition ? valueIfTrue : valueIfFalse.

Most concise way to write simple if/else logic inline.

Only conditional operator that takes three operands.

Returns an actual value, not just a statement.

// Simple ternary condition
const age = 25;
const status = age >= 18 ? "adult" : "minor";
console.log(status); // "adult"

// With variables
const score = 85;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // "B"

// Function returns
function getStatus(age) {
  return age >= 18 ? "can vote" : "cannot vote";
}
console.log(getStatus(20)); // "can vote"
console.log(getStatus(15)); // "cannot vote"

// In JSX/React
const user = { premium: true };
const badge = user.premium ? "✓ Premium" : "";
console.log(badge); // "✓ Premium"

// Comparison to if/else
let message1;
if (score >= 50) {
  message1 = "pass";
} else {
  message1 = "fail";
}

// Same with ternary (more concise)
const message2 = score >= 50 ? "pass" : "fail";
console.log(message1 === message2); // true

Assignment and Variable Initialization

Most common use: assigning different values based on condition.

Cleaner than if/else for simple value assignment.

Works in const declarations for immutable defaults.

Can be used in function arguments.

Powerful in destructuring with defaults.

// Simple assignment
const age = 25;
const ticket = age < 65 ? 10 : 5;
console.log(ticket); // 10

// In const declaration
const user = { name: "Alice", role: "admin" };
const canDelete = user.role === "admin" ? true : false;

// Function parameters
function formatPrice(price, isPremium) {
  return isPremium ? "$" + price : price + " credits";
}
console.log(formatPrice(100, true));   // "$100"
console.log(formatPrice(100, false));  // "100 credits"

// Array element
const scores = [85, 92, 78];
const status = scores[0] >= 80 ? "pass" : "fail";
console.log(status); // "pass"

// Object property
const config = {
  debug: process.env.NODE_ENV === "development" ? true : false,
  timeout: process.env.TIMEOUT ? parseInt(process.env.TIMEOUT) : 5000,
  theme: localStorage.getItem("theme") ?? "light"
};

console.log(config);

// Multiple assignments
let result, message;
const value = 10;
result = value > 5 ? "high" : "low";
message = value > 5 ? "Value is high" : "Value is low";
console.log(result, message); // "high", "Value is high"

Nested Ternary Operators

Multiple ternary operators can be chained for complex logic.

Each true branch can contain another ternary operator.

Can become hard to read with too much nesting.

Alternative: use if/else or switch for complex logic.

Consider readability over cleverness.

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

// Temperature categorization
const temp = 25;
const comfort = temp < 10 ? "cold" : temp < 20 ? "cool" : temp < 30 ? "comfortable" : "hot";
console.log(comfort); // "comfortable"

// User permissions
const user = { role: "user", verified: true };
const access = user.role === "admin" ? "full" : 
               user.role === "moderator" ? "moderate" : 
               user.verified ? "limited" : "none";
console.log(access); // "limited"

// Nested with multiple conditions
const age = 25;
const income = 50000;
const loanEligible = age >= 18 ? 
  (income >= 30000 ? "approved" : "insufficient income") : 
  "too young";
console.log(loanEligible); // "approved"

// Complex but readable example
const status = age < 13 ? "child" : 
               age < 18 ? "minor" : 
               age < 65 ? "adult" : 
               "senior";
console.log(status); // "adult"

// When nesting gets too complex, use if/else instead
// Instead of this:
// const result = a ? b ? c ? d : e : f : g;
// Use:
let result;
if (a) {
  if (b) {
    result = c ? d : e;
  } else {
    result = f;
  }
} else {
  result = g;
}

Common Use Cases

CSS class assignment in React components.

Default values when nullish coalescing isn't sufficient.

String formatting based on conditions.

Array/object manipulation based on state.

Return statements with conditional logic.

// React className assignment
const isActive = true;
const className = isActive ? "btn btn-active" : "btn btn-inactive";
console.log(className); // "btn btn-active"

// Template object
const user = { name: "John", premium: true };
const userCard = {
  title: user.premium ? "✓ Premium Member" : "Member",
  badge: user.premium ? "gold" : "silver",
  limit: user.premium ? 1000 : 100
};
console.log(userCard);

// String formatting
const count = 5;
const message = count === 1 ? "1 item" : count + " items";
console.log(message); // "5 items"

// Array filtering based on condition
const items = [1, 2, 3, 4, 5];
const isEvenFilter = (n) => n % 2 === 0;
const filtered = items.filter(n => 
  isEvenFilter(n) ? true : false
);

// Simpler:
const filtered2 = items.filter(n => isEvenFilter(n));
console.log(filtered2); // [2, 4]

// Default values
const userName = userInput ?? "Guest";
const userDisplay = userName ? userName : "Anonymous";

// Conditional array elements
const buttons = [
  { label: "Home", url: "/" },
  { label: "About", url: "/about" },
  ...(user.isAdmin ? [{ label: "Admin", url: "/admin" }] : [])
];

console.log(buttons);

// Ternary in return statement
function canAccess(user) {
  return user.authenticated && user.role === "admin" ? 
    "full access" : 
    user.authenticated ? 
    "limited access" : 
    "no access";
}
console.log(canAccess({ authenticated: true, role: "admin" })); // "full access"

When NOT to Use Ternary

Complex nested logic: use if/else or switch instead.

Side effects: ternary for values, not statements.

Multiple conditions: if/else clearer than deep nesting.

Readability: when unclear at first glance, use if/else.

Team preference: follow project conventions.

// BAD: Complex ternary (hard to read)
const result = a ? b ? c ? d : e : f ? g : h : i ? j : k;

// GOOD: Use if/else for complex logic
let result;
if (a) {
  if (b) {
    result = c ? d : e;
  } else {
    result = f ? g : h;
  }
} else {
  result = i ? j : k;
}

// BAD: Side effects in ternary (don't do this)
isAdmin ? console.log("Admin access") : console.log("Limited access");

// GOOD: Use if/else for side effects
if (isAdmin) {
  console.log("Admin access");
} else {
  console.log("Limited access");
}

// BAD: Ternary with no clear benefit
const isValid = validateEmail(email) ? true : false;

// GOOD: Assign the validation result directly
const isValid = validateEmail(email);

// GOOD: Ternary for simple value choice
const message = isValid ? "Email is valid" : "Invalid email";

// BAD: Multiple side effects
const status = 
  age < 18 ? (alert("Too young"), "minor") : 
  age < 65 ? (log("Adult"), "adult") : 
  (log("Senior"), "senior");

// GOOD: Use if/else
let status;
if (age < 18) {
  alert("Too young");
  status = "minor";
} else if (age < 65) {
  log("Adult");
  status = "adult";
} else {
  log("Senior");
  status = "senior";
}

Best Practices

Use for simple, single-line conditions.

Keep ternary operators readable and scannable.

Combine with nullish coalescing (??) for defaults.

Use parentheses in complex expressions.

Prefer if/else over deeply nested ternary operators.

Document non-obvious ternary logic.

Common Pitfalls

• Deeply nested ternary operators: Use if/else or switch for complex multi-way logic. Ternary is for simple true/false choices.
• Using ternary with side effects: Ternary is for value selection. Use if/else for statements and side effects.
• Returning true/false unnecessarily: Don't use: isValid ? true : false. Just use: isValid.
• Not using parentheses for clarity: Add parentheses in complex expressions: (a && b) ? c : d.
• Chaining ternary without readability: Use formatting and line breaks to keep nested ternary readable.
• Overusing ternary when if/else is clearer: Readability matters more than conciseness. Use what your team can understand.
• Forgetting ternary returns a value: Ternary must be assigned or used in an expression, not as a statement.

Frequently Asked Questions