The Object Key Overwrite Bug vs Map

Notice how plain objects coerce all objects into "[object Object]", while Map retains exact object identity.

// 1. The Plain Object Trap:
const userA = { id: 101, name: "Alice" };
const userB = { id: 102, name: "Bob" };

const scores = {};
scores[userA] = 95;
scores[userB] = 88; // OVERWRITES userA because both become "[object Object]"!

console.log(scores); 
// Output: { "[object Object]": 88 }

// 2. The Map Solution:
const mapScores = new Map();
mapScores.set(userA, 95);
mapScores.set(userB, 88);

console.log(mapScores.get(userA)); // 95 (Preserved!)
console.log(mapScores.get(userB)); // 88 (Preserved!)
console.log(mapScores.size);       // 2 (Instant O(1) size check)

Map Instantiation, CRUD & Chaining

// Pre-populating a Map via 2D Array of [key, value] pairs:
const productInventory = new Map([
  ["SKU-100", { name: "Mechanical Keyboard", qty: 24 }],
  ["SKU-200", { name: "Gaming Mouse", qty: 45 }]
]);

// Fluent Chaining with .set()
productInventory
  .set("SKU-300", { name: "USB-C Hub", qty: 12 })
  .set("SKU-400", { name: "4K Webcam", qty: 8 });

console.log(productInventory.size); // 4

// Check existence & retrieve
if (productInventory.has("SKU-200")) {
  const item = productInventory.get("SKU-200");
  console.log(`In stock: ${item.qty} units of ${item.name}`);
}

// Delete an item
const removed = productInventory.delete("SKU-100"); // returns true
console.log("Remaining items:", productInventory.size); // 3

Iterating & Converting Maps

const userRoles = new Map([
  ["alice@corp.com", "Admin"],
  ["bob@corp.com", "Editor"],
  ["charlie@corp.com", "Viewer"]
]);

// 1. Destructuring in for...of:
for (const [email, role] of userRoles) {
  console.log(`${email} holds access: ${role}`);
}

// 2. map.forEach (Note argument order: value first, key second!):
userRoles.forEach((role, email) => {
  console.log(`Sending ping to ${email} (${role})`);
});

// 3. Converting Map <-> Object:
const plainObj = Object.fromEntries(userRoles);
console.log(plainObj); // { "alice@corp.com": "Admin", ... }

const backToMap = new Map(Object.entries(plainObj));

// 4. JSON Serialization Strategy:
// JSON.stringify(map) produces "{}" because Maps lack own string properties!
// Always serialize as an array of entries:
const jsonPayload = JSON.stringify([...userRoles]);
console.log(jsonPayload); // '[["alice@corp.com","Admin"],...]'

Live 100,000 Key Churn Benchmark Demo

Run this benchmark in the playground to compare 100,000 rapid key additions and deletions.

const ITERATIONS = 100_000;

// 1. Plain Object Benchmark
console.time("Object Churn");
const obj = {};
for (let i = 0; i < ITERATIONS; i++) {
  obj["key_" + i] = i;
}
for (let i = 0; i < ITERATIONS; i++) {
  delete obj["key_" + i];
}
console.timeEnd("Object Churn");

// 2. Map Benchmark
console.time("Map Churn");
const map = new Map();
for (let i = 0; i < ITERATIONS; i++) {
  map.set("key_" + i, i);
}
for (let i = 0; i < ITERATIONS; i++) {
  map.delete("key_" + i);
}
console.timeEnd("Map Churn");

Set Deduplication & Instant O(1) Membership

// Instant Array Deduplication using Spread Syntax:
const rawTags = ["react", "javascript", "css", "javascript", "react", "html"];
const uniqueTags = [...new Set(rawTags)];
console.log(uniqueTags); // ["react", "javascript", "css", "html"]

// Set of Active User IDs (High-Throughput Membership Testing):
const onlineUsers = new Set([101, 102, 103]);

// Chained additions
onlineUsers.add(104).add(105).add(101); // 101 ignored (duplicate)
console.log(onlineUsers.size); // 5

// O(1) Instant Lookup vs O(N) Array Scan:
if (onlineUsers.has(103)) {
  console.log("User 103 is currently active in chat room!");
}

onlineUsers.delete(102);
console.log("Online count:", onlineUsers.size); // 4

Executing Set Operations (ES2024 with Fallback Polyfill)

const devA_Skills = new Set(["JavaScript", "TypeScript", "React", "Node"]);
const devB_Skills = new Set(["Python", "React", "Docker", "Node"]);

// 1. Intersection (Skills shared by both developers):
const sharedSkills = devA_Skills.intersection 
  ? devA_Skills.intersection(devB_Skills)
  : new Set([...devA_Skills].filter(skill => devB_Skills.has(skill)));

console.log("Shared:", [...sharedSkills]); 
// ["React", "Node"]

// 2. Difference (Skills Dev A has that Dev B does NOT have):
const devA_Only = devA_Skills.difference
  ? devA_Skills.difference(devB_Skills)
  : new Set([...devA_Skills].filter(skill => !devB_Skills.has(skill)));

console.log("Dev A Exclusive:", [...devA_Only]); 
// ["JavaScript", "TypeScript"]

// 3. Union (Entire combined tech stack):
const techStack = devA_Skills.union
  ? devA_Skills.union(devB_Skills)
  : new Set([...devA_Skills, ...devB_Skills]);

console.log("Total Stack:", [...techStack]);
// ["JavaScript", "TypeScript", "React", "Node", "Python", "Docker"]

Leak-Free DOM Metadata Caching with WeakMap

// Storing analytics/metadata on DOM nodes without memory leaks:
const elementClickTracker = new WeakMap();

function registerButtonClick(buttonElement) {
  // If button not tracked, start with 0
  const currentClicks = elementClickTracker.get(buttonElement) || 0;
  elementClickTracker.set(buttonElement, currentClicks + 1);
  console.log(`Button clicked ${currentClicks + 1} times!`);
}

// When a button is created:
let btn = document.createElement("button");
registerButtonClick(btn); // 1
registerButtonClick(btn); // 2

// Later, the button is removed from the UI and dereferenced:
btn.remove();
btn = null; 

// GC AUTOMATION:
// In a Map, btn would remain locked in memory forever.
// In WeakMap, the GC automatically reclaims the button AND click count!

Detecting Circular References via WeakSet

Notice how WeakSet tags visited objects during recursive traversal without holding memory leaks.

function isCircular(obj, seen = new WeakSet()) {
  if (typeof obj !== "object" || obj === null) return false;

  // If already tagged in WeakSet, we found a circular reference loop!
  if (seen.has(obj)) return true;

  seen.add(obj);

  for (const key of Object.keys(obj)) {
    if (isCircular(obj[key], seen)) return true;
  }

  return false;
}

// Test Graph 1: Normal Tree
const tree = { name: "Root", child: { name: "Branch" } };
console.log("Tree is circular:", isCircular(tree)); // false

// Test Graph 2: Circular Graph
const nodeA = { id: "A" };
const nodeB = { id: "B" };
nodeA.next = nodeB;
nodeB.next = nodeA; // Loop!

console.log("Graph is circular:", isCircular(nodeA)); // true