← Call Stack Scope Chain & Lexical Environment →

Memory Management in JavaScript

Learn how JavaScript manages memory, prevents leaks, and optimizes performance through automatic garbage collection and memory allocation strategies.

🧠 JavaScript Memory Model

JavaScript uses automatic memory management through garbage collection. Memory is allocated when objects are created and freed when they're no longer needed.

Stack Memory - Fixed size, stores primitive values and references
Heap Memory - Dynamic size, stores objects and complex data
Garbage Collector - Automatically frees unused memory

💡 Memory Lifecycle

Allocate - Memory assigned to objects
Use - Read/write operations
Release - Garbage collector frees memory

Key Concepts:

Primitive values: Stack allocation
Reference values: Heap allocation
Automatic garbage collection
Memory leaks can still occur

⚙️ Memory Allocation: Heap vs Stack

Stack Memory

Characteristics:

Fixed size allocation
Fast access (LIFO)
Stores primitive values
Stores function calls
Automatic cleanup

Stored in Stack:

let x = 10;
const y = "hello";
var z = true;

Heap Memory

Characteristics:

Dynamic allocation
Slower access
Stores objects/arrays
References stored in stack
Garbage collected

Stored in Heap:

let obj = {};
let arr = [];
function Foo() {}

🔄 Heap vs Stack in Action

See how different data types are stored in memory:

JavaScript Editor

// Heap vs Stack Memory
console.log("=== HEAP VS STACK MEMORY ===");

// Stack Memory (Primitive values)
let stackNumber = 42;           // Stored in stack
let stackString = "Hello";      // Stored in stack
let stackBoolean = true;        // Stored in stack

// Heap Memory (Reference values)
let heapArray = [1, 2, 3];      // Reference stored in stack, array in heap
let heapObject = {              // Reference stored in stack, object in heap
  name: "John",
  age: 30
};

function demonstrateMemory() {
  // Local variables in stack
  let localStack = 100;
  let localReference = [4, 5, 6]; // Reference in stack, array in heap
  
  console.log("Stack variables:", stackNumber, stackString);
  console.log("Heap variables:", heapArray, heapObject);
  console.log("Local stack:", localStack);
  console.log("Local reference:", localReference);
  
  // Modifying heap memory
  heapArray.push(4);            // Modifies heap, not stack reference
  heapObject.city = "New York"; // Modifies heap
  
  console.log("Modified heap:", heapArray, heapObject);
}

demonstrateMemory();

// Memory location demonstration
console.log("\n=== MEMORY LOCATIONS ===");
let a = 10;            // Stack: a = 10
let b = a;             // Stack: b = 10 (copy)
a = 20;                // Stack: a = 20, b still = 10
console.log(`a=${a}, b=${b}`);

Memory Visualization:

STACK MEMORY                    HEAP MEMORY
            ┌─────────────────┐            ┌─────────────────┐
            │ stackNumber: 42 │            │                 │
            │ stackString: "Hello" │       │ [1,2,3,4]      │
            │ heapArray: → ref1 │───────→│ {name:"John",   │
            │ heapObject: → ref2 │───┐   │  age:30,        │
            └─────────────────┘   │   │  city:"New York"}│
                                │   └─────────────────┘
                                └──→┌─────────────────┐
                                    │ [4,5,6]         │
                                    └─────────────────┘

🗑️ Garbage Collection

JavaScript's garbage collector automatically frees memory that is no longer reachable:

JavaScript Editor

// Garbage Collection Examples
console.log("=== GARBAGE COLLECTION ===");

// 1. Reference Counting (older method)
function referenceCountingDemo() {
  let objA = { name: "A" };
  let objB = { name: "B" };
  
  // Create circular reference
  objA.ref = objB;
  objB.ref = objA;
  
  console.log("Circular reference created");
  
  // Even after removing references, memory may leak in reference counting
  objA = null;
  objB = null;
  console.log("References nullified - garbage collection needed");
}

referenceCountingDemo();

