What is the Call Stack?

The call stack is the data structure the JS engine uses to track function execution. It's a single-threaded LIFO stack — here's how it works and why a busy stack freezes the page.

4 min read
JavaScript
Event Loop
Fundamentals

TABLE OF CONTENTS
What is the Call Stack?

The call stack is the data structure the JavaScript engine uses to track function execution. When you call a function, it's pushed onto the stack. When it returns, it's popped off. The stack can only hold one frame at a time — this is what "single-threaded" means.


How It Works

The call stack over time:

Each function call creates a stack frame containing the function's arguments, local variables, and return address. When the function finishes, the frame is discarded. The engine always runs the topmost frame — the function currently executing.


Stack Overflow

The call stack has a fixed maximum size. If functions call themselves recursively without an exit condition, the stack overflows:

The same error occurs with deep recursion even when the logic is correct — a recursive function that calls itself 50,000 times will overflow regardless of whether it has a base case. The limit varies by engine (typically ~10,000–50,000 frames).


The Stack and the Event Loop

The call stack is directly connected to the event loop. The event loop's only job is: when the call stack is empty, pick the next task from the queue and push it onto the stack.

setTimeout(fn, 0) doesn't run fn immediately. It queues fn as a task, and the event loop only picks it up when the call stack is completely empty. All synchronous code must finish first.


Blocking the Stack

A busy call stack blocks everything — the event loop can't pick up new tasks until the stack is clear. This is why a long-running function freezes the page:

The browser can't render a frame or handle user input because the event loop is waiting for the stack to empty. This is the mechanism behind long tasks and poor INP scores.


Stack Traces

When an error is thrown, the engine captures the current call stack as a stack trace — the sequence of function calls that led to the error, from bottom (entry point) to top (where it threw):

Each line is a stack frame. The trace reads bottom-to-top: the anonymous script called printSquare, which called square, which called multiply, where the error occurred.


The call stack is the simplest part of JavaScript's execution model, but understanding it is the prerequisite for understanding the event loop, async code, and why long tasks freeze the UI. If the stack is busy, nothing else runs — period.


Let's Connect

© 2026 Naveen Karthik // Built with React & MUI