Script SpringsISSUE #21 of 29

operators · spread · rest

SparkyVSNaN the Trickster

Sparky saysSpread (...) expands an iterable; rest (...) collects remaining items into one.

Same three dots, two roles. Spread expands: [...arr, 4] copies and adds, fn(...args) passes elements as arguments, {...obj} shallow-copies. Rest collects: function f(...args) gathers all arguments into an array, and works in destructuring too.

Power-ups you unlock

Spread expands: [...a], {...o}, fn(...args)
Rest collects: function f(...args)
Spread makes quick shallow copies
Same syntax, opposite jobs

NaN the Trickster attacks — common mistakes

Expecting spread to deep-copy (it’s shallow)
Rest parameter not being last
Spreading a non-iterable

Boss battleMerge two arrays with spread, then write a sum function using a rest parameter.

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 merged=[...[1,2],...[3,4]]; const sum=(...n)=>n.reduce((a,b)=>a+b,0);
document.getElementById('o').textContent='merged='+merged+'\nsum='+sum(1,2,3,4);</script></body></html>

▶ Open the interactive comic issue

‹ Operators · Ternary · Short-Circuit Destructuring · Arrays · Objects ›