The Call Stack
See how function calls are tracked.
The Call Stack is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “The Call Stack” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “The Call Stack”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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.