What is the call stack and use of call stack in JavaScript?

By Atharv Gyan

Introduction

A call stack is a data structure that keeps track of the functions that are currently being executed in a JavaScript program. It is a stack data structure, which means that functions are added to the top of the stack when they are called, and they are removed from the top of the stack when they return.

The call stack is used by the JavaScript engine to keep track of the execution context of each function. The execution context of a function includes information such as the function's name, its arguments, its local variables, and its scope chain.

The call stack is also used to debug JavaScript programs. When a JavaScript error occurs, the call stack can be used to track down the source of the error.

How the Call Stack Works

When a JavaScript program starts executing, the JavaScript engine creates a global execution context. This is the topmost function on the call stack. When a function is called, the JavaScript engine creates a new function execution context for the function and pushes it onto the call stack. The new function execution context inherits the local variables and scope chain from the calling function.

When a function returns, the JavaScript engine removes the function execution context from the call stack. The local variables and scope chain of the function are then destroyed.

The Call Stack and Recursive Functions

Recursive functions are functions that call themselves. When a recursive function is called, it is pushed onto the call stack. When the function returns, it is popped off the call stack. If the function calls itself again, it is pushed onto the call stack again.

The call stack can grow very large if a recursive function is called many times. If the call stack grows too large, it can cause a stack overflow error.

The Call Stack and Errors

When a JavaScript error occurs, the JavaScript engine will push an error object onto the call stack. The error object will contain information about the error, such as the error message, the line number where the error occurred, and the stack trace.

The stack trace is a list of the functions that were on the call stack when the error occurred. The stack trace can be used to track down the source of the error.

Using the Call Stack in JavaScript

The call stack can be used in JavaScript in a number of ways. For example, the call stack can be used to:

Debug JavaScript programs
Track the execution context of functions
Detect recursive functions
Handle errors

Example

The following code shows an example of how the call stack can be used in JavaScript:

function factorial(n) {
  if (n === 0) {
    return 1;
  } else {
    return n * factorial(n - 1);
  }
}

console.log(factorial(5)); // 120

In this code, the factorial ( ) function is recursive. The factorial ( ) function calls itself when the n parameter is greater than 0. The call stack is used to track the execution of the factorial ( ) function.

When the factorial ( ) function is called with the n parameter of 5, the following happens:

The factorial ( ) function is pushed onto the call stack.
The n parameter is evaluated.
The if statement is executed.
The return statement is executed.
The factorial() function is popped off the call stack.
The n * factorial(n - 1) expression is evaluated.
The factorial() function is called with the n parameter of 4.
The steps above are repeated until the factorial ( ) function is called with the n parameter of 0.
The return statement in the factorial ( ) function with the n parameter of 0 is executed.
The factorial ( ) function is popped off the call stack.
The 120 value is returned.