Garbage Collection

Modern JavaScript engines use the mark and sweep algorithm for garbage collection.

How Mark and Sweep Works

1. Mark Phase: Start from root objects (global, current stack) and mark all reachable objects
2. Sweep Phase: Unmark all objects, delete unmarked (unreachable) objects

function createUser() {
  let user = { name: 'Alice' }; // Object created
  return user; // Returned, so it's reachable
}

let alice = createUser(); // alice references the object
// { name: 'Alice' } is reachable

alice = null; // Object is now unreachable
// Garbage collector will free this memory

Visual Example

Before GC:
┌─────────┐    ┌─────────┐
│ Global  │───→│ Object A │
└─────────┘    └─────────┘
     │              │
     ▼              ▼
┌─────────┐    ┌─────────┐
│ Object B │    │ Object C │ (unreachable)
└─────────┘    └─────────┘

After GC:
┌─────────┐    ┌─────────┐
│ Global  │───→│ Object A │
└─────────┘    └─────────┘
     │              │
     ▼              ▼
┌─────────┐
│ Object B │
└─────────┘
(Object C deleted)

Reachability

An object is reachable if:

• Referenced by a variable in scope
• Referenced by another reachable object
• A DOM element referenced in JavaScript

let obj = { data: 'important' };

// Object is reachable
console.log(obj.data); // 'important'

// Remove reference
obj = null;
// Object is now unreachable, will be garbage collected

Reference counting was used in older systems. An object is garbage collected when its reference count reaches zero.

How Reference Counting Works

let objA = { name: 'A' }; // Reference count: 1
let objB = { name: 'B' }; // Reference count: 1

// Circular reference
objA.ref = objB; // objB reference count: 2
objB.ref = objA; // objA reference count: 2

objA = null; // objA reference count: 1 (still referenced by objB)
objB = null; // Both reference counts: 0, both collected

The Circular Reference Problem

function createCycle() {
  let obj1 = {};
  let obj2 = {};
  
  // Circular reference
  obj1.ref = obj2;
  obj2.ref = obj1;
  
  // Both become unreachable when function returns
  // Reference counting can't handle this!
}

createCycle();
// With reference counting: memory leak!
// With mark and sweep: correctly collected

Modern Solution

// Modern engines use mark and sweep, not reference counting
// They can detect unreachable objects even with circular references

function demonstrate() {
  const obj1 = { data: 'A' };
  const obj2 = { data: 'B' };
  
  obj1.ref = obj2;
  obj2.ref = obj1;
  
  // When function returns, both are unreachable
  // Mark and sweep correctly collects them
}

demonstrate();
// Memory is freed correctly

Garbage collection runs automatically but you can influence when it happens.

Automatic Collection

// GC runs when needed
function allocateMemory() {
  // Create many objects
  const arr = [];
  for (let i = 0; i < 1000000; i++) {
    arr.push({ index: i });
  }
  // arr goes out of scope, objects become unreachable
  // GC will collect them when needed
}

// GC decides when to run based on:
// - Memory usage
n// - Number of objects
// - Time since last collection

Factors Influencing GC

// 1. Memory pressure
// More allocations = more frequent GC

// 2. Heap size
// Engines have heap limits (usually 1-4GB)

// 3. Application state
// Idle time = more aggressive collection

// 4. Browser optimization
// Browsers batch GC during idle periods

Minimizing GC Impact

// BAD: Creates many objects
function processData() {
  for (let i = 0; i < 1000; i++) {
    const temp = { value: i }; // New object each iteration
    process(temp);
  }
}

// GOOD: Reuse objects
function processData() {
  const temp = { value: 0 };
  for (let i = 0; i < 1000; i++) {
    temp.value = i; // Reuse same object
    process(temp);
  }
}

// GOOD: Use object pools
const objectPool = [];
function getTemp() {
  return objectPool.pop() || {};
}
function releaseTemp(obj) {
  objectPool.push(obj);
}

Monitoring GC (Chrome DevTools)

// In Chrome DevTools:
// 1. Open Performance tab
// 2. Record a session
// 3. Look for GC events in the timeline

// Or use performance.memory (Chrome only)
console.log(performance.memory.usedJSHeapSize);
console.log(performance.memory.totalJSHeapSize);