Station 09 · Arrays & iteration

The loop

The Showboat plays more than one reel a night. We do not write one block of markup for each one. We write the list of reels once, and a single line of code lays out one item per entry. That line is .map(), and it is the engine behind almost every list on the web.

Below is a working playbill. Press Add a reel — watch the array grow by one and the list grow by one in the same breath. Remove one — they both shrink. The markup never moves; the data does.

playbill.tsx — data on top, one .map() does the rest

1const REELS = [
2  { id: "welcome", title: "Captain's welcome" },
3  { id: "arcade", title: "Penny arcade tour" },
4  { id: "piano", title: "Saloon piano" },
5];
6
7function Playbill() {
8  return (
9    <ul>
10      {REELS.map((reel) => (
11        <li key={reel.id}>
12          {reel.title}
13        </li>
14      ))}
15    </ul>
16  );
17}

Add a reel — the array grows by one, the .map() runs once more, the list rewrites itself.

Tonight's playbill — <ul>

Captain's welcome
Penny arcade tour
Saloon piano

The list on the right is not three rows of handwritten markup. It is one line of code that runs once per entry in the array. Add a reel, take a reel away — the same .map() rewrites the whole list. That single trick is how every playbill, every leaderboard, every guide index on this site is laid out.

What you just learned

An array is just a numbered list of items, written between [ and ].
The .map() method runs your little function once per item and hands back a new list of whatever the function returned.
When the array changes, the .map() runs again. The list on the page rewrites itself with no extra wiring.
Our real playbill, leaderboard, guide index — every list on this site — is one .map() over an array. Learn this and you have the shape of most JavaScript on the web.

Next — Station 10: The conditions

Right this way…