Stack & Function Call Simulator

📦

Think of the Call Stack like a stack of boxes. When you call a function, a new box is placed on top. When the function finishes, that box is removed from the top. The computer can only access the top box at any time.

Choose a scenario:

Step 0 of 0

Press "Next Step" to start!

Watch the boxes on the right appear and disappear — that's the call stack!

💡

📄 What the code is doing:

Select a scenario and press Next Step.

⬆ NEW calls go ON TOP

🖥️ Computer Memory (Bottom)

⬇ Finished functions are REMOVED from top

Stack Height

0 boxes

Max safe: ~7

📋 What Happened

Start a scenario to see the log.

Step 1 of 7

Welcome!

Let's learn about the call stack.

📚

What is a Call Stack?

In the simplest possible terms

📦📦📦

Imagine stacking boxes on top of each other.

When your program calls a function, the computer creates a box for that function. Inside the box it stores:

📌 The function's name

🔢 Its local variables (like n = 4)

↩️ Where to go back when it's done

When the function finishes, the box is removed and the computer goes back to where it was before.

🍽️🍽️🍽️

Think of washing plates and stacking them.

🧼 You wash a plate → place it on top of the pile
🍽️ To get a plate → you take from the top

You CANNOT grab a plate from the middle — you must take from the top first.

This is called LIFO — Last In, First Out.
The last plate placed on top is the first one you pick up.

← You just added this (LAST IN)

← Added before

← Added first (bottom)

⬆ PUSH ⬇ POP

💥

What if you stack TOO many boxes?

The computer's stack has a size limit. If a function keeps calling itself forever without stopping, the stack fills up completely and the program CRASHES — this is called a Stack Overflow.

🚨 You've probably seen this error in your browser:
"Maximum call stack size exceeded"

✅ The fix: Every recursive function MUST have a base case — a condition that stops the recursion.

Try the "💥 Stack Overflow!" scenario in the simulator to see it happen!

🌍 Where you see the call stack in real life:

🌐

Browser error messages — "Uncaught TypeError at line 42, called from greet() called from main()" — that list of functions IS the call stack printed out!

📱

App crashes — When an app crashes, it shows a "stack trace" — the exact list of function calls that led to the crash.

🐍

Every programming language — Python, JavaScript, Java, C++ — they all use a call stack internally, every single time any function is called.

🔍

Debuggers — When you set a breakpoint and pause code, the "Call Stack" panel in VS Code / Chrome DevTools shows you exactly what you're simulating here!