Memory Management

Every program follows the same memory lifecycle:

Three Stages

// 1. ALLOCATION - Memory is allocated for use
const obj = { name: 'Alice' }; // Heap memory allocated
const arr = [1, 2, 3]; // Array buffer allocated

// 2. USAGE - Memory is used
console.log(obj.name); // Read from memory
arr.push(4); // Write to memory

// 3. RELEASE - Memory is freed
obj = null; // Mark for garbage collection
// GC will eventually free the memory

JavaScript Memory Model

// Stack (primitive values, fixed size)
let x = 10; // Stored in stack
let y = 'hello'; // Stored in stack

// Heap (objects, dynamic size)
let obj = { name: 'Alice' }; // Object in heap, reference in stack
let arr = [1, 2, 3]; // Array in heap, reference in stack

// When you copy a reference
let obj2 = obj; // Both point to same object in heap
obj2.name = 'Bob';
console.log(obj.name); // 'Bob' (shared reference!)

Memory Limits

// Browsers typically limit heap size
// Chrome: ~1-4GB depending on system
// You can check in DevTools: Performance > Memory

// Exceeding limits causes errors
try {
  const hugeArray = new Array(1000000000);
} catch (e) {
  console.error('Out of memory:', e.message);
}

Memory leaks occur when objects are no longer needed but still referenced.

1. Accidental Global Variables

function createLeak() {
  leakedVariable = 'I am leaked!'; // No var/let/const!
  // This creates a global variable that's never freed
}

// Fix: Always use var, let, or const
function noLeak() {
  const notLeaked = 'I am safe!';
}

2. Forgotten Event Listeners

function setup() {
  const button = document.getElementById('btn');
  button.addEventListener('click', () => {
    console.log('clicked');
  });
  // If button is removed, listener is still attached!
}

// Fix: Remove listeners when done
function cleanup() {
  const button = document.getElementById('btn');
  button.removeEventListener('click', handler);
}

3. Forgotten Timers

function start() {
  setInterval(() => {
    // This keeps running!
    updateUI();
  }, 1000);
  // No way to stop it!
}

// Fix: Store reference and clear
let intervalId;
function start() {
  intervalId = setInterval(updateUI, 1000);
}
function stop() {
  clearInterval(intervalId);
}

4. Closures Holding References

function createClosure() {
  const largeData = new Array(1000000).fill('data');
  
  return function() {
    // This closure holds reference to largeData
    console.log('closure called');
  };
}

const closure = createClosure();
// largeData stays in memory as long as closure exists

// Fix: Release reference when not needed
closure = null;

5. Detached DOM Nodes

let element;
function create() {
  element = document.createElement('div');
  document.body.appendChild(element);
}
function remove() {
  document.body.removeChild(element);
  // element still references the detached node!
}

// Fix: Nullify reference
function remove() {
  document.body.removeChild(element);
  element = null;
}

Strategies to prevent memory leaks in JavaScript applications.

1. Use Strict Mode

'use strict';

function leak() {
  leaked = 'error!'; // ReferenceError!
}

2. Nullify References

// When done with large objects
let largeData = fetchHugeData();
processData(largeData);
largeData = null; // Allow GC to collect

3. Remove Event Listeners

function setup() {
  const handler = () => console.log('clicked');
  button.addEventListener('click', handler);
  
  return () => {
    button.removeEventListener('click', handler);
  };
}

const cleanup = setup();
// Later:
cleanup();

4. Clear Timers

const intervals = [];

function startPolling() {
  const id = setInterval(poll, 1000);
  intervals.push(id);
}

function stopAll() {
  intervals.forEach(clearInterval);
  intervals.length = 0;
}

5. WeakRef and FinalizationRegistry (ES2021)

let weakRef = new WeakRef(targetObject);

// Access the object (may be garbage collected)
const obj = weakRef.deref();
if (obj) {
  // Object still exists
  console.log(obj.data);
}

// FinalizationRegistry for cleanup
const registry = new FinalizationRegistry((heldValue) => {
  console.log('Object collected:', heldValue);
});

registry.register(obj, 'my-object');

6. Memory Profiling

// Chrome DevTools Memory tab
// 1. Take heap snapshot
// 2. Compare snapshots
// 3. Look for detached nodes, increasing objects

// Code for profiling
console.log('Before:', performance.memory.usedJSHeapSize);
// Run operation
console.log('After:', performance.memory.usedJSHeapSize);

7. Object Pooling

const pool = [];

function getObject() {
  return pool.pop() || createObject();
}

function releaseObject(obj) {
  obj.reset(); // Clean up
  pool.push(obj);
}

// Use
const obj = getObject();
// ... use object ...
releaseObject(obj);