Master JavaScript Memory: Stack, Heap, and Garbage Collection Explained

JavaScript Memory Overview

Because JavaScript has an automatic garbage‑collection mechanism, memory is often overlooked in front‑end development, leading many developers to have a vague or nonexistent understanding of how memory works.

The author realized that a clear grasp of memory is essential for deeper comprehension of fundamental concepts such as reference types, shallow vs. deep copying, closures, and prototypes.

1. Stack and Heap

Note: the stack can also be called a stack‑frame.

Unlike C/C++, JavaScript does not strictly separate stack and heap memory; virtually all data resides in the heap. However, the execution context uses a logical stack, so understanding stack principles remains important.

Stack behavior can be visualized with a ping‑pong‑ball box: the topmost ball is the last added and the first removed (LIFO). To access a ball at the bottom, you must remove the ones above it.

Heap access resembles a bookshelf: you retrieve a book by its title without moving other books, similar to how key‑value pairs in JSON are unordered.

2. Variable Object and Primitive Types

When an execution context is created, a special variable object is also created; primitive values are stored there.

Strictly speaking, the variable object itself lives in the heap, but its special role warrants separate discussion.

JavaScript has five primitive types: Undefined, Null, Boolean, Number, String. Primitives are accessed by value because the actual value is stored directly in the variable.

3. Reference Types and Heap

Reference types (e.g., Array) have variable sizes and their values are objects stored in the heap. JavaScript does not expose raw heap addresses; instead, variables hold a reference (address pointer) to the heap object.

When a reference type is copied, a new variable receives a reference to the same heap object, so changes via one variable affect the other.

Examples and diagrams illustrate how assigning var b = a creates independent primitive values, while var n = m copies a reference, causing both variables to point to the same object.

4. Memory Management

Although JavaScript automates memory allocation and reclamation, understanding the memory lifecycle helps developers write higher‑performance code.

The typical lifecycle includes allocation when a variable is declared, usage, and eventual release when the value is no longer reachable.

JavaScript’s garbage collector primarily uses a mark‑and‑sweep algorithm: it periodically scans for objects that are no longer referenced and frees their memory. Assigning a = null removes a reference, allowing the next GC cycle to reclaim the value.

Local variables are easily reclaimed after a function finishes; global variables are harder to free, so avoid unnecessary globals for better performance. For an in‑depth study, see the “JavaScript高级编程” book, section 4.3 on garbage collection.

By mastering these memory concepts, developers can more easily understand execution contexts, scope chains, closures, and prototype chains in future articles.