JavaScript Call Stack Explained (In the Easiest Way Possible!)

Ever tried cooking a meal while watching a show, replying to messages, and taking a call at the same time? Yeah, it turns into chaos. Your brain struggles to juggle everything, and at some point, you just burn the food.

That’s exactly why JavaScript has something called a call stack—so it doesn’t burn your program while trying to do too many things at once.

What’s a Call Stack? Imagine a Stack of Pancakes

Picture a stack of pancakes. You can only add one pancake on top at a time, and you can only remove the top pancake first before getting to the one below. You can’t just grab a pancake from the middle without making a mess.

This is how the JavaScript call stack works. It’s a stack data structure that follows the Last In, First Out (LIFO) rule. This means the last function that gets added to the stack is the first one to get removed.

Breaking It Down with a Real-Life Example

Let’s say you’re following a simple morning routine:

Wake up
Brush teeth
Eat breakfast
Get dressed

Now, imagine JavaScript is your personal assistant (let’s call it JSy) who helps you complete these tasks. But JSy can only focus on one task at a time (just like how JavaScript is single-threaded). So when you tell JSy your morning routine, here’s what happens:

Step 1: Adding Tasks to the Stack (Pushing)

JSy starts with the first task and adds it to the stack.

Call Stack:
[ wakeUp() ]

JSy completes wakeUp(), removes it from the stack (popping), and moves to the next task.

Call Stack:
[ brushTeeth() ]

This process continues until all tasks are done. At the end, the stack is empty again, and you’re ready to go.

Now Let’s See It in JavaScript

Here’s how this works in code:

function wakeUp() {
  console.log("Waking up...");
}

function brushTeeth() {
  console.log("Brushing teeth...");
}

function eatBreakfast() {
  console.log("Eating breakfast...");
}

function getDressed() {
  console.log("Getting dressed...");
}

function morningRoutine() {
  wakeUp();
  brushTeeth();
  eatBreakfast();
  getDressed();
}

morningRoutine();

When you run morningRoutine(), JavaScript processes each function step by step. If we visualize the call stack:

morningRoutine() gets added to the stack.
Inside morningRoutine(), wakeUp() is called and added to the stack.
wakeUp() completes and is removed from the stack.
Next, brushTeeth() is added and removed.
Then eatBreakfast() is added and removed.
Finally, getDressed() is added and removed.
The stack is empty again.

Boom! Routine complete.

What If We Add Nested Functions?

Things get more interesting when functions call other functions inside them.

function first() {
  console.log("First function");
  second();
}

function second() {
  console.log("Second function");
  third();
}

function third() {
  console.log("Third function");
}

first();

What Happens in the Call Stack?

When first() is called:

first() is added to the stack.
Inside first(), second() is called and added on top.
Inside second(), third() is called and added on top.
third() finishes and gets removed.
second() finishes and gets removed.
first() finishes and gets removed.
Stack is empty again.

Just like stacking pancakes, we remove the top function first before we can get to the one below.

The Dreaded Stack Overflow (Not the Website)

Ever heard of infinite loops? They happen when something never stops running. A similar thing can happen with the call stack when functions call themselves endlessly. This is called stack overflow, and it will break your program.

function crash() {
  crash();
}

crash(); // BOOM! Maximum call stack size exceeded.

Since crash() keeps calling itself without an exit condition, the call stack fills up and JavaScript freaks out, throwing a "Maximum call stack size exceeded" error.