What you'll be able to do

By the end of this page you should be able to build a Set for unique strings, check membership with .has, and use a Map when keys are not all strings or when you want .size and clear iteration — without forcing everything into arrays or plain objects.

Previous post: JSON parse and stringify.

Who this is for

  • People using filter + includes only to dedupe tags
  • Beginners who tried object keys for everything and hit awkward limits
  • Anyone who wants a honest “what’s next after objects and arrays” tool

You can skip this if Set/Map already feel natural. Come back when you need non-string keys or fast unique membership.

Set: unique values

const tags = new Set(["js", "css", "js"]);
console.log(tags.size); // 2
tags.add("html");
console.log(tags.has("css")); // true

Scenario A — unique tag chips. Add tags; Set ignores duplicates automatically.

Scenario B — quick membership. .has(x) reads clearly.

Convert to array when you need array methods: [...tags] or Array.from(tags).

Set delete and clear

tags.delete("css");
tags.clear(); // empty the set

Scenario A — user removes a tag.

Scenario B — reset form state.

Map: keys can be anything (practically)

const scores = new Map();
scores.set("html", 8);
scores.set("css", 9);
console.log(scores.get("html")); // 8
console.log(scores.has("js")); // false

Scenario A — lookup table with string keys — similar to objects, but Map has .size and preserves insertion order for iteration in practice.

Scenario B — keys that are not strings (numbers, objects) — objects stringify keys; Map can use real key values:

const byId = new Map();
const user = { id: 1 };
byId.set(user, "Asha");
console.log(byId.get(user)); // "Asha"

Beginners mostly use string/number keys; know Map exists when object keys feel wrong.

When to stay with arrays or objects

NeedTool
Ordered listArray
Named fields on a recordObject
Unique primitivesSet
Frequent add/has/delete on keysMap (or object for simple string keys)

Scenario A — list of posts in order. Array.

Scenario B — unique visited ids. Set.

A tiny practice file

Save as set-map.html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Set and Map</title>
  </head>
  <body>
    <button id="set">Set demo</button>
    <button id="map">Map demo</button>
    <pre id="out"></pre>
    <script>
      const out = document.getElementById("out");
      document.getElementById("set").addEventListener("click", function () {
        const tags = new Set(["js", "css", "js"]);
        tags.add("html");
        out.textContent = "Set: " + [...tags].join(", ");
      });
      document.getElementById("map").addEventListener("click", function () {
        const scores = new Map([["html", 8], ["css", 9]]);
        scores.set("js", 10);
        out.textContent =
          "html=" + scores.get("html") + " size=" + scores.size;
      });
    </script>
  </body>
</html>

Mistakes I see a lot

1. Using Set when you need duplicates counted. Set only tracks presence.

2. Forgetting Set iteration order is insertion order (useful, not random).

3. Using objects for keys that are not strings/symbols without understanding coercion.

4. Converting Set to array on every render in a hot loop. Convert once when needed.

5. Expecting Map JSON.stringify to “just work” for storage. Serialize to entries array or plain object first.

6. Replacing every object with Map. Plain objects stay fine for records.

What to try before the next post

  1. Build a Set from duplicated tags; log size and spread to array.
  2. Map get / set / has on three topics.
  3. Compare new Set(arr) vs manual includes dedupe.
  4. Build the tiny HTML file.

This closes Phase 6 (objects and references). Next we begin Phase 7 — browser JS: selecting and changing the DOM.

Try this next outside the series

Objects and references click faster when you connect them to state, payloads, and database-shaped data.

javascripttutorialsdevelopers