Script SpringsISSUE #18 of 29

operators · logical · && · || · !

SparkyVSNaN the Trickster

Sparky saysLogical operators && (and), || (or), ! (not) — and they short-circuit.

&& returns the first falsy (or the last value); || returns the first truthy. This short-circuiting is used for guards (user && user.name) and defaults (name || "guest"). ! flips a boolean. They evaluate left to right and stop as soon as the result is known.

Power-ups you unlock

&& returns first falsy / last value
|| returns first truthy / last value
Short-circuit: stops once the result is known
! negates; !! coerces to boolean

NaN the Trickster attacks — common mistakes

Using || for defaults when 0/"" are valid (use ??)
Overlong && chains instead of optional chaining
Side effects hidden in short-circuited operands

Boss battleUse && as a guard and || as a default, then convert one to ??.

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 user={name:''}; const guard=user&&user.name; const def=user.name||'guest';
document.getElementById('o').textContent='guard='+JSON.stringify(guard)+' default='+def;</script></body></html>

▶ Open the interactive comic issue

‹ Operators · Comparison · == Vs ===Operators · Nullish · ?? ›