LinkedIn Hook

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.

In this lesson you'll see the call stack evolve step-by-step through a real example, learn why infinite recursion crashes the engine, and finally understand why "JavaScript is single-threaded" is not just a buzz phrase but a direct consequence of having ONE call stack.

If you've ever stared at a stack trace and wondered what those frames actually represent — read this.

Read the full lesson -> [link]

#JavaScript #InterviewPrep #CallStack #JSEngine #StackOverflow #Frontend #CodingInterview

Call Stack thumbnail

What You'll Learn

What the Call Stack is and the LIFO rule it follows
How function calls push and pop execution contexts step-by-step
Why infinite recursion throws RangeError: Maximum call stack size exceeded
Why JavaScript is single-threaded and what that actually means

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.

Call Stack visual 1

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.

Quick Reference — Cheat Sheet

CALL STACK — THE RULES

  - LIFO: last frame pushed is the first popped
  - One stack per thread; JS main thread has exactly ONE
  - Script start   -> GEC pushed (bottom of stack)
  - Function call  -> new FEC pushed on top
  - Function return -> topmost FEC popped
  - Stack empty    -> program done

  Overflow = too many frames (not too much memory)
  Always write a base case for recursion.

Previous: Execution Context Next: Hoisting

This is Lesson 1.2 of the JavaScript Interview Prep Course — 14 chapters, 87 lessons.

Call Stack