🧠 Memory Management

📦 Memory Lifecycle in JavaScript

JavaScript automatically manages memory, but understanding the lifecycle helps you avoid memory leaks.

What Gets Allocated?

// Primitives - stored on stack (fast, auto-managed)
var number = 42;
var string = "hello";
var boolean = true;

// Objects - stored on heap (need garbage collection)
var obj = { name: "Sandeep" };
var arr = [1, 2, 3];
var fn = function() { };
var date = new Date();

// Each object allocation uses heap memory
// Heap is where GC does its work

🗑️ Garbage Collection

JavaScript uses Mark and Sweep algorithm to find and free unused memory.

Mark and Sweep Algorithm

What Are "Roots"?

// These are the starting points for GC's reachability check:

// 1. Global object (window in browser, global in Node)
window.myGlobal = { data: "accessible" };

// 2. Currently executing function's variables
function running() {
    var local = { data: "accessible while function runs" };
    // local is reachable here
}  // After function ends, local becomes unreachable

// 3. Closure references
function outer() {
    var closureVar = { data: "kept alive by closure" };
    return function() {
        console.log(closureVar);  // closureVar is reachable!
    };
}

When Does GC Run?

Reachable vs Eligible for GC

var user = { name: "Sandeep" };

// user object is REACHABLE (variable points to it)
// GC will NOT collect it

user = null;

// Now the object is UNREACHABLE (no references)
// Object is ELIGIBLE for GC
// But GC hasn't run yet - object still in memory!

// ... time passes ...
// GC runs when engine decides
// Object finally freed from memory

💀 Common Memory Leaks

A memory leak happens when objects that should be garbage collected are kept alive by unintended references.

1. Accidental Global Variables

function createLeak() {
    leak = "I'm global now!";  // Forgot var/let/const!
    // Attaches to window object, never cleaned up
}

function anotherLeak() {
    this.data = "Also global!";  // In non-strict mode, this = window
}

"use strict";  // Prevents accidental globals

function noLeak() {
    const local = "I'm local and will be GC'd";
}

// Or always use var/let/const
function safe() {
    let data = "Properly scoped";
}

2. Forgotten Event Listeners

class Component {
    constructor() {
        this.data = new Array(1000000).fill('x');  // Large data
        
        // Listener keeps 'this' (and this.data) alive!
        window.addEventListener('resize', this.handleResize);
    }
    
    handleResize = () => {
        console.log(this.data.length);
    }
    
    // Component removed from DOM...
    // But listener still exists on window!
    // this.data can NEVER be garbage collected!
}

class Component {
    constructor() {
        this.data = new Array(1000000).fill('x');
        this.boundHandler = this.handleResize.bind(this);
        window.addEventListener('resize', this.boundHandler);
    }
    
    handleResize() {
        console.log(this.data.length);
    }
    
    // Call this when component is removed!
    destroy() {
        window.removeEventListener('resize', this.boundHandler);
        this.boundHandler = null;
    }
}

3. Closures Holding Large Data

function createHandler() {
    // Large data - should be temporary
    const largeData = new Array(1000000).fill('x');
    
    // Process it
    const result = largeData.length;
    
    // Return handler that DOESN'T use largeData
    return function handler() {
        console.log('Result:', result);
    };
    
    // But largeData might still be in the closure!
    // Different JS engines handle this differently
}

function createHandler() {
    let largeData = new Array(1000000).fill('x');
    
    const result = largeData.length;
    
    largeData = null;  // Explicitly release reference!
    
    return function handler() {
        console.log('Result:', result);
    };
    
    // Now largeData can be garbage collected
}

4. Forgotten Timers

function startPolling() {
    const data = { /* large object */ };
    
    setInterval(() => {
        fetch('/api/data').then(res => {
            Object.assign(data, res);
        });
    }, 1000);
    
    // Interval runs FOREVER
    // Keeps 'data' alive forever
    // Even if you navigate away (in SPA)
}

function startPolling() {
    const data = { /* large object */ };
    
    const intervalId = setInterval(() => {
        fetch('/api/data').then(res => {
            Object.assign(data, res);
        });
    }, 1000);
    
    // Return cleanup function
    return function stopPolling() {
        clearInterval(intervalId);
    };
}

const stop = startPolling();
// Later: stop();

5. Detached DOM Nodes

const elements = [];

function addElement() {
    const div = document.createElement('div');
    div.innerHTML = '<img src="large-image.jpg">';
    document.body.appendChild(div);
    elements.push(div);  // Store reference
}

function removeElements() {
    elements.forEach(el => el.remove());
    // DOM nodes removed from page...
    // But 'elements' array still holds them!
    // They're "detached" but not garbage collected
}

const elements = [];

function addElement() {
    const div = document.createElement('div');
    div.innerHTML = '<img src="large-image.jpg">';
    document.body.appendChild(div);
    elements.push(div);
}

function removeElements() {
    elements.forEach(el => el.remove());
    elements.length = 0;  // Clear the array too!
    // Or: elements = [];
}

