Call Stack in JavaScript

The Call Stack :

A call stack keeps track of our functions; it’s basically a stack of functions that manages what we call the execution context. At the bottom of the call stack is our global execution context that’s always going to be at the bottom, and then we have our functions stacked on the top.

In that context, a stack is a data structure. It doesn’t have to be the JavaScript call stack; you can create any kind of stack, just like an array or a queue. Stacks are LIFO (Last In, First Out), which means the last thing in is always going to be the first thing out.

1. Stack of functions to be executed
2. `Manages execution contexts
3. Stacks are LIFO (last in, first out)

Here some example programs :

function first() {
  console.log('FIRST NUMBER');
}

function second() {
  console.log('SECOND NUMBER');
}

function third() {
  console.log('THIRD NUMBER');
}

first();
second();
third();

We have three functions named first, second, and third. They simply display messages using console.log. We call all of them in the global scope.

In the stack, the first function that starts running is placed at the top. In this case, it sits right on top of the global execution context. After it completes its execution, it pops off the stack. Then, the second function gets pushed on, following the terminology used for these data structures — getting pushed on and popped off. The same process applies to the third function.

Another Example :

function first(){
    console.log("FIRST NUMBER");
    
    second();
 }
 
  function second(){
    console.log("SECOND NUMBER");
    
     third();
 }
 
  function third(){
    console.log("THIRD NUMBER");
 }
 
 first();

At the beginning, we call the first() function. It runs and prints “FIRST NUMBER.” Then, the second function is called, and it waits in line until it completes. After that, the second function executes, and “SECOND NUMBER” is printed in the console. Next, the third function is called, runs, and prints “THIRD NUMBER” before joining the queue. This creates a sequence in the queue like this: [first, second, third].

After the execution is finished, the third function will pop off first, followed by the second function, and finally, the first function will pop off last it used LIFO (Last In, First Out) .

To understand the process, run your code in a web browser. Open the browser’s developer tools, go to the “Sources” tab, and add a breakpoint at the point where you call the first() function. When you start executing the code, the call stack (often labeled as "anonymous") will create its global execution context. Then, click the down arrow to follow and check the execution flow in the call stack.

Thank you for taking the time to read. I hope you’ve grasped the topic. Below is a program for you to solve, and I encourage you to provide your explanation in the comments.

function greet(name) {
    console.log("Hello, " + name + "!");
    countDown(3);
    console.log("Happy Birthday, " + name + "!");
}

function countDown(num) {
    if (num > 0) {
        console.log(num);
        countDown(num - 1);
    }
}

greet("Freddy");