Ticker

6/recent/ticker-posts

🗂️ Sets & Maps in JavaScript – The Data Structures Devs Start Loving Later

🗂️ Sets & Maps in JavaScript – The Data Structures Devs Start Loving Later

Most JavaScript devs begin with:

  • arrays
  • objects

…and honestly, that works for a lot of things.

But eventually you hit situations like:

👉 “Why am I manually removing duplicates?”
👉 “Why is object key lookup getting messy?”
👉 “Why does this feel harder than it should?”

That’s usually when Set and Map finally click.

At first they feel unnecessary.

⚡ What a Set Actually Is

A Set is basically:

👉 a collection of unique values

No duplicates allowed.

🔎 Basic Example

const ids = new Set();

ids.add(1);
ids.add(2);
ids.add(2);

console.log(ids);

👉 Output:

Set(2) {1, 2}

Second 2 gets ignored automatically.

That’s the beauty of it.

🔥 Real Use Case: Removing Duplicates

Classic example… but genuinely useful.

const numbers = [1, 2, 2, 3, 4, 4];

const unique = [...new Set(numbers)];

console.log(unique);

👉 Output:

[1, 2, 3, 4]

Super clean.

No loops. No filter hacks.

⚡ Useful Set Methods

const users = new Set();

users.add("John");
users.has("John");
users.delete("John");
users.clear();

Pretty straightforward.

💡 Real Developer Insight (About Sets)

Sets are amazing when:

  • uniqueness matters
  • fast existence checks matter

Example:

blockedUsers.has(userId);

Way cleaner than:

blockedUsersArray.includes(userId);

Especially with large datasets.

⚡ What a Map Actually Solves

Objects are fine… until they aren’t.

Problem with objects:

👉 keys are basically strings/symbols

Maps are proper key-value collections with:

  • predictable ordering
  • any value as key
  • better iteration behavior

🔎 Basic Example

const userRoles = new Map();

userRoles.set("John", "admin");
userRoles.set("Jane", "editor");

console.log(userRoles.get("John"));

👉 Output:

admin

🔥 Using Objects as Keys (Big Difference)

This is where Maps become interesting.

const map = new Map();

const user = { id: 1 };

map.set(user, "active");

console.log(map.get(user));

👉 Works perfectly.

Objects can’t do this cleanly.

⚡ Useful Map Methods

map.set(key, value);
map.get(key);
map.has(key);
map.delete(key);
map.clear();

Again… simple API.

🧠 Real Developer Insight (About Maps)

Maps shine when:

  • dynamic keys exist
  • lookup performance matters
  • insertion order matters

Also:

👉 Map iteration feels way cleaner than object iteration.

for (const [key, value] of map) {
  console.log(key, value);
}

No Object.keys() gymnastics.

⚠️ Where Devs Usually Go Wrong

1. ❌ Using Set when order/duplicates matter

Set automatically removes duplicates.

Sometimes that’s not what you want.

2. ❌ Replacing every object with Map

Objects are still simpler for:

  • static structures
  • JSON-like data

Don’t overengineer.

3. ❌ Forgetting Map keys are reference-based

map.get({ id: 1 }); // ❌ undefined

Different object reference.

4. ❌ Converting everything into fancy structures

Sometimes arrays are enough 😄

🚀 Best Practice Summary

✅ Use Set for unique collections and fast existence checks
✅ Use Map when keys are dynamic or non-string values
✅ Prefer objects for simple static data structures
✅ Avoid overengineering small datasets
✅ Choose the structure based on the actual problem

Reactions

Post a Comment

0 Comments