Compact Decisions
The ternary operator is JavaScript's only conditional operator. It lets you choose between two values in a single expression.
Use it for simple decisions like labels, classes, or small value selections.
JavaScript Tutorial
JavaScript Ternary Operator
The ternary operator is a compact way to write a simple if/else in one expression.
It is perfect for small decisions like labels, status text, and inline returns.
Why We Need It
Ternaries keep code concise, but can become unreadable if overused.
Knowing when to use them (and when not to) helps keep your codebase clear.
Syntax
condition ? valueIfTrue : valueIfFalseBasic Example
1. Basic Ternary
const age = 20;
const canVote = age >= 18 ? "Yes" : "No";
console.log(canVote);A ternary returns one of two values based on a condition.
Real World Example
2. Inline UI Label
const status = "paid";
const badge = status === "paid" ? "Success" : "Pending";
console.log(badge);Ternary operators are common for UI labels and CSS class names.
Multiple Use Cases
Readability First
Ternaries are great when they stay short. Once they become nested or multi-line, an if/else is clearer.
Use parentheses to improve readability for complex expressions.
Common UI Patterns
Ternaries shine in UI code: badge labels, status colors, and empty states.
They also work well in return statements for simple branching.
Avoid Overuse
Nested ternaries are hard to read and debug. Consider a switch or if/else for complex logic.
If you need more than two outcomes, a mapping object can be cleaner.
More Examples
3. Return Statement
function getPrice(isMember) {
return isMember ? 9.99 : 14.99;
}
console.log(getPrice(true));Ternaries keep simple returns concise.
4. Nested Ternary (Use Sparingly)
const score = 82;
const grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade);Nested ternaries work, but readability can suffer if you go too far.
Comparison
Without
let label;
if (score >= 70) {
label = "Pass";
} else {
label = "Retry";
}With
const label = score >= 70 ? "Pass" : "Retry";Common Mistakes and Fixes
Nesting too deeply
Switch to if/else or a lookup object for more than two branches.
Using ternary for side effects
Ternaries should return values, not replace statements.
Ignoring parentheses
Add parentheses when combining ternaries with other operators.
Long expressions
Keep ternaries short and split logic into variables if needed.
Interview Questions
What is the ternary operator?
A compact conditional operator that returns one of two values based on a condition.
When should you avoid ternary?
When logic is complex or nested, use if/else for clarity.
Can ternary return expressions?
Yes, it returns an expression and can be used inline.
Practice Problem
Practice: Use a ternary operator to choose a shipping label based on total amount.
const total = 75;
// TODO: if total >= 100 return "Free Shipping" else "Paid Shipping"
One Possible Solution
const total = 75;
const label = total >= 100 ? "Free Shipping" : "Paid Shipping";
console.log(label);Frequently Asked Questions
Is the ternary operator faster than if/else?
Performance differences are negligible. Choose based on readability.
Can I nest ternary operators?
Yes, but it can hurt readability. Use sparingly.
Can a ternary return JSX?
Yes, it's common in React to render one of two components or strings.
When should I avoid ternaries?
Avoid them for complex logic or more than two outcomes.
Try It Yourself
Try the ternary examples and adjust the inputs to see both branches.