Scenario

JavaScript is single-threaded. It can do exactly ONE thing at a time.

And the reason we can prove that is hiding in plain sight - the Call Stack.

Every function you call gets pushed on top of a stack of plates. Every function that returns gets popped off. If you call a function that calls itself forever, the stack hits its ceiling (~10,000 frames) and JavaScript throws the classic RangeError: Maximum call stack size exceeded.

The Plate-Stack Model

The Call Stack is how JavaScript keeps track of "where am I in the code right now?" It's a LIFO (Last In, First Out) data structure.

Think of it like a stack of plates - you add a plate on top, and you always remove from the top first.

How It Works

Script starts -> Global Execution Context pushed onto the stack
Function called -> Function Execution Context pushed on top
Function returns -> Its context popped off the stack
Stack empty -> Program is done

Code Example

function multiply(a, b) {
    return a * b;
}

function square(n) {
    return multiply(n, n);
}

function printSquare(n) {
    var result = square(n);
    console.log(result);
}

printSquare(5);

Call Stack at each step:

Step 1: [Global]
Step 2: [Global] -> [printSquare(5)]
Step 3: [Global] -> [printSquare(5)] -> [square(5)]
Step 4: [Global] -> [printSquare(5)] -> [square(5)] -> [multiply(5,5)]
Step 5: [Global] -> [printSquare(5)] -> [square(5)]    // multiply returns 25
Step 6: [Global] -> [printSquare(5)]                    // square returns 25
Step 7: [Global]                                        // printSquare logs 25, returns
Step 8: []                                              // Program done

Stack Overflow - When Things Go Wrong

function infinite() {
    infinite(); // calls itself forever
}
infinite();
// RangeError: Maximum call stack size exceeded

The call stack has a size limit (~10,000-25,000 frames depending on the browser). Infinite recursion blows this limit.

Common Mistakes

Believing asynchronous callbacks run on the call stack while they're waiting - they don't; they wait in the task queue and only enter the stack when the event loop pulls them in (covered later).
Confusing "stack overflow" with memory exhaustion - a stack overflow means too many frames, not too much data; you can have a massive heap and still overflow the stack with 10,001 nested calls.
Forgetting to write a base case in recursion - the single most common cause of Maximum call stack size exceeded in real code.

Interview Questions

Q: What is the Call Stack in JavaScript?

It's a LIFO (Last In, First Out) data structure the engine uses to track which function is currently executing. Each function call pushes a new frame (execution context) on top; each return pops the topmost frame off.

Q: What happens when the Call Stack overflows?

JavaScript throws a RangeError: Maximum call stack size exceeded. This happens when a function calls itself recursively without a base case (stopping condition), causing infinite frames to pile up.

Q: Is JavaScript single-threaded? How does the Call Stack prove this?

Yes. JavaScript has only ONE call stack - it can execute only one piece of code at a time. There's no parallel execution on the main thread. This is why long-running synchronous code blocks the UI.

Q: What causes a stack overflow?

Uncontrolled recursion (a function that calls itself without a base case) or extremely deep call chains. The browser caps stack depth somewhere around 10,000-25,000 frames depending on the engine.

Learn More

Call Stack, Event Loop and Queues Explained

Call Stack