Stop 04 · JavaScriptTopics · 32/36

Set

Part of the Frontend Developer Roadmap

In short

Need a list with no duplicates, like unique tags or users who liked a post? A Set keeps each value only once and checks "is this in here?" very quickly.

A built-in collection that stores only unique values — the simplest way to deduplicate an array or track membership in JS. `Set` expresses membership and uniqueness directly, which often makes deduplication and lookup-oriented logic clearer than repeatedly scanning an array.

The jaadu mascot stamps a student's hand at a colourful college fest gate.

Think of it like this

The fest entry stamp

At the college fest gate, you get stamped once. Walk out and come back five times, you're still stamped once. The guard only asks "already stamped?". A Set is that guard: adding the same value again changes nothing.

Watch it happen

new Set(tags), one tag at a time

js
0
now
css
1
js
2
html
3
css
4

1/5"js" is new, so it's added. The Set now has 1 value.

The big ideas

What you need to know

Unique values only

Adding a value that's already there is ignored. Objects count as the same only if they're the very same object.

add, has, delete, size

has is the star. It checks membership fast, even in big sets, unlike array.includes which scans every item.

Remove duplicates in one line

[...new Set(array)] gives you a new array with duplicates gone, in original order.

New set maths

Modern browsers support union, intersection and difference methods directly on Sets.

See it in code

Walk through the code

js
1const likes = new Set();2likes.add("aman").add("riya").add("aman");   // duplicate ignored3console.log(likes.size);          // 24console.log(likes.has("riya"));   // true5 6const tags = ["js", "css", "js", "html", "css"];7const unique = [...new Set(tags)];   // ["js", "css", "html"]8 9const frontend = new Set(["js", "css", "html"]);10const backend = new Set(["js", "sql"]);11console.log(frontend.intersection(backend));  // Set(1) { "js" }12 13console.log(new Set([{ a: 1 }, { a: 1 }]).size);  // 2, different objects

1/4Adding "aman" twice still leaves 2 values. has checks membership.

add returns the Set itself, which is why chaining works. The last line shows that two objects with the same content are still two different values.

Save yourself the pain

Common mistakes

Oops

Expecting a Set to remove objects that look the same.

Do this instead

It compares objects by identity. To dedupe by content, use a Map keyed by an id.

Oops

Calling array.includes inside a big loop.

Do this instead

Turn the array into a Set once, then use set.has. It's much faster on large lists.

Your mission

Common friends

~15 min

Quick check

What is new Set([1, "1", 1, NaN, NaN]).size?

Go deeper

  1. 1Deduplicate an array using `[...new Set(array)]`. Validate your understanding by applying it in a small practical example.
  2. 2Use a `Set` to track which items a user has already seen or clicked. Verify the behavior with realistic data and handle the failure or empty state as well.
  3. 3Compare `Set.has()` conceptually against `Array.includes()` for large lists.

More topics at this stop

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download
InsideEdge