How to Understand the JavaScript Call Stack

The Call Stack is a data structure that JavaScript uses to track which functions are currently being executed and in what order they should return. It follows the Last In First Out principle, meaning the most recently called function is always completed and removed first. The Call Stack is the mechanism that makes function calls and returns work correctly in the correct order.

When a JavaScript file begins executing, the Global Execution Context is pushed onto the Call Stack first. It remains at the bottom of the stack for the entire lifetime of the program. It is only removed when the program finishes executing. Every function call pushes a new execution context on top of this global context.

When the engine encounters a function call, it creates a new Local Execution Context for that function and pushes it onto the top of the Call Stack. The engine executes code inside that context. When the function returns, its execution context is popped off the stack and the engine resumes executing from the calling context below it, using the returned value.

When function A calls function B which calls function C, the stack grows to three frames: global at the bottom, then A, then B, then C at the top. The engine executes C first. When C returns, its frame is popped and B resumes. When B returns, its frame is popped and A resumes. When A returns, its frame is popped and execution continues in the global context.

The Call Stack can only execute one thing at a time. If a function takes a long time to complete, such as a heavy computation, every other operation must wait for that frame to be popped off the stack. This is why long-running synchronous code blocks the browser from rendering and responding to user input. The entire page freezes because the Call Stack is occupied.

Recursion is when a function calls itself. Each recursive call pushes a new frame onto the Call Stack. If the recursion is correct, it eventually hits a base case and starts returning, popping frames off one by one. If there is no base case or the base case is never reached, the function calls itself infinitely, pushing frames until the stack runs out of memory.

Every environment has a maximum Call Stack size. In browsers and Node.js, this is typically around ten thousand to fifteen thousand frames depending on the engine and available memory. If recursion or mutual function calls exceed this limit, the engine throws a RangeError with the message 'Maximum call stack size exceeded'. This is commonly called a stack overflow.

The Call Stack is visible in browser DevTools and Node.js debuggers. When an error is thrown, the stack trace shows every frame that was on the Call Stack at the moment of the error, from the innermost function at the top to the outermost at the bottom. Reading a stack trace from bottom to top shows you the path of execution that led to the error, which is the most important debugging information you have.