Memory Management in JavaScript: A Complete Guide

Memory Management in JavaScript: A Complete Guide

JavaScript manages memory automatically (garbage collection). But understanding the lifecycle helps you avoid leaks and write efficient code.

The Memory Lifecycle

1. Allocate: the engine allocates memory for variables, objects, functions.
2. Use: read and write to the allocated memory.
3. Release: the garbage collector frees memory that is no longer reachable.

Stack vs Heap

• Stack: primitives (number, string, boolean, null, undefined, symbol, bigint) and references. Fast, LIFO, per-function-call frames.
• Heap: objects, arrays, functions. Unstructured, managed by the GC.

let x = 5;        // 5 is on the stack
let obj = { a: 1 }; // the object is on the heap; obj holds a reference
``
### Value vs Reference

- **Primitives** copy by value:
```js
let a = 5;
let b = a;
b = 10;
console.log(a); // 5 (independent)
``
- **Objects** copy by reference:
```js
let obj1 = { a: 1 };
let obj2 = obj1;
obj2.a = 2;
console.log(obj1.a); // 2 (same object)
``
### Reachability

An object is **reachable** if it can be accessed from the roots:
- Global object (`globalThis`).
- Call stack variables (locals of running functions).
- Closures (closed-over variables).
- DOM elements (in the document).

Unreachable objects are garbage collected.

### Common Memory Leaks

1. **Accidental globals**: `x = 5` without `let`/`const`/`var` creates a global.
2. **Forgotten timers**: `setInterval` never cleared.
3. **Event listeners on detached DOM elements**: the listener keeps the element alive.
4. **Closures keeping large objects alive**: a closure that references a big array.
5. **Unbounded caches**: a cache that grows without limit.
6. **Detached DOM references**: storing a reference to an element after removing it from the DOM.

### How to Detect Leaks

- **Chrome DevTools Memory tab**: take heap snapshots, compare them.
- **Performance tab**: record memory usage over time, look for growth.
- **`performance.memory`** (Chrome): check `usedJSHeapSize` over time.
- **Node.js**: `process.memoryUsage()` to monitor heap usage.

### How to Avoid Leaks

1. Use `let`/`const` (never create accidental globals).
2. Clear timers (`clearInterval`, `clearTimeout`).
3. Remove event listeners when elements are removed.
4. Do not close over large objects unnecessarily (extract what you need).
5. Use `WeakMap`/`WeakSet` for caches.
6. Bound caches (LRU, max size).
7. Null out references when no longer needed.

### The Takeaway

JS memory management: allocate (stack for primitives, heap for objects), use (value vs reference), release (GC frees unreachable objects). Leaks come from accidental globals, forgotten timers, listeners on detached elements, closures over large objects, and unbounded caches. Detect with DevTools; avoid with good cleanup practices.