The call stack in Javascript

The call stack in Javascript

In JavaScript, the call stack is a data structure that is used to keep track of function calls. Whenever a function is called, a new frame is pushed onto the top of the call stack. This frame contains information about the function call, including its arguments and the location in the code where the function was called from.

As the function executes, any additional function calls made within it will result in new frames being pushed onto the stack. Each frame is associated with a particular function call, and the order in which the frames are arranged on the stack reflects the order in which the function calls were made.

When a function completes its execution, its frame is popped off the top of the stack, and control returns to the function that made the original call. This continues until all functions have completed their execution and the call stack is empty.

The call stack is important in JavaScript because it helps to ensure that functions are executed in the correct order, and that memory is used efficiently. However, if a function is called recursively too many times or if the call stack becomes too large, it can result in a stack overflow error.

Sure, here’s an example to help illustrate how the call stack works in JavaScript:

function greet(name) {
 console.log(`Hello, ${name}!`);
}
function sayHello() {
 const name = 'John';
 greet(name);
 console.log('How are you doing?');
}
sayHello();

In this example, we have two functions: `greet()` and `sayHello()`. The `sayHello()` function calls the `greet()` function and passes in a `name` argument.

When we invoke `sayHello()`, a new frame is added to the top of the call stack, which represents the `sayHello()` function call. Within this frame, the `name` variable is set to `John`. Then, the `greet()` function is called with `name` as its argument.

A new frame is added to the top of the call stack to represent the `greet()` function call. Within this frame, the `name` variable is set to `John` and the `console.log()` statement is executed, printing `Hello, John!` to the console.

After the `greet()` function completes its execution, its frame is removed from the top of the call stack, and the control returns to the `sayHello()` function. The next statement in `sayHello()`, which is another `console.log()` statement, is executed and it prints `How are you doing?` to the console.

Once `sayHello()` completes its execution, its frame is removed from the top of the call stack, and the call stack becomes empty.

So, the call stack for this example would look something like this:

greet(‘John’) // added to the stack after `sayHello()` calls `greet()`
sayHello() // added to the stack when `sayHello()` is invoked

Once the `greet()` function completes its execution, its frame is popped off the top of the stack, and the call stack looks like this:

sayHello() // only `sayHello()` remains on the stack

After `sayHello()` completes its execution, its frame is popped off the top of the stack and the call stack becomes empty:

(empty)

That’s a simple example of how the call stack works in JavaScript.

See you all in the next article. Have a nice day ahead 😁