JavaScript Call Stack Demystified: A Beginner’s Guide to Understanding the Event Loop!

Understanding the call stack in JavaScript might sound a bit intimidating, but don’t worry—I’ll break it down in a super easy-to-follow way. Once you get the hang of how the call stack works, the so-called “mysterious” event loop in Node.js will feel like a piece of cake! Let’s start by unraveling the basics of the call stack, and you’ll see how simple it is.

What is a Call Stack?

The call stack in JavaScript is like a stack of trays in a cafeteria. Each tray represents a function call. A tray is added to the stack when a new function is called. Once the function finishes, the tray is removed. The process always works from the top, following the rule of Last In, First Out (LIFO).

The Analogy: A Cafeteria Tray Stack

Imagine you’re at a cafeteria:

1. When you take a tray (call a function), it gets added to the top of the stack.
2. If you take another tray (call another function from inside the first one), it also gets added to the top.
3. When you finish with the top tray (function execution completes), it gets removed.
4. You keep working until all trays (function calls) are cleared.

The Code Example

function washHands() {
       console.log("Washing hands...");
     }
    
     function prepareFood() {
       console.log("Preparing food...");
       washHands(); // Calling washHands
     }
    
     function startCooking() {
       console.log("Starting to cook...");
       prepareFood(); // Calling prepareFood
     }
    
     startCooking(); // The program starts here 

Step-by-Step Breakdown with the Call Stack

• Initial State The call stack is empty.
• Step 1: Call startCooking() JavaScript encounters startCooking() and adds it to the stack.
• Call Stack:

startCooking

Step 2: Execute startCooking() Inside startCooking(), the first console.log gets added to stack and then popped immediately as there are no functions beside it and it prints the message. Then it encounters prepareFood() and adds it to the stack.

• Call Stack:

prepareFood
startCooking 

• Step 3: Call `prepareFood() Inside prepareFood(), the first console.log gets added to the call stack and gets popped. Then it encounters washHands() and adds it to the stack.

• Call Stack:

washHands
prepareFood 
startCooking 

• Step 4: Call washHands() Inside washHands(), the console.log runs, After completing, washHands() is removed (popped) from the stack.
• Call Stack

prepareFood 
startCooking 

• Step 5: Finish prepareFood() After washHands() is done, prepareFood() completes and is removed.
• Call Stack

prepareFood 
startCooking 

• Step 6: Finish startCooking() Finally, startCooking() completes and is removed, leaving the stack empty.
• Call Stack

(empty)

Visualizing the Stack with Trays

Here’s how the tray analogy matches the stack:

• Start Cooking (Tray 1) Add a tray for startCooking.
• Prepare Food (Tray 2) Add a tray for prepareFood.
• Wash Hands (Tray 3) Add a tray for washHands.
• Finish Washing Hands Remove the washHands tray.
• Finish Preparing Food Remove the prepareFood tray.
• Finish Cooking Remove the startCooking tray. Stack is now empty!

Why Does This Matter?

Order of Execution: The stack ensures functions execute in the correct sequence.

Errors: If a function calls itself infinitely, the stack keeps growing, leading to a stack overflow error

Final Takeaway

The call stack is JavaScript’s way of managing function calls, ensuring they execute in the correct order. It works like a cafeteria tray stack: last tray in, first tray out. By understanding this, you can debug errors and optimize your code better.