Closure CavesISSUE #25 of 61

array-like vs array

LambdaVSThe Mutator

Lambda saysArray-like objects (arguments, NodeLists) have length and indexing but no array methods.

Things like arguments and document.querySelectorAll results look like arrays (length, indexing) but lack map/filter. Convert with Array.from(x) or spread [...x] to get a real array. Array.from also takes a map function and can build arrays from a length.

Power-ups you unlock

Array-like: has length + indexing, no methods
Array.from(x) or [...x] converts to a real array
Array.from(x, fn) maps while converting
Array.from({length:n}) builds sized arrays

The Mutator attacks — common mistakes

Calling .map on a NodeList directly
Forgetting to convert before using array methods
Spreading a non-iterable array-like (use Array.from)

Boss battleConvert a NodeList to an array with [...] and map over it.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px">
<span>a</span><span>b</span><span>c</span><pre id="o"></pre>
<script>const arr=[...document.querySelectorAll('span')].map(s=>s.textContent.toUpperCase());
document.getElementById('o').textContent=arr.join(',');</script></body></html>

▶ Open the interactive comic issue

‹ Array Methods · Flat · FlatMap Iterators · Symbol.Iterator ›