03 / 06

What is the Call Stack?

  1. 1

    The JavaScript engine uses a stack 'Execution Context Stack', 'Runtime Stack', or 'Machine Stack'.

  2. 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. 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. 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. 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. 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.

Difficulty: 4/10
Topics: execution context, stack frames, error handling

Scenario Questions

0-2 years experience
  1. 1

    If you call function A which calls B which calls C, what does the JavaScript call stack look like when C is running?

  2. 2

    Suppose you write a recursive function without a base case. What happens to the call stack, and how would you notice the problem in the console?

2-5 years experience
  1. 1

    We 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?

  2. 2

    During a code review you see a deep chain of synchronous calls, and the app sometimes crashes with "Maximum call stack size exceeded". How would you investigate and fix the issue?

5-8 years experience
  1. 1

    Our Node.js service parses JSON using a recursive parser and under heavy load we see occasional stack overflows. What strategies could you use to make the parser more robust while preserving its API?

  2. 2

    We want to build a custom error‑monitoring library that captures stack traces across async boundaries (promises, async/await, setTimeout). What design considerations and trade‑offs would you account for to ensure accurate stack information?

8+ years experience
  1. 1

    The company is planning to migrate a legacy codebase from callbacks to async/await. How would you refactor while ensuring existing stack‑trace based monitoring and alerts keep working?

  2. 2

    Design a cross‑service tracing system that aggregates call‑stack information from front‑end JavaScript, Node.js back‑ends, and other services. What architectural choices would you make to handle stack depth, privacy, and performance at scale?

Follow-up Questions

  • What steps would you take in Chrome DevTools to view the current call stack?
  • How does the call stack interact with JavaScript's event loop and microtasks?
  • If you needed to limit stack depth, what language or runtime features could you use?