// 2. Mark and Sweep Algorithm (modern)
function markAndSweepDemo() {
  // Global root
  let root = {
    children: []
  };
  
  // Create tree structure
  function createNode(name) {
    return {
      name: name,
      children: [],
      parent: null
    };
  }
  
  let node1 = createNode("Node 1");
  let node2 = createNode("Node 2");
  let node3 = createNode("Node 3");
  
  // Build relationships
  root.children.push(node1);
  node1.children.push(node2);
  node2.children.push(node3);
  
  console.log("Tree structure created");
  console.log("Root → Node1 → Node2 → Node3");
  
  // Break reference chain
  root.children = [];
  console.log("Root reference removed - entire tree becomes unreachable");
  
  // Garbage collector will mark:
  // 1. Start from roots (global object)
  // 2. Mark reachable objects (root is no longer referenced)
  // 3. Sweep unmarked objects (entire tree)
}

markAndSweepDemo();

// 3. Memory Leak Example
function memoryLeakDemo() {
  console.log("\n=== MEMORY LEAK EXAMPLE ===");
  
  let leakedArray = [];
  
  // Function that leaks memory
  function leakMemory() {
    const largeObject = {
      data: new Array(10000).fill("Leaked memory"),
      timestamp: Date.now()
    };
    
    // Keep reference forever
    leakedArray.push(largeObject);
    
    console.log(`Leaked ${leakedArray.length} objects`);
  }
  
  // Simulate memory leak
  for (let i = 0; i < 5; i++) {
    leakMemory();
  }
  
  console.log("Memory leaked! Array holds references to all objects");
  console.log("Garbage collector cannot free this memory");
}

memoryLeakDemo();

🗑️ Mark and Sweep Algorithm:

Start from root objects (global)
Mark all reachable objects
Sweep unmarked objects
Compact memory (optional)

⚡ Generational Collection:

Objects divided into generations (young/old)
Young generation collected frequently
Surviving objects promoted to old generation
Old generation collected less frequently

⚠️ Common Memory Leaks

These patterns can cause memory leaks in JavaScript applications:

JavaScript Editor

// Common Memory Leak Patterns
console.log("=== COMMON MEMORY LEAKS ===");

// 1. Accidental Global Variables
function createGlobalLeak() {
  // Forgot 'var', 'let', 'const' - becomes global!
  leakedGlobal = "I'm a global leak!";
  console.log("Accidental global created");
}

createGlobalLeak();
console.log("Can access leakedGlobal:", typeof leakedGlobal);

// 2. Forgotten Timers/Callbacks
function timerLeakDemo() {
  console.log("\n2. Timer/Callback Leaks:");
  
  let counter = 0;
  const intervalId = setInterval(() => {
    counter++;
    console.log(`Timer tick ${counter}`);
    
    if (counter >= 3) {
      console.log("Clearing interval (prevents leak)");
      clearInterval(intervalId);
    }
  }, 100);
  
  // If we don't clearInterval, timer keeps running
  // even if we lose reference to intervalId
}

timerLeakDemo();

// 3. DOM Reference Leaks
function domLeakDemo() {
  console.log("\n3. DOM Reference Leaks:");
  
  // Creating DOM elements
  const container = document.createElement('div');
  container.innerHTML = '<button id="leakyButton">Click me</button>';
  
  // Store reference
  const button = document.getElementById('leakyButton');
  const buttonRefs = [];
  
  // Keep reference even after removal
  buttonRefs.push(button);
  
  console.log("DOM element created and reference stored");
  console.log("Even if removed from DOM, reference prevents GC");
}

// 4. Closure Leaks
function closureLeakDemo() {
  console.log("\n4. Closure Memory Leaks:");
  
  function createClosure() {
    const largeData = new Array(1000).fill("Closure data");
    
    return function() {
      // Closure keeps reference to largeData
      console.log(`Closure has access to ${largeData.length} items`);
      return largeData.length;
    };
  }
  
  const closures = [];
  for (let i = 0; i < 5; i++) {
    closures.push(createClosure());
  }
  
  console.log("5 closures created, each holding largeData");
  console.log("Memory not freed until closures are garbage collected");
}

