Call stack behavior in Javascript - Step-by-Step Execution

Concept Flow - Call stack behavior

Start main program

↓

Call function A

↓

Call function B inside A

↓

Call function C inside B

↓

Function C returns

↓

Function B returns

↓

Function A returns

↓

Program ends

The call stack tracks function calls in order. Each call adds a frame on top. When a function finishes, its frame is removed, returning control to the previous function.

Execution Sample

Javascript

function A() {
  B();
}
function B() {
  C();
}
function C() {
  console.log('Done');
}
A();

This code calls A, which calls B, which calls C, printing 'Done'. The call stack grows and shrinks as functions call and return.

Execution Table

Step	Action	Call Stack (top to bottom)	Output
1	Start program	[]
2	Call A()	[A]
3	Inside A(), call B()	[B, A]
4	Inside B(), call C()	[C, B, A]
5	Inside C(), execute console.log('Done')	[C, B, A]	Done
6	C() returns	[B, A]
7	B() returns	[A]
8	A() returns	[]
9	Program ends	[]

💡 All functions returned, call stack is empty, program ends.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	After Step 6	After Step 7	After Step 8	Final
callStack	[]	[A]	[B, A]	[C, B, A]	[C, B, A]	[B, A]	[A]	[]	[]
output	""	""	""	""	"Done"	"Done"	"Done"	"Done"	"Done"

Key Moments - 3 Insights

Why does the call stack grow when a function calls another function?

Each function call adds a new frame on top of the stack to keep track of where to return after the called function finishes, as shown in steps 2 to 4 in the execution table.

When does a function frame get removed from the call stack?

A function frame is removed when the function finishes execution and returns control to the caller, as seen in steps 6 to 8 where C, B, and A return respectively.

Why is the output 'Done' printed only when C() is called?

Because console.log('Done') is inside function C, so the output appears at step 5 when C() executes, while the call stack still contains C, B, and A.

Visual Quiz - 3 Questions

Look at the execution table, what is the call stack after step 4?

A [C, B, A]

B [B, A]

C [A]

D []

💡 Hint

Check the 'Call Stack' column at step 4 in the execution table.

At which step does function B return and get removed from the call stack?

A Step 5

B Step 7

C Step 6

D Step 8

💡 Hint

Look for when B disappears from the call stack in the execution table.

If function C did not call console.log, what would be the output after step 5?

A Error

B "Done"

C "" (empty string)

D Undefined

💡 Hint

Refer to the 'Output' column in the execution table at step 5.

Concept Snapshot

Call stack tracks function calls in order.
Each call adds a frame on top.
When a function returns, its frame is removed.
Stack grows with nested calls, shrinks on returns.
Helps JavaScript know where to resume after calls.

Full Transcript

The call stack is a structure that keeps track of function calls in JavaScript. When the program starts, the stack is empty. Calling function A adds A to the stack. Inside A, calling B adds B on top. Inside B, calling C adds C on top. When C runs console.log('Done'), it prints 'Done'. After C finishes, it returns and is removed from the stack. Then B returns and is removed, then A returns and is removed. Finally, the stack is empty and the program ends. This shows how the call stack grows with calls and shrinks with returns, helping JavaScript manage function execution order.