Learn Understanding the Call Stack | Foundations of Asynchronous JavaScript

To understand how JavaScript executes your code, you need to know about the call stack. The call stack is a data structure that keeps track of which function is currently running and what should happen after that function finishes. When your code calls a function, JavaScript adds it to the top of the stack. If that function calls another function, the new call is added to the stack as well. Once a function completes, it is removed from the stack, and execution continues with the previous function. You can picture the call stack as a stack of plates: the last plate you put on is the first one you take off.


              123456789101112131415161718192021
            
function first() {
  second();
  console.log("Finished first");
}

function second() {
  third();
  console.log("Finished second");
}

function third() {
  console.log("Finished third");
}

first();
/*
Output:
Finished third
Finished second
Finished first
*/

Sometimes, if your code calls functions in a way that never ends—such as a function that keeps calling itself without a condition to stop—this can cause a stack overflow. Stack overflow happens when the call stack grows beyond its allowed limit, usually because of infinite or very deep recursion. When this happens, JavaScript cannot continue and throws an error.

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you explain how the call stack works with asynchronous code in JavaScript?

What happens if I have deeply nested function calls?

Can you give an example of a stack overflow error in JavaScript?

Awesome!

Completion rate improved to 3.57

Swipe to show menu


              123456789101112131415161718192021
            
function first() {
  second();
  console.log("Finished first");
}

function second() {
  third();
  console.log("Finished second");
}

function third() {
  console.log("Finished third");
}

first();
/*
Output:
Finished third
Finished second
Finished first
*/

Everything was clear?

Thanks for your feedback!

Section 1. Chapter 4