2Minutes: Call Stack In JavaScript

What is Call Stack in JavaScript?

It is where our code stacks on top of each other to get executed. Please review our Stack & Queue post, as today’s article heavily depends on it.

Let’s have a look at the following:

console.log("Program starts");

function func1() {
  console.log("Pushed func1() onto the stack");
  return "func1() finished";
}

function func2() {
  console.log("Pushed func2() onto the stack");
  return func1();
}

console.log(func2());

/*
*  Output:
*          1 - Program starts
*          2 - Pushed func2() onto the stack
*          3 - Pushed func1() onto the stack
*          4 - func1() finished
*/

console.log("Program starts");

function func1() {
  console.log("Pushed func1() onto the stack");
  return "func1() finished";
}

function func2() {
  console.log("Pushed func2() onto the stack");
  return func1();
}

console.log(func2());

/*
*  Output:
*          1 - Program starts
*          2 - Pushed func2() onto the stack
*          3 - Pushed func1() onto the stack
*          4 - func1() finished
*/

“Program starts” is the first output because it gets executed immediately as it enters the Call Stack. Then, we get the outputs “Pushed func2() onto the stack” and “Pushed func1() onto the stack” as func2() and func1() get executed. After that, func1() returns "func1() finished" to func2(), which simply returns it. From this, we can understand that functions only leave the Call Stack after they finish executing and return control to their caller.

That’s 2Minutes, see you in the next one !

Sources

https://www.geeksforgeeks.org/javascript/what-is-the-call-stack-in-javascript

https://www.freecodecamp.org/news/understanding-the-javascript-call-stack-861e41ae61d4