6. Growing Cache Without Limit

const cache = {};

function memoize(fn) {
    return function(...args) {
        const key = JSON.stringify(args);
        if (!(key in cache)) {
            cache[key] = fn(...args);
        }
        return cache[key];
    };
}

// Cache grows forever!
// In a long-running app, memory keeps increasing

function memoizeWithLimit(fn, maxSize = 100) {
    const cache = new Map();  // Map preserves insertion order
    
    return function(...args) {
        const key = JSON.stringify(args);
        
        if (cache.has(key)) {
            const value = cache.get(key);
            cache.delete(key);
            cache.set(key, value);  // Move to end (most recent)
            return value;
        }
        
        const result = fn(...args);
        cache.set(key, result);
        
        // Remove oldest if over limit
        if (cache.size > maxSize) {
            const oldest = cache.keys().next().value;
            cache.delete(oldest);
        }
        
        return result;
    };
}

🔐 WeakMap & WeakSet

Special collections that hold weak references - they don't prevent garbage collection of their keys/values.

Strong vs Weak References

How WeakMap Works

WeakMap vs Map

WeakMap Example

// Regular Map - PREVENTS garbage collection
const cache = new Map();
let user = { name: "Sandeep" };
cache.set(user, "metadata");

user = null;  // Clear our reference
// BUT the Map still holds the user object as a key!
// Object can NOT be garbage collected
console.log(cache.size);  // 1 (still there!)


// WeakMap - ALLOWS garbage collection
const cache = new WeakMap();
let user = { name: "Sandeep" };
cache.set(user, "metadata");

user = null;  // Clear our reference
// No strong references remain!
// Object CAN be garbage collected
// WeakMap entry automatically removed
// (can't check .size - WeakMap doesn't have it!)

WeakSet

Same concept as WeakMap, but for storing objects (not key-value pairs).

const visited = new WeakSet();

function trackVisit(element) {
    if (visited.has(element)) {
        console.log("Already visited!");
        return;
    }
    visited.add(element);
    // Process element...
}

// When element is removed from DOM and GC'd,
// it's automatically removed from WeakSet too!

🗺️ Map vs WeakMap: When to Use Which

Use Map When...

// WeakMap CAN'T do this!
const prices = new Map();
prices.set('apple', 1.50);
prices.set('banana', 0.75);

// WeakMap CAN'T do this!
const users = new Map();
users.forEach((data, user) => {
    console.log(user.name);
});

// WeakMap CAN'T do this!
const online = new Map();
console.log(`${online.size} users`);

// Shopping cart - can't disappear!
const cart = new Map();
cart.set('SKU123', { qty: 2 });
// Must survive until checkout

Use WeakMap When...

// Metadata goes when object goes
const metadata = new WeakMap();
metadata.set(domElement, {
    clicks: 0
});

const privateData = new WeakMap();

class User {
    constructor(password) {
        privateData.set(this, { password });
    }
}

const computed = new WeakMap();

function process(obj) {
    if (!computed.has(obj)) {
        computed.set(obj, calc(obj));
    }
    return computed.get(obj);
}

// Don't prevent user's objects from GC
class TooltipLib {
    tooltips = new WeakMap();
    add(el, text) {
        this.tooltips.set(el, text);
    }
}

Real-World Scenario: Tooltip Library

class TooltipLibrary {
    constructor() {
        this.tooltips = new Map();
    }
    
    addTooltip(element, text) {
        this.tooltips.set(element, { text });
    }
    
    // User MUST call this when removing elements!
    removeTooltip(element) {
        this.tooltips.delete(element);
    }
}

// User's code:
const lib = new TooltipLibrary();
const button = document.createElement('button');
lib.addTooltip(button, 'Click me!');

button.remove();
// User forgot to call lib.removeTooltip(button)!
// Memory leak - button stuck in YOUR Map forever!

class TooltipLibrary {
    constructor() {
        this.tooltips = new WeakMap();
    }
    
    addTooltip(element, text) {
        this.tooltips.set(element, { text });
    }
    
    // No removeTooltip needed!
}

// User's code:
const lib = new TooltipLibrary();
const button = document.createElement('button');
lib.addTooltip(button, 'Click me!');

button.remove();
// That's it! When button is GC'd, tooltip data goes too.
// YOUR library cannot cause memory leaks!

Decision Guide

🔧 DevTools Memory Debugging

Chrome DevTools provides powerful tools to find and fix memory leaks.

Opening Memory Tab

Memory Tab Options

Taking Heap Snapshots

Understanding Snapshot Columns

Finding Memory Leaks

Using Filters

In the "Filter by class" box, type:

Understanding Retainers

When you click an object, the Retainers panel shows WHY it can't be garbage collected:

Statistics View

Click on a Snapshot, then select Statistics tab at the bottom to see a pie chart of memory usage by type:

Pro Tips

📋 Summary

Memory Management Quick Reference

When to Use What

Memory Leak Prevention Checklist