JS Maps

JavaScript Maps: Key-Value Dictionaries with Arbitrary Keys

A Map is an ordered collection of key-value pairs where any data type (primitives, objects, functions) can be used as a key. Unlike plain objects, Map keys maintain insertion order and provide direct size tracking.

Map vs Plain Object Comparison

flowchart TD
    Comparison["Dictionary Decision"] --> PlainObj["Plain Object {}"]
    Comparison --> MapObj["Map Instance new Map()"]
    
    PlainObj --> K1["Keys restricted to Strings / Symbols"]
    PlainObj --> K2["No direct size property (Object.keys().length)"]
    PlainObj --> K3["Inherits Prototype keys"]
    
    MapObj --> M1["Keys can be ANY type (Objects, Functions, Primitives)"]
    MapObj --> M2["Direct map.size property"]
    MapObj --> M3["Guaranteed insertion order iteration"]

Map API Reference

Practical Code Example

// Demonstrating Map usage with object keys and iteration

// 1. Creating Map with Object Keys
const userSessions = new Map();

const userAlex = { id: 101, name: "Alex" };
const userSarah = { id: 102, name: "Sarah" };

// Using objects as keys!
userSessions.set(userAlex, { token: "TOKEN_ABC", loginTime: "10:00 AM" });
userSessions.set(userSarah, { token: "TOKEN_XYZ", loginTime: "10:15 AM" });

console.log(`Map Size: ${userSessions.size}`);
console.log("Alex Session Info:", userSessions.get(userAlex));

// 2. Iterating Over Map
console.log("
--- Map Iteration ---");
for (const [userObj, session] of userSessions) {
  console.log(`User: ${userObj.name} -> Token: ${session.token}`);
}

// 3. Converting Map to Object & Array
const mapArray = Array.from(userSessions.entries());
console.log("Map converted to Entries Array:", mapArray.length);

Best Practices & Gotchas

• Use Map when Keys are Dynamic or Non-Strings: Use Map if key names are unknown at runtime or if keys must be object instances (e.g. DOM nodes).
• Use Map.has() Over map.get() !== undefined: A Map can explicitly store undefined as a value; use .has(key) to test key existence accurately.
• Garbage Collection: Objects used as keys in a standard Map will not be garbage collected even if references elsewhere are deleted. Use WeakMap if keys should be garbage-collectable.

Self-Check Challenge

Create a Map where DOM element nodes serve as keys storing event count metadata numbers.