closureLeakDemo();

Memory Leak Prevention:

Leak Type	Cause	Solution
Global Variables	Missing var/let/const	Always declare variables
Timers/Intervals	Not cleared	Always clear when done
DOM References	Holding DOM elements	Use WeakMap/WeakSet
Closures	Holding large data	Release references

🚀 Memory Optimization

Techniques to optimize memory usage in JavaScript applications:

JavaScript Editor

// Memory Optimization Techniques
console.log("=== MEMORY OPTIMIZATION ===");

// 1. Object Pool Pattern
class ObjectPool {
  constructor(createFn) {
    this.createFn = createFn;
    this.pool = [];
    this.active = new Set();
  }
  
  acquire() {
    let obj;
    if (this.pool.length > 0) {
      obj = this.pool.pop();
    } else {
      obj = this.createFn();
    }
    this.active.add(obj);
    return obj;
  }
  
  release(obj) {
    if (this.active.has(obj)) {
      this.active.delete(obj);
      this.pool.push(obj);
    }
  }
}

console.log("1. Object Pool Pattern:");
const pool = new ObjectPool(() => ({ x: 0, y: 0, data: null }));
const obj1 = pool.acquire();
const obj2 = pool.acquire();
console.log("Acquired 2 objects from pool");
pool.release(obj1);
console.log("Released 1 object back to pool");

// 2. Array Buffer for Large Data
console.log("\n2. ArrayBuffer for Binary Data:");
const buffer = new ArrayBuffer(1024); // 1KB of raw memory
const int32View = new Int32Array(buffer); // View as 32-bit integers
console.log(`Created ArrayBuffer of ${buffer.byteLength} bytes`);
console.log(`Can store ${int32View.length} 32-bit integers`);

// 3. Weak References
console.log("\n3. Weak References (WeakMap, WeakSet):");
const weakMap = new WeakMap();
let domElement = { type: 'div', id: 'test' };

weakMap.set(domElement, 'Some metadata');
console.log("WeakMap holds reference weakly");
console.log("Value exists:", weakMap.has(domElement));

domElement = null; // Remove strong reference
// Garbage collector can now collect the object
// weakMap entry will be automatically removed

// 4. Memory Efficient Data Structures
console.log("\n4. Memory Efficient Structures:");

// Use Typed Arrays for numbers
const floatArray = new Float64Array(1000); // 8 bytes per element
console.log(`Float64Array: ${floatArray.length * 8} bytes total`);

// Use strings efficiently
const smallStrings = ["a", "b", "c"]; // Inefficient
const concatenated = "abc"; // More efficient
console.log("String concatenation saves memory");

// 5. Lazy Loading
console.log("\n5. Lazy Loading Pattern:");
function createExpensiveObject() {
  console.log("Creating expensive object...");
  return new Array(1000000).fill(0).map((_, i) => i);
}

const loader = LazyLoader();
console.log("Lazy loader created - no memory used yet");
const data = loader.getData(); // Memory allocated here
console.log(`Loaded ${data.length} items`);
loader.clearCache(); // Free memory
console.log("Cache cleared - memory can be garbage collected");

💡 Optimization Strategies:

Object Pooling:

Reuse objects instead of creating new ones

Weak References:

Use WeakMap/WeakSet for temporary references

Chunk Processing:

Process large data in chunks

Lazy Loading:

Load resources only when needed

📊 Monitoring & Debugging

Tools and techniques for monitoring memory usage:

JavaScript Editor

// Memory Monitoring and Debugging
console.log("=== MEMORY MONITORING ===");

// 1. Check Memory Usage (Node.js/Browser)
function checkMemoryUsage() {
  if (typeof performance !== 'undefined' && performance.memory) {
    const memory = performance.memory;
    console.log("Browser Memory Info:");
    console.log(`Used: ${(memory.usedJSHeapSize / 1048576).toFixed(2)} MB`);
    console.log(`Total: ${(memory.totalJSHeapSize / 1048576).toFixed(2)} MB`);
    console.log(`Limit: ${(memory.jsHeapSizeLimit / 1048576).toFixed(2)} MB`);
  } else {
    console.log("performance.memory not available in this environment");
  }
}

checkMemoryUsage();

// 2. Memory Profiling Simulation
console.log("\n=== MEMORY PROFILING SIMULATION ===");

class MemoryProfiler {
  constructor() {
    this.snapshots = [];
    this.startTime = Date.now();
  }
  
  takeSnapshot(label) {
    const snapshot = {
      label,
      timestamp: Date.now() - this.startTime,
      heapUsed: this.getHeapUsage()
    };
    this.snapshots.push(snapshot);
    console.log(`Snapshot ["${label}"]: ${snapshot.heapUsed.toFixed(2)} MB`);
  }
  
  getHeapUsage() {
    // Simulated heap usage
    return Math.random() * 100;
  }
  
  report() {
    console.log("\n=== MEMORY PROFILE REPORT ===");
    this.snapshots.forEach((snap, i) => {
      const prev = i > 0 ? this.snapshots[i - 1].heapUsed : 0;
      const diff = snap.heapUsed - prev;
      console.log(
        `[${snap.label}] ${snap.timestamp}ms: ${snap.heapUsed.toFixed(2)}MB (${diff > 0 ? '+' : ''}${diff.toFixed(2)}MB)`
      );
    });
  }
}

const profiler = new MemoryProfiler();
profiler.takeSnapshot("Initial");
// Simulate memory allocation
for (let i = 0; i < 3; i++) {
  const arr = new Array(1000).fill(0);
  profiler.takeSnapshot(`Allocation ${i + 1}`);
}
profiler.report();

// 3. Memory Leak Detection Pattern
console.log("\n=== LEAK DETECTION PATTERN ===");

// Simulate creating components without cleanup
for (let i = 0; i < 3; i++) {
  simulateLeak();
}

console.log(`${components.length} components created`);
console.log("All holding memory. Need cleanup method!");

// 4. Forcing Garbage Collection (Browser DevTools)
console.log("\n=== FORCING GARBAGE COLLECTION ===");
console.log("In Chrome DevTools:");
console.log("1. Open DevTools (F12)");
console.log("2. Go to Memory tab");
console.log("3. Click 'Collect garbage' button");
console.log("4. Take heap snapshots to compare");

Browser DevTools Memory Tools:

Chrome DevTools:

Performance tab
Memory tab
Heap snapshots
Allocation timeline

Firefox DevTools:

Memory tool
Allocations
Census view
Dominators view

Safari Web Inspector:

Timelines
JavaScript allocations
Memory timeline

🎯 Best Practices for Memory Management

✅ Do:

Use const/let instead of var
Clear intervals/timeouts
Remove event listeners
Use WeakMap for DOM references
Process large data in chunks
Use object pooling for frequent allocations

❌ Don't:

Create accidental global variables
Keep unnecessary DOM references
Forget to cleanup event listeners
Use closures for large data unnecessarily
Process entire large datasets at once
Ignore memory profiling results

← Call Stack Scope Chain & Lexical Environment →

JavaScript Tutorial

Memory Management in JavaScript

🧠 JavaScript Memory Model

💡 Memory Lifecycle

Key Concepts:

⚙️ Memory Allocation: Heap vs Stack

Stack Memory

Characteristics:

Stored in Stack:

Heap Memory

Characteristics:

Stored in Heap:

🔄 Heap vs Stack in Action

Memory Visualization:

🗑️ Garbage Collection

🗑️ Mark and Sweep Algorithm:

⚡ Generational Collection:

⚠️ Common Memory Leaks

Memory Leak Prevention:

🚀 Memory Optimization

💡 Optimization Strategies:

📊 Monitoring & Debugging

Browser DevTools Memory Tools:

Chrome DevTools:

Firefox DevTools:

Safari Web Inspector:

🎯 Best Practices for Memory Management

✅ Do:

❌ Don't:

Follow Us

Our Tools

Our Company

Special Tools