The Call Stack
See how function calls are tracked.
The Call Stack is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Is the Call Stack?
The call stack is how JavaScript tracks which function is currently running and what to return to. Every function call is pushed on top; when it finishes, it is popped off.
It is a LIFO structure: Last In, First Out.
Pushing and Popping
When you call a function, a stack frame is pushed. When it returns, the frame is popped. Watch the order of logs as calls nest.
function first() {
console.log('first start');
second();
console.log('first end');
}
function second() {
console.log('second');
}
first();LIFO in Action
The most recently called function must finish before the one beneath it resumes. The inner call completes first even though it started last.
function a() {
console.log('enter a');
b();
console.log('exit a');
}
function b() {
console.log('enter b');
c();
console.log('exit b');
}
function c() {
console.log('c runs');
}
a();Synchronous Means Blocking
JavaScript runs one thing at a time on a single thread. While the stack has frames, nothing else runs. Synchronous code blocks until done.
console.log('start');
function busy() {
let sum = 0;
for (let i = 0; i < 1000; i++) sum += i;
return sum;
}
console.log(busy());
console.log('end');Return Values Flow Down
As each frame pops, its return value flows back to the caller waiting below it on the stack.
function square(n) {
return n * n;
}
function sumOfSquares(a, b) {
return square(a) + square(b);
}
console.log(sumOfSquares(3, 4));Recursion Grows the Stack
Each recursive call adds another frame. The stack grows until the base case is hit, then unwinds frame by frame.
function countdown(n) {
if (n === 0) {
console.log('liftoff');
return;
}
console.log(n);
countdown(n - 1);
}
countdown(3);Stack Overflow
The stack has a finite size. Recursion with no base case keeps pushing frames until the engine throws RangeError: Maximum call stack size exceeded.
function endless(n) {
return endless(n + 1);
}
try {
endless(1);
} catch (e) {
console.log(e.name);
}Order of Execution Is Predictable
Because the stack is strictly LIFO and synchronous, the order of synchronous logs is always deterministic. You can trace it by hand.
function outer() {
console.log(1);
inner();
console.log(3);
}
function inner() {
console.log(2);
}
outer();
console.log(4);Where Async Enters
The call stack only runs synchronous code. Functions like setTimeout hand work to the environment, which later places callbacks in queues. Those callbacks only run once the stack is empty.
This is the bridge to the event loop.
console.log('A');
setTimeout(() => console.log('B (later)'), 0);
console.log('C');The Stack Must Clear First
Even a zero-millisecond timer waits for all synchronous code to finish. The callback cannot run while frames remain on the stack.
console.log('sync 1');
setTimeout(() => console.log('timeout'), 0);
console.log('sync 2');
console.log('sync 3');Why the Call Stack Matters
Understanding the call stack explains why long synchronous loops freeze a page, why recursion can overflow, and why async callbacks always run last. It is the foundation for everything in the event loop.
function compute() {
return [1, 2, 3].reduce((a, b) => a + b, 0);
}
console.log('before');
console.log(compute());
console.log('after');Quick Check
What ordering principle does the call stack follow?
Recap: The Call Stack
You learned the engine's execution core:
- The call stack tracks running functions in LIFO order.
- JavaScript is single-threaded and synchronous code blocks.
- Recursion grows the stack and can overflow.
- Async callbacks wait until the stack is empty, leading us to the event loop.
Frequently asked questions
Is the “The Call Stack” lesson free?
Yes — the full text of “The Call Stack” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “The Call Stack”?
See how function calls are tracked. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “The Call Stack” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.