What is the Call Stack?

Q: What is the Call Stack?

The JavaScript engine uses a stack called **'Execution Context Stack', 'Runtime Stack', or 'Machine Stack'.** It uses the LIFO principle (Last-In-First-Out). When the engine first starts executing the script, it creates a **global context** and pushes it on the stack. Whenever a function is invoked, the JS engine creates a **function stack** context for the function pushes it to the top of the call stack and starts executing it. When execution of the current function is complete, then the JavaScript engine will automatically pop the context from the call stack and it goes back to its parent. **Primitives:** Simple values like numbers ($5$) or booleans (true) are usually stored directly inside the Execution Context on the Stack because their size is fixed and known. **Objects/Arrays:** Because these can grow or shrink, they are stored in the Heap. The Execution Context on the Stack only holds a pointer (a memory address) that tells the engine where to find that object in the Heap. **Closures (The Exception):** If a function 'remembers' a variable from its parent scope (a closure), that variable can't be cleared when the parent function finishes. In this case, the JavaScript engine moves those specific variables from the Stack to the Heap so they don't disappear when the Execution Context is popped off the stack.

Difficulty: 4/10

execution context, stack frames, error handling

The Call Stack is a fundamental mechanism in JavaScript that keeps track of function execution. It's a data structure that follows the LIFO (Last In, First Out) principle, similar to a stack of plates.

1
The JavaScript engine uses a stack called 'Execution Context Stack', 'Runtime Stack', or 'Machine Stack'.
2
It uses the LIFO principle (Last-In-First-Out). When the engine first starts executing the script, it creates a global context and pushes it on the stack. Whenever a function is invoked, the JS engine creates a function stack context for the function pushes it to the top of the call stack and starts executing it.
3
When execution of the current function is complete, then the JavaScript engine will automatically pop the context from the call stack and it goes back to its parent.

How is it related to heap?

1
Primitives: Simple values like numbers ($5$) or booleans (true) are usually stored directly inside the Execution Context on the Stack because their size is fixed and known.
2
Objects/Arrays: Because these can grow or shrink, they are stored in the Heap. The Execution Context on the Stack only holds a pointer (a memory address) that tells the engine where to find that object in the Heap.
3
Closures (The Exception): If a function 'remembers' a variable from its parent scope (a closure), that variable can't be cleared when the parent function finishes. In this case, the JavaScript engine moves those specific variables from the Stack to the Heap so they don't disappear when the Execution Context is popped off the stack.

Scenario Questions

0-2 years experience

2-5 years experience

1We have a bug where an error thrown inside a promise's then handler shows a stack trace missing the original async function. Why might the call stack appear truncated, and how would you change the code to get a more useful trace?

Follow-up Questions