Imagine you're planning a road trip from one city to another, and you need to make several stops along the way, but you forgot your map behind you, how will you complete your journey?

A call stack is like a map, It helps you keep track of where you are and where you need to go next.

As you start your journey, you mark your starting location on the map. Then, you plan your route to the first stop, mark it on the map, and set off. Once you reach the first stop, you mark it as complete on the map and plan your route to the next stop.

As you continue your journey, you add each new stop to the map and mark them as complete when you arrive. The map helps you keep track of the places you've been and the places you still need to go. Without the map, you might get lost or forget where you need to go next.

In programming, a call stack works similarly. When you call a function, the program adds it to the call stack. The call stack keeps track of the current function being executed and the location of the program's execution. When the function completes its execution, it is removed from the call stack, and the program returns to the previous function or location.

Without a call stack, it would be challenging to keep track of where the program is in its execution and which function is currently being executed. The call stack is like a map that helps the program navigate its journey through the code.

MDN web docs define it in the following way:

A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

So a call stack is a data structure that uses the Last In, First Out (LIFO) principle to temporarily store and manage function invocation (call). It is synchronous since the function execution, is done, one at a time, from top to bottom.

Now let's visualize it by executing a piece of code:

function first() {
  console.log("Coming from first function");
  second();
   console.log("Coming from first function after executing second");
}
function second() {
  console.log("Coming from second function");
}


first();
console.log("The end");

Step 1

first() function is invoked first. It is added to the call stack list.

Step 2

All lines of code inside the first() function is going to be executed

Inside the first() function we can see that console.log("Coming from first function"), it is executed and pulled out of the call stack.

Note that the first() is still inside the call stack, it is not done yet.

Step 3

So, in the next line of code inside first(), we Get to the second() function invocation.

The second() function is added to the call stack list.

Now the code inside second() is called to be executed.

After console.log("Coming from second function") is executed:

After this the second() is deleted from call stack.

Step 4

Now we return execution to the line that is invoked second() and continue executing the rest of the first() function.

console.log("Coming from first function after executing second") is executed.

When everything inside the first() function has been executed, return to its invoking line to continue executing the rest of the JS code.

first() function from the call stack list is deleted/pulled out.

Step 5

Now the last line of code is called to be executed.

After this, the call stack becomes fully empty.

This is the output:

So that's how the call stack works.

In conclusion, a call stack is a fundamental concept in computer science and programming that plays a crucial role in managing the execution of programs.

Understanding how the call stack works is important for any programmer, as it allows them to diagnose and debug issues that may arise during program execution. By analyzing the call stack, programmers can trace the path of execution and identify any errors or exceptions that may occur.

Overall, a solid understanding of the call stack is crucial for any programmer, and it is a concept that is worth studying in depth. By mastering the call stack, programmers can become more efficient and effective at diagnosing and solving problems in their code.

Resources

Loupe : Tool used to visualize callstack

MDN Web Docs : Call stack