The call stack is how JavaScript keeps track of where it is. Every function call pushes a new frame on top, every return pops one off.
Save
Complete lesson & earn 250 PX
The call stack follows Last In, First Out. The Global Execution Context sits at the bottom. Functions push on top when called and pop off when they return.
EXERCISE
3When a function calls itself forever without stopping, the call stack fills up and crashes. Understanding why helps you write safer code.
Save
A stack overflow is like stacking plates until the shelf collapses. Every recursive call adds a plate. If you forget to stop, crash.
The classic stack overflow:
function oops() {
oops(); // calls itself, forever
}
oops();
// Error: Maximum call stack size exceeded
// What happened:
// [GEC, oops()]
// [GEC, oops(), oops()]
// [GEC, oops(), oops(), oops()]
// ... 10,000+ layers later...
// CRASH!
The fix: always have a stopping condition:
function countdown(n) {
if (n <= 0) {
console.log("Done!");
return; // STOP here, no more calls
}
console.log(n);
countdown(n - 1);
}
countdown(3);
// Output:
// 3
// 2
// 1
// Done!
// Stack at deepest point:
// [GEC, countdown(3), countdown(2), countdown(1), countdown(0)]
// Then it unwinds cleanly
Other names for the call stack:
| Name | Same Thing |
|---|---|
| Call Stack | Yes |
| Execution Context Stack | Yes |
| Program Stack | Yes |
| Machine Stack | Yes |
Key Insight: The call stack is the backbone of execution. It decides what runs next, tracks where to return after a function finishes, and enforces the single-threaded nature of the language. When you see an error stack trace in your console, you are literally reading the call stack: it shows you exactly which functions were active when the error occurred. This is your most powerful tool.
EXERCISE
1The call stack is how JavaScript keeps track of where it is in your code. Think of it as a stack of plates: the one on top is the one being handled right now.
can only do one thing at a time. So when a function calls another function, which calls another function, how does it remember where to go back? The call stack.
The stack of plates analogy:
function first() {
console.log("first");
second();
console.log("back in first");
}
function second() {
console.log("second");
}
first();
// Call Stack Timeline:
// 1. [Global]
// 2. [Global, first()] <-- first() pushed on
// 3. [Global, first(), second()] <-- second() pushed on
// 4. [Global, first()] <-- second() done, popped off
// 5. [Global] <-- first() done, popped off
// 6. [] <-- program complete
Output:
first
second
back in first
Key Insight: The call stack follows the Last In, First Out (LIFO) rule. The function that was called most recently is the first one to finish and get removed. Just like a stack of plates: you always take the top plate off first. The Global Execution Context (GEC) sits at the bottom and is removed last when the program ends.
Save
EXERCISE
2Every function call pushes a new context onto the stack. Every return pops one off. The program ends when the stack is empty.
Let us trace a deeper example where functions call other functions, and watch the stack grow to three levels then shrink back to zero.
A three-level deep call stack:
function outer() {
console.log("outer start");
middle();
console.log("outer end");
}
function middle() {
console.log("middle start");
inner();
console.log("middle end");
}
function inner() {
console.log("inner");
}
outer();
// Step-by-step call stack:
// 1. [GEC]
// 2. [GEC, outer()]
// 3. [GEC, outer(), middle()]
// 4. [GEC, outer(), middle(), inner()] <-- deepest point
// 5. [GEC, outer(), middle()] <-- inner() returned
// 6. [GEC, outer()] <-- middle() returned
// 7. [GEC] <-- outer() returned
// 8. [] <-- program ends
// Output:
// outer start
// middle start
// inner
// middle end
// outer end
The call stack has a maximum size (usually around 10,000-15,000 frames depending on the browser). If you accidentally create an infinite loop of function calls (function A calls A calls A...), the stack overflows and you get the famous error: . This is called a .
Save