Sparky saysfor...of iterates the values of any iterable — arrays, strings, Maps, Sets.
for (const item of arr) gives you values directly (no index bookkeeping). It works on anything iterable: arrays, strings, Map, Set, and generators. Need the index too? Use arr.entries() or .forEach. This is usually the loop you want for collections.
Power-ups you unlock
for...of iterates VALUES
Works on arrays, strings, Map, Set, generators
Use .entries() when you need the index too
The go-to loop for collections
NaN the Trickster attacks — common mistakes
Using for...of on a plain object (not iterable)
Reaching for a classic for when for...of is cleaner
Forgetting strings iterate by character
Boss battleSum an array with for...of, then loop a string’s characters.
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>let sum=0; for(const n of [1,2,3,4]) sum+=n;
let chars=[]; for(const c of 'hi') chars.push(c);
document.getElementById('o').textContent='sum='+sum+' chars='+chars.join(',');</script></body></html>