Map vs Object vs Set vs Array — When to Use What in JavaScript

// 1. When keys aren't strings
const componentCache = new Map();
const buttonRef = document.querySelector("button");
componentCache.set(buttonRef, { clicks: 0, renders: 5 });

// 2. When you need to know the size instantly
const userSessions = new Map();
console.log(userSessions.size); // O(1) — Object needs Object.keys().length

// 3. When you add/delete keys frequently
const cache = new Map();
cache.set("user:123", userData);
cache.delete("user:123");
// Map is optimized for this pattern

// 4. LRU Cache implementation
class LRUCache {
  constructor(capacity) {
    this.capacity = capacity;
    this.cache = new Map(); // Map preserves insertion order!
  }
  get(key) {
    if (!this.cache.has(key)) return -1;
    const value = this.cache.get(key);
    this.cache.delete(key);
    this.cache.set(key, value); // Move to end (most recent)
    return value;
  }
  put(key, value) {
    this.cache.delete(key);
    this.cache.set(key, value);
    if (this.cache.size > this.capacity) {
      // Delete the FIRST (oldest) entry
      this.cache.delete(this.cache.keys().next().value);
    }
  }
}

// 1. API responses — they're already objects
const user = await fetch("/api/user").then(r => r.json());

// 2. Configuration / options
const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3,
};

// 3. When you need JSON serialization
JSON.stringify(config); // Works naturally
// JSON.stringify(map);  // Just gives "{}"