Stop 04 · JavaScriptTopics · 27/36

Call Stack

In short

JavaScript does one thing at a time, and the call stack is how it remembers where it is. Learn to read it and stack traces stop looking scary.

The data structure JavaScript uses to track function calls — each call is pushed on, and popped off when it returns; a 'stack overflow' happens when it grows too deep. The stack provides the execution order for synchronous JavaScript and is also one of the most useful tools for understanding recursion and debugging runtime failures.

The jaadu mascot places one more steel plate on top of a tall pile in the mess.

Think of it like this

A pile of plates in the mess

The last plate stacked on top is the first one picked up. When a function calls another, the new one goes on top of the pile. It has to finish and come off before the one under it can carry on.

Watch it happen

Stack for morning()

push(global code)

global code

Top of the stack is coloured

1/8The script starts. The global code sits at the bottom of the stack.

The big ideas

What you need to know

Last in, first out

Calling a function pushes it on the stack. Returning pops it off. The top is whatever's running right now.

One stack, one thread

JavaScript runs your code on a single main thread. While the stack is busy, clicks and timers have to wait.

Stack overflow

A function that calls itself forever fills the stack and throws "Maximum call stack size exceeded".

Stack traces read top-down

An error shows the stack at that moment. The top line is where it broke, lines below show who called it.

See it in code

Walk through the code

1function chai() {2  console.trace("Inside chai");     // prints the current stack3  return "chai";4}5function breakfast() { return chai() + " + poha"; }6function morning() { return breakfast(); }7 8console.log(morning());   // "chai + poha"9// Trace shows: chai, then breakfast, then morning, then the global code10 11function forever() { return forever(); }12// forever();  // RangeError: Maximum call stack size exceeded

1/4chai prints the current stack with console.trace, then returns.

console.trace prints the stack without stopping your code. In DevTools you can also pause with a breakpoint and see it in the Call Stack panel.

Save yourself the pain

Common mistakes

Oops

Writing a recursive function without a base case.

Do this instead

Always have a condition that returns without calling itself again, like if (n === 0) return 1.

Oops

Running a huge loop on the main thread and wondering why buttons freeze.

Do this instead

While the stack is busy, nothing else runs. Split heavy work into chunks or move it to a Web Worker.

Your mission

Read your own stack trace

~15 min

Quick check

a() calls b(), b() calls c(), and c() throws an error. Which function is on the top line of the stack trace?

Go deeper

1Write a recursive function without a base case and watch the stack overflow error. Validate your understanding by applying it in a small practical example.
2Open DevTools' 'Call Stack' panel while paused on a breakpoint. Inspect at least one real example and note what each important field or stage represents.
3Understand why JS is single-threaded — it has one call stack.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download