Script SpringsISSUE #20 of 29

operators · ternary · short-circuit

SparkyVSNaN the Trickster

Sparky saysThe ternary operator condition ? a : b is a compact inline if/else that returns a value.

age >= 18 ? "adult" : "minor" picks one of two values based on a condition. It's an expression (returns a value), so it fits inside template literals, JSX, and assignments. Keep it to simple choices — nested ternaries quickly become unreadable; use if/else then.

Power-ups you unlock

condition ? valueIfTrue : valueIfFalse
It’s an expression — returns a value
Great inside templates and assignments
Avoid deep nesting (use if/else)

NaN the Trickster attacks — common mistakes

Nesting ternaries into unreadable chains
Using a ternary for side effects (use if)
Forgetting it returns a value, not runs a block

Boss battleSet a label with a ternary based on a number being even or odd.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px"><pre id="o"></pre>
<script>const n=7; const label = n%2===0 ? 'even' : 'odd';
document.getElementById('o').textContent = n+' is '+label;</script></body></html>

▶ Open the interactive comic issue

‹ Operators · Nullish · ??Operators · Spread · Rest ›