Platform under construction

Operators & Expressions

Intermediate

Ternary Operator

The ternary operator chooses between two expressions. It is perfect for small value choices and terrible for hidden complex logic.

const label = isReady ? "Open editor" : "Complete setup";

button.textContent = label;

Operators & Expressions

Use the ternary operator for simple either-or values.

The conditional operator is the only JavaScript operator with three operands: condition ? expressionIfTrue : expressionIfFalse.

It is an expression, so it produces a value. That makes it useful inside assignments, template strings and rendering logic.

The danger is nesting. If a ternary becomes a mini-program, use if/else or a named function instead. Readability wins.

condition

The question that is converted to true or false.

true branch

The expression returned when the condition is truthy.

false branch

The expression returned when the condition is falsy.

expression result

The whole ternary returns one value.

Examples

Operators are small symbols with big consequences.

Simple value selection

const hasCompletedSetup = true;
const buttonLabel = hasCompletedSetup ? "Open dashboard" : "Complete setup";

button.textContent = buttonLabel;

Nested ternary that nobody wants to debug

const label = score > 90 ? "Excellent" : score > 70 ? "Good" : score > 50 ? "Okay" : "Try again";

// Legal, but hard to scan quickly.

Rules that matter

Make expression intent visible.

JavaScript operators are compact, but compact is not always clear. Convert values before comparing or calculating, use strict checks by default and add parentheses when a future reader would otherwise need to remember a precedence table.

Use it for one clear choice

A ternary should answer one simple question.

Keep both branches short

Long branches belong in variables or functions.

Avoid deep nesting

Use if/else or a lookup object when there are many cases.

Name the condition

const canSubmit = ... makes the ternary easier to read.

Return values, not side effects

A ternary should choose a value, not perform hidden work.

Format multiline ternaries carefully

Line breaks can make a ternary readable when the pieces are still small.

Production thinking

Readable expressions prevent silent bugs.

Why does this matter?

Ternaries are excellent when they reduce noise. They are harmful when they compress too much logic into one line.

Accessibility

Ternaries often choose labels and messages. Keep that logic clear so UI text remains predictable.

Production note

Production code should avoid clever nested ternaries in business rules. They are hard to review and easy to break.

SEO note

Conditional labels, headings or metadata should be selected with clear logic so rendered text stays correct.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a second checkbox and decide if the ternary is still readable.
Move the condition into a variable called canOpenDashboard.
Rewrite the ternary as if/else and compare readability.

Practice assignment

Do this before moving to the next topic.

Write one ternary for a text label.
Write one ternary for a CSS class name.
Refactor a nested ternary into if/else.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Ternary Operator.