The Call Stack in JavaScript & TypeScript - Simple & Code Example

The call stack is a data structure that helps keep track of the flow of a program's execution. It is essentially a series of nested function calls, where each function call is added to the top of the stack and removed from the bottom of the stack as it returns. This process continues until the last function call returns, at which point the stack is empty and the program terminates.

In JavaScript and TypeScript, the call stack is used to keep track of the execution context of each function call. The execution context is a collection of information about the current state of a function, including the values of its variables and the arguments that were passed to it.

Let's take a look at an example to see how the call stack works in JavaScript and TypeScript. Here's some simple JavaScript code:

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

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

function third() {
  console.log("Third function called");
}

first();

When this code is executed, the first function is called, which then calls the second function. The second function, in turn, calls the third function. Each function call is added to the top of the stack, like this:

third()
second()
first()

As each function returns, it is removed from the top of the stack, like this:

second()
first()

And finally:

first()

The final function returns, the stack is empty, and the program terminates.

If an error occurs during the execution of one of the functions, it is caught by the JavaScript engine and the program terminates. The call stack is then used to trace the error back to the function that caused it.

The call stack is an essential aspect of how programs are executed in JavaScript and TypeScript. It helps keep track of the flow of a program's execution and is used to manage the execution context of each function call.