🗺️ JavaScript Map, Set, WeakMap & WeakSet — The Complete Guide

If you’re serious about modern JavaScript, you must understand
Map, Set, WeakMap, and WeakSet.

They solve real problems that Object and Array couldn’t — especially around performance, memory, and data safety.

🟦 Map()
✅ What is Map?

Map is a built-in JavaScript data structure that stores key–value pairs, just like objects, but way more powerful.

const user = new Map([
  ['name', 'md fahim'],
  ['age', 22],
  [99, true],
]);

🤔 Why does Map exist?

Objects had limitations:

❌ Keys were mostly strings
❌ Order wasn’t guaranteed (older JS)
❌ No easy way to know the size

Map fixes all of that.

🔑 Core Map Methods

// Add or update
user.set('country', 'Bangladesh');
user.set('age', 23);

// Get value
user.get('name'); // 'md fahim'
user.get(99);     // true

// Check existence
user.has('email'); // false

// Delete key
user.delete(99);

// Clear all
user.clear();

// Size
user.size;

🔁 Looping Through a Map
✅ for...of (BEST)

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

keys()

for (const key of user.keys()) {
  console.log(key);
}

values()

for (const value of user.values()) {
  console.log(value);
}

entries() (default)

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

forEach()

user.forEach((value, key) => {
  console.log(key, value);
});

⚠️ Order is (value, key) — opposite of Object

🧠 Important Rule: Keys Are Compared by Reference

const obj = { id: 1 };

const map = new Map();
map.set(obj, 'data');

map.get({ id: 1 }); // ❌ undefined
map.get(obj);       // ✅ 'data'

❌ Common Map Mistakes
❌ Dot notation

user.name // ❌

✅ Correct

user.get('name');

❌ This won’t work

user.keys().forEach(); // ❌

✅ Do this

for (const key of user.keys()) {}

🔄 Convert Between Map & Object
Map → Object

const obj = Object.fromEntries(user);

Object → Map

const map = new Map(Object.entries(obj));

Map → Array

console.log([...map]);
console.log(Array.from(map));

🟩 Set()
✅ What is Set?

A Set stores unique values only.

const numbers = new Set([1, 2, 3, 3, 4]);
console.log(numbers); // {1,2,3,4}

🔑 Core Set Methods

set.add(1);
set.has(1);     // true
set.delete(1);
set.clear();
set.size;

🔁 Looping a Set
for...of (BEST)

for (const value of set) {
  console.log(value);
}

forEach()

set.forEach(value => {
  console.log(value);
});

values() / keys()

set.values();
set.keys(); // same as values

🧠 How Set Checks Uniqueness
Primitive values

new Set([1, 1, '1']); // {1, '1'}

Objects (REFERENCE-based)

const a = { x: 1 };
const b = { x: 1 };

const set = new Set([a, b]);
console.log(set.size); // 2

❌ Common Set Mistakes

set[0]; // ❌ undefined

✔ Sets are not indexed

🔥 Real-Life Use Cases
Remove duplicates

[...new Set([1,2,2,3])];

Fast permission check

const roles = new Set(['admin', 'editor']);
roles.has('admin');

🟨 WeakMap()
🧠 Mental Model

“This data belongs to the object.
If the object dies, the data should die too.”

Rules

✔ Keys must be objects
✔ Weakly referenced
✔ Auto garbage collection
❌ No iteration

Example: Private Data

const privateData = new WeakMap();

class User {
  constructor(name, password) {
    privateData.set(this, { password });
    this.name = name;
  }

  checkPassword(pass) {
    return privateData.get(this).password === pass;
  }
}

🧹 Garbage Collection Magic

let user = { id: 1 };
const wm = new WeakMap();

wm.set(user, 'secret');
user = null; // auto cleanup

🟪 WeakSet()
🧠 Mental Model

“I just want to know if I’ve seen this object before.”

Rules

✔ Objects only
✔ No duplicates
✔ Auto cleanup
❌ No iteration

Example: Tracking Objects

const visited = new WeakSet();

function process(obj) {
  if (visited.has(obj)) return;
  visited.add(obj);
  console.log('Processing...');
}