What you'll be able to do

By the end of this page you should be able to recognize a few everyday array recipes, pick the methods you already learned (map, filter, find, slice, includes), and know when a plain for...of is still the clearer tool.

Previous post: sort and common mistakes.

Who this is for

  • People who remember method names but freeze on “how do I combine them?”
  • Beginners who write nested for loops for jobs one chain could do
  • Anyone about to leave arrays for objects and wanting a solid checklist

You can skip this if these patterns already feel automatic. Come back when you catch yourself reinventing filter + map by hand.

Pattern 1 — transform every item

const labels = ids.map(function (id) {
  return "user-" + id;
});

Scenario A — display strings from ids.

Scenario B — prices with tax. Same map shape.

Pattern 2 — keep some, then transform

const titles = posts
  .filter(function (p) {
    return p.status === "published";
  })
  .map(function (p) {
    return p.title;
  });

Scenario A — Learn hub cards. Filter published, map to titles.

Scenario B — only positive scores, then double. filter then map.

Order matters: filter first so map does less work on junk rows.

Pattern 3 — unique primitives with a Set (preview)

const tags = ["js", "css", "js"];
const unique = [...new Set(tags)];
console.log(unique); // ["js", "css"]

Scenario A — tag chips without duplicates.

Scenario B — beginner-only filter + includes. Works, slower to read; Set is fine to see early, with a deeper Set/Map post later.

Pattern 4 — find one by id

const user = users.find(function (u) {
  return u.id === targetId;
});
if (!user) {
  // handle missing
}

Scenario A — open a profile route.

Scenario B — remove after findIndex. const i = users.findIndex(...); if (i !== -1) users.slice()... or intentional splice.

Pattern 5 — copy before you mutate

const next = list.slice();
next.push(item);
// or: const next = list.concat(item);
// or: const next = [...list, item];

Scenario A — UI state. Keep the previous list for undo or React-style updates later.

Scenario B — shared cart in two components. Copy-on-write avoids “both screens changed” bugs from earlier mutation lessons.

Pattern 6 — plain loop when chains get noisy

let total = 0;
for (const line of lines) {
  if (!line.active) continue;
  total += line.qty * line.price;
}

Scenario A — several local variables and early continues. A loop stays readable.

Scenario B — one sum of numbers. reduce or a loop — pick what your teammates can read fastest.

A tiny practice file

Save as array-patterns.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>array patterns</title>
  </head>
  <body>
    <button id="go">Run patterns</button>
    <pre id="out"></pre>
    <script>
      const posts = [
        { id: 1, status: "published", title: "Arrays" },
        { id: 2, status: "draft", title: "Secret" },
        { id: 3, status: "published", title: "Reduce" },
      ];
      document.getElementById("go").addEventListener("click", function () {
        const titles = posts
          .filter(function (p) {
            return p.status === "published";
          })
          .map(function (p) {
            return p.title;
          });
        const one = posts.find(function (p) {
          return p.id === 3;
        });
        const tags = [...new Set(["js", "css", "js"])];
        document.getElementById("out").textContent =
          "titles: " + JSON.stringify(titles) + "\n" +
          "find id 3: " + (one && one.title) + "\n" +
          "unique tags: " + JSON.stringify(tags);
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. map then filter when most items would be dropped. Filter first when possible.

2. Mutating inside map. Return new values; copy the list when adding items.

3. find without a missing check.

4. Giant reduce for a simple filter+map. Prefer the clear chain.

5. Unique-ing objects with Set by reference. Different objects with the same id stay “unique” as two items — use find/Map patterns later.

6. Avoiding loops out of pride. Readable for...of is professional.

What to try before the next post

  1. Filter + map on a tiny posts array.
  2. find by id with a missing branch.
  3. Copy-then-push vs push on the original.
  4. Build the tiny HTML file.

This closes Phase 5 (arrays). Next: objects basics — keys, nesting, and why user2 = user1 shares one object.

Try this next outside the series

Arrays get easier when you see them render UI lists and move through real transforms.

javascripttutorialsdevelopers