Call Stack in JavaScript

🧠 What is the Call Stack?

The Call Stack is a mechanism that JavaScript uses to keep track of function calls. It works on the principle of LIFO (Last In, First Out). When a function is invoked, it’s pushed onto the stack. When the function completes, it is popped off the stack.

Note

JavaScript is single-threaded, meaning only one command is executed at a time. The call stack makes this possible.

🔁 How It Works

Whenever a script calls a function, the interpreter adds it to the top of the stack and starts executing it. When the function returns, the interpreter removes it from the stack and resumes execution where it left off.

📌 Example

Call Stack Example

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

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

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

first();

🪜 Call Stack Flow

Here's the step-by-step process for the code above:

  • first() is called → pushed onto the stack.
  • second() is called inside first() → pushed onto the stack.
  • third() is called inside second() → pushed onto the stack.
  • console.log("Finished third") executes → third() completes → popped off.
  • console.log("Finished second") executes → second() completes → popped off.
  • console.log("Finished first") executes → first() completes → popped off.
Media content

⚠️ Stack Overflow

If too many function calls are made without returning (like in infinite recursion), the stack exceeds its size limit, causing a “Stack Overflow” error.

Stack Overflow Example

function recurse() {
  recurse();
}

recurse(); // 💥 RangeError: Maximum call stack size exceeded

📚 Summary

  • The call stack is used to manage function invocations in JavaScript.
  • Follows LIFO – last function called is the first to finish.
  • Helps in debugging using stack traces in errors.
  • Too many calls can cause a stack overflow.
>>“If you understand the call stack, you understand the backbone of JavaScript’s execution model.”

🔗 References