Script SpringsISSUE #22 of 29

destructuring · arrays · objects

SparkyVSNaN the Trickster

Sparky saysDestructuring unpacks arrays and objects into variables in one statement.

const [a, b] = arr and const {name, age} = obj pull values into named variables. Add defaults ({x = 0}), rename ({name: n}), and rest ({a, ...others}). It's everywhere in modern JS — function parameters, imports, React props — for clean, declarative access.

Power-ups you unlock

[a,b]=arr · {name}=obj
Defaults: {x = 0} · rename: {name: n}
Rest gathers the leftovers
Common in params, imports, props

NaN the Trickster attacks — common mistakes

Forgetting parentheses when destructuring into existing vars
Wrong key name → undefined
Over-destructuring deeply nested shapes into noise

Boss battleDestructure a user object with a renamed field and a default for a missing one.

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:'drew',role:'admin'};
const {name:n, plan='free', ...rest}=user;
document.getElementById('o').textContent='n='+n+' plan='+plan+' rest='+JSON.stringify(rest);</script></body></html>

▶ Open the interactive comic issue

‹ Operators · Spread · Rest If · Else · Else If ›