The Ternary Operator

The if / else statement executes code. The ternary operator produces a value. That distinction matters because there are many places in JavaScript where you need a value — inside a template literal, as a function argument, in a variable assignment — and a statement does not fit there.

Syntax

The ternary operator has three parts, which is where the name comes from:

condition ? valueIfTrue : valueIfFalse

const tourAvailable = true;
const statusLabel = tourAvailable ? 'Available' : 'Sold Out';
console.log(statusLabel);  // 'Available'

Read it as: “if tourAvailable is truthy, give me 'Available'; otherwise give me 'Sold Out'.”

When to use it

Use a ternary when:

• The choice is binary (two outcomes)
• Each outcome is a simple value
• You need the result as an expression, not just a block to run

Do not use a ternary when:

• There are more than two outcomes
• Either branch has multiple steps or side effects
• Readability suffers

For complex multi-branch logic, else if is clearer. The ternary shines for simple, single-line choices.

Ternary vs if/else

The key conceptual difference:

// if/else — a statement; executes code
if (tourAvailable) {
  statusLabel = 'Available';
} else {
  statusLabel = 'Sold Out';
}

// ternary — an expression; produces a value
const statusLabel = tourAvailable ? 'Available' : 'Sold Out';

Both accomplish the same result here. The ternary is more concise and works inside expressions where a statement cannot go.

Ternary inside a template literal

This is the pattern you will use most often. A ${} placeholder accepts any expression — including a ternary:

const tourName = 'Cascade Ridge Hike';
const tourAvailable = true;

const summary = `${tourName} — ${tourAvailable ? 'Available' : 'Sold Out'}`;
console.log(summary);  // 'Cascade Ridge Hike — Available'

This produces the tour status label inline, without a separate variable or any if block. You will use this pattern in Module 05 when rendering tour cards to the DOM.

Nested ternaries

Ternaries can be nested, but the result is almost always unreadable:

// Possible but hard to follow
const label = price < 100 ? 'Budget' : price < 200 ? 'Mid-range' : 'Premium';

Do not write nested ternaries. If there are more than two outcomes, use an else if chain or a switch statement. Three lines of readable if/else is better than one line that requires rereading.

Exercise

const tourName = 'Cascade Ridge Hike';
let tourAvailable = true;

const statusLabel = tourAvailable ? 'Available' : 'Sold Out';
const summary = `Tour: ${tourName} — ${statusLabel}`;
console.log(summary);  // 'Tour: Cascade Ridge Hike — Available'

// Flip the flag and verify the other branch
tourAvailable = false;
const statusLabel2 = tourAvailable ? 'Available' : 'Sold Out';
console.log(`Tour: ${tourName} — ${statusLabel2}`);  // '...— Sold Out'

Also write the equivalent if/else version and compare the two side by side.

Recap

• The ternary operator condition ? valueIfTrue : valueIfFalse produces a value based on a condition.
• Use it for simple binary choices that produce a value — not for multi-branch logic or side effects.
• A ternary is an expression; if/else is a statement. Both have their place.
• ${condition ? 'yes' : 'no'} inside a template literal is the most common usage pattern.
• Nested ternaries destroy readability — prefer else if chains for anything beyond two outcomes.