JavaScript Garbage Collection Complete Guide

// 1. ALLOCATION: Engine allocates memory
const user = { name: "Alice", scores: [95, 87, 92] }; // Object + array allocated
const greeting = "Hello, world!";                       // String allocated
const buffer = new ArrayBuffer(1024);                   // 1KB buffer allocated
 
// 2. USE: Read and write the values
console.log(user.name);
user.scores.push(88);
 
// 3. RELEASE: When no references remain, GC reclaims memory
// (happens automatically when objects become unreachable)

// Roots: global object, current call stack, active closures
 
// Reachable: connected to a root
let data = { value: 42 };     // root -> data
let ref = data;                // root -> data (two paths)
 
// Still reachable after removing one reference
data = null;                   // ref still points to the object
 
// Unreachable: no path from any root
ref = null;                    // Object { value: 42 } is now unreachable
// GC will reclaim it
 
// Circular references: still collected if unreachable from roots
function createCycle() {
  const a = {};
  const b = {};
  a.ref = b;
  b.ref = a;
  // When this function returns, both a and b are unreachable
  // Modern GC handles circular references correctly
}
 
createCycle(); // Both objects will be collected

// Conceptual illustration of mark-and-sweep
 
function markAndSweep(roots, heap) {
  // MARK PHASE: Start from roots, mark everything reachable
  const marked = new Set();
 
  function mark(obj) {
    if (!obj || marked.has(obj)) return;
    marked.add(obj);
 
    // Traverse all references from this object
    for (const ref of getReferences(obj)) {
      mark(ref);
    }
  }
 
  // Mark from every root
  for (const root of roots) {
    mark(root);
  }
 
  // SWEEP PHASE: Free everything not marked
  for (const obj of heap) {
    if (!marked.has(obj)) {
      free(obj); // Reclaim memory
    }
  }
}
 
// Roots include:
// - Global variables (window, globalThis)
// - Local variables in the current call stack
// - Closures referenced by active functions
// - DOM elements in the document tree
// - Active timers (setTimeout/setInterval callbacks)
// - Promise callbacks in the microtask queue

// Reference counting FAILS with circular references
function referenceCounting() {
  const a = { name: "A" }; // refCount: 1
  const b = { name: "B" }; // refCount: 1
 
  a.partner = b; // b refCount: 2
  b.partner = a; // a refCount: 2
 
  // Remove external references
  // a refCount: 1 (b.partner still points to it)
  // b refCount: 1 (a.partner still points to it)
  // Neither reaches 0 -> LEAK in reference counting
  // Mark-and-sweep handles this correctly
}

// Young Generation (Nursery/New Space)
// - Newly created objects land here
// - Collected frequently with a fast "scavenge" algorithm
// - Most objects die young (90%+)
 
function processRequest(data) {
  const temp = data.map((x) => x * 2);    // Short-lived: young gen
  const result = temp.reduce((a, b) => a + b, 0);
  return result;
  // `temp` array becomes unreachable, collected in next young gen GC
}
 
// Old Generation (Old Space/Tenured Space)
// - Objects that survive multiple young gen collections are "promoted"
// - Collected less frequently with full mark-and-sweep
// - Contains long-lived objects: caches, configurations, singleton instances
 
const appConfig = {             // Long-lived: promoted to old gen
  theme: "dark",
  language: "en",
  features: ["search", "notifications"],
};
 
// This matters for performance:
// - Avoid creating many long-lived temporary objects
// - Short-lived objects are cheap (young gen collection is fast)
// - Old gen collection (major GC) causes longer pauses

// WeakRef: a reference that does not prevent GC
class ImageCache {
  constructor() {
    this.cache = new Map();
  }
 
  set(url, imageData) {
    this.cache.set(url, new WeakRef(imageData));
  }
 
  get(url) {
    const ref = this.cache.get(url);
    if (!ref) return null;
 
    const data = ref.deref();
    if (data === undefined) {
      // Object was garbage collected
      this.cache.delete(url);
      return null;
    }
 
    return data;
  }
}
 
// FinalizationRegistry: run cleanup when objects are collected
const registry = new FinalizationRegistry((metadata) => {
  console.log(`Object collected: ${metadata.label}`);
  // Clean up external resources (file handles, network connections)
  if (metadata.cleanup) {
    metadata.cleanup();
  }
});
 
function createResource(label) {
  const resource = {
    data: new ArrayBuffer(1024 * 1024),
    label,
  };
 
  registry.register(resource, {
    label,
    cleanup: () => console.log(`Cleanup for ${label}`),
  });
 
  return resource;
}
 
let res = createResource("buffer-1");
res = null; // After GC runs, FinalizationRegistry callback fires

// Closures retain their entire scope chain
function outer() {
  const largeArray = new Array(1000000).fill("data");
  const smallValue = 42;
 
  // This closure captures the entire scope of `outer`
  // Both `largeArray` AND `smallValue` are retained
  return function inner() {
    return smallValue;
  };
}
 
const fn = outer();
// `largeArray` is retained even though `inner` only uses `smallValue`
// (Some engines optimize this, but it is not guaranteed)
 
// Best practice: extract only needed values
function outerOptimized() {
  const largeArray = new Array(1000000).fill("data");
  const smallValue = computeResult(largeArray);
 
  // `largeArray` is not referenced by the returned function
  return function inner() {
    return smallValue;
  };
}

// GC pauses happen between event loop tasks
// The engine chooses when to run based on memory pressure
 
// Incremental GC: breaks work into small chunks between tasks
// This reduces noticeable pauses
 
// You can hint that you are idle (though not standard):
if ("requestIdleCallback" in window) {
  requestIdleCallback((deadline) => {
    // Browser may schedule GC during idle periods
    while (deadline.timeRemaining() > 5) {
      processNextItem();
    }
  });
}
 
// Avoid creating pressure: batch allocations instead of scattering them
// BAD: allocates inside a hot loop
function processItemsBad(items) {
  for (const item of items) {
    const temp = { ...item, processed: true }; // New object each iteration
    saveToDB(temp);
  }
}
 
// BETTER: reuse or pre-allocate
function processItemsBetter(items) {
  const temp = {};
 
  for (const item of items) {
    Object.assign(temp, item);
    temp.processed = true;
    saveToDB(temp);
    // Clear for next iteration
    for (const key of Object.keys(temp)) {
      delete temp[key];
    }
  }
}