Loading...
See how the JavaScript memory model works with an interactive visualization. Watch primitives live on the stack, objects get allocated on the heap, and call frames get created and destroyed.
Loading visualization...
The stack tracks execution frames and quick local access, while the heap stores dynamically allocated objects, together forming the practical memory model behind JavaScript runtime behavior.
The call stack represents active execution contexts. Each function call pushes a frame, and returning pops it.
The heap is a larger memory region for objects, arrays, and functions that need dynamic lifetime management.
Variables in stack frames may hold primitives directly or references pointing into heap objects. This relationship explains identity, mutation, and garbage collection behavior.
The two regions differ in cost. Stack allocation is close to free because the engine only moves a pointer, and cleanup is automatic when the frame pops. Heap allocation has to find free space, and cleanup depends on the garbage collector deciding an object is no longer reachable.
They also differ in size. The stack is small and fixed, usually a few hundred thousand frames deep, which is why runaway recursion throws long before the heap is anywhere near full. The heap is large and grows on demand up to an engine limit.
Primitives like numbers, strings, and booleans behave as if they live in the frame itself, so copying one copies the value. Objects, arrays, and functions live in the heap, so copying a variable copies only the reference and both names point at the same object.
Interview framing: define Heap & Stack in one sentence, then explain one concrete runtime behavior and one common pitfall with a short code example.
The model is conceptual and implementation details can vary by engine optimization strategy.
Fix: Use stack and heap as a mental model for behavior, not as a strict byte-level storage contract.
Deep or unbounded recursion can exhaust stack space and throw stack overflow errors.
Fix: Use iterative patterns or tail-friendly designs where recursion depth is unknown.
Local variables can still hold references to shared heap objects, so mutation can affect other parts of the app.
Fix: Track object identity explicitly and avoid hidden shared mutations.
Popping a frame only removes that frame's bindings. If a closure, a timer, or a cache still references the object, it stays in the heap.
Fix: Look for what still holds a reference before assuming a leak is a garbage collector problem.
Common interview prompts with concise model answers.
The stack holds execution frames and local bindings in last-in-first-out order, with fast automatic cleanup and a small fixed size. The heap holds objects with dynamic lifetimes, costs more to allocate, and is reclaimed by the garbage collector when nothing reachable references the object.
function run() {
let count = 1; // primitive, lives with the frame
const config = { retries: 3 }; // object in the heap
const alias = config; // copies the reference only
alias.retries = 5;
console.log(config.retries); // 5
}
run(); // frame pops, config becomes unreachableNo. Memory layout is managed by the engine. Developers reason about behavior through high-level constructs and performance tools.
function update(user) {
user.name = "Ada";
}
const person = { name: "Tornike" };
update(person);
console.log(person.name); // "Ada"Treat primitives as living with the frame that declares them, which is why assigning one copies the value. Engines are free to optimize this, including boxing values into the heap, so the rule describes observable behavior rather than physical layout.
Because both variables can hold references to the same heap object identity.
Unbounded recursion or cyclic call chains that do not terminate before stack limits are reached.
Garbage collection reclaims heap objects that are no longer reachable from active roots.
Continue with these concepts to strengthen your mental model.
function greet(name) { const prefix = "Hello"; const msg = prefix + " " + name; console.log(msg);}greet("Alice");empty
empty
No output yet.