What is Call Stack

Part 1: What is a Stack?

Before understanding the call stack, let's understand a stack as a data structure. A stack follows the LIFO principle — Last In, First Out. Think of a stack of plates: you always add to the top and remove from the top. You can never remove a plate from the middle.

Stack operations

javascript

// Stack has two operations:
// push → add to the top
// pop  → remove from the top

let stack = [];

stack.push("A"); // stack: [A]
stack.push("B"); // stack: [A, B]
stack.push("C"); // stack: [A, B, C]

stack.pop();     // removes C → stack: [A, B]
stack.pop();     // removes B → stack: [A]

// LIFO: C was added last, C was removed first

Part 2: What is the Call Stack?

The call stack is a stack data structure that JavaScript uses to keep track of where it is in your program — specifically, which function is currently running and where to return to when that function finishes.

Every time a function is called, it's pushed onto the stack. When it returns, it's popped off. The function at the top of the stack is always the one currently executing.

A simple example

javascript

function greet(name) {
    let message = sayHello(name);
    console.log(message);
}

function sayHello(name) {
    return "Hello, " + name + "!";
}

greet("Arjun");

// Call Stack trace:
// 1. [greet("Arjun")]              ← greet is called, pushed
// 2. [greet, sayHello("Arjun")]    ← sayHello called inside greet, pushed
// 3. [greet]                       ← sayHello returns, popped
// 4. []                            ← greet returns, popped
// Stack is now empty

What is a Stack Frame?

Each entry in the call stack is called a stack frame. A frame stores:

Function reference

Which function is running — so the engine knows what code to execute.

Local variables

Variables declared inside that function — they only exist while the frame is on the stack.

Return address

Where to go back to after this function finishes — the line that called this function.

Part 3: Reading a Stack Trace

When an error occurs in JavaScript, you see a stack trace in the console. This is the call stack at the moment the error happened — read it from bottom to top to understand the chain of calls that led to the error.

Example error and its stack trace

javascript

function a() { b(); }
function b() { c(); }
function c() { throw new Error("Oops!"); }

a();

// Console shows:
// Error: Oops!
//   at c (script.js:3)   ← where the error happened
//   at b (script.js:2)   ← b called c
//   at a (script.js:1)   ← a called b
//   at script.js:5       ← a was called here

// Read bottom to top: script → a → b → c → error

Stack Overflow — when the stack is full

The call stack has a size limit. If you recurse infinitely (or call too many functions without returning), the stack runs out of space — this is a stack overflow.

javascript

function infinite() {
    infinite(); // calls itself forever, never returns
}

infinite();
// RangeError: Maximum call stack size exceeded

// Every call pushes a frame, nothing ever pops
// Stack: [infinite, infinite, infinite, ... thousands deep] → CRASH