Memory Management & Garbage Collection

// 1. Forgotten Event Listeners
function setup() {
  const button = document.getElementById("btn");
  const heavyData = new Array(1000000).fill("x");
  
  button.addEventListener("click", () => {
    console.log(heavyData.length); // heavyData trapped in closure!
  });
  // ❌ Listener never removed = heavyData never freed
}

// ✅ Fix: Remove listener when done
const handler = () => console.log("clicked");
button.addEventListener("click", handler);
// Later:
button.removeEventListener("click", handler);

// 2. Detached DOM Nodes
let detachedNodes = [];
function createList() {
  const ul = document.createElement("ul");
  for (let i = 0; i < 1000; i++) {
    const li = document.createElement("li");
    ul.appendChild(li);
  }
  document.body.appendChild(ul);
  detachedNodes.push(ul); // ❌ Reference kept after removal
  document.body.removeChild(ul);
}

// ✅ Fix: Don't keep references to removed DOM nodes
// Set detachedNodes = null when no longer needed

// 3. Closures Holding Large Data
function processData() {
  const hugeArray = fetchHugeDataset(); // 100MB
  
  return function getLength() {
    return hugeArray.length; // Closure traps entire hugeArray!
  };
}

// ✅ Fix: Extract only what you need
function processData() {
  const hugeArray = fetchHugeDataset();
  const length = hugeArray.length;
  // hugeArray can now be GC'd
  return function getLength() {
    return length;
  };
}

// WeakRef: Hold a reference that doesn't prevent GC
let obj = { data: "important" };
const weakRef = new WeakRef(obj);

obj = null; // Now eligible for GC

// Later: might be undefined if GC ran
const deref = weakRef.deref();
if (deref) console.log(deref.data);

// FinalizationRegistry: Callback when object is GC'd
const registry = new FinalizationRegistry((value) => {
  console.log(`${value} was garbage collected`);
});
registry.register(obj, "my-object");