Have you ever encountered the “Maximum call stack size exceeded” error in JavaScript? Ever wondered what exactly the event loop is and how it’s related to this error? Well, you’re in for a treat because we’re about to break it all down with some real-world analogies!
Meet Your Personal Assistant (PA)
Imagine you have a personal assistant (PA) who follows your every command. Sounds great, right? But there’s a catch — your PA can only do one task at a time. If you ask them to make coffee, they’ll focus solely on that until it’s done. If you then ask them to wash the dishes, they’ll finish the coffee first before even looking at the sink.
As a boss, you’d prefer a more efficient workflow. Maybe while the milk is boiling for the coffee, the PA could wash a few dishes instead of just standing around. That way, things get done faster.
This is exactly how JavaScript operates—it is Single-threaded and uses a Call Stack to manage function execution. But don’t worry! There’s a mechanism that helps JavaScript to do multitasking (sort of). Let’s break it down.
The Call Stack: JavaScript’s To-Do List
Think of the call stack as JavaScript’s to-do list. Whenever a function is executed, it gets pushed onto the stack. Once it’s finished running, it popped from the stack. Basically, a Stack follows the LIFO (Last In, First Out) principle, meaning the last function added is the first one to be removed.
Example:
Here’s what happens step by step:
1. `makeCoffee()` is called → pushed onto the call stack.
3. `doTheDishes()` is called → pushed onto the call stack.
4. `doTheDishes()` executes and logs “Doing the dishes…” → popped off from the stack.
Pretty straightforward, right? Each function waits for the previous one to be completed before executing.
So, “Call Stack” can have only one function inside at a time?
Is this So, Why Does “Maximum Call Stack Size Exceeded” Happen?
Think of calling a function and this will be pushed into the Call Stack and inside that function it calls another function, and it is now being pushed into the Call Stack and goes on. In this situation Call Stack will keep getting functions pushed inside to be executed. What if there is no end to this? What if the Call Stack keeps getting functions inside?
So, the “Maximum Call Stack Size Exceeded” error happens when a function repeatedly calls itself without a proper exit condition or continuously invokes other functions, causing the call stack to overflow beyond JavaScript’s limit.
Example of infinite recursion:
Here comes the JavaScript’s Superhero:
To make our PA (JavaScript) more efficient, we need a better system. This is where the mechanism our super hero comes in which is called as the Event loop. It ensures that JavaScript doesn’t get stuck waiting for slow operations like fetching data from a server, timers, or user interaction (like click or scroll — it is called anytime in the execution not at the desired step) and these are handled by something called the Web APIs. Hurray! a new thing came into light.
Asynchronous JavaScript in Action:
Let’s tweak our coffee-making scenario to use asynchronous programming:
What Happens Here?
1. `makeCoffee()` is called and JS pushed it in to the Call Stack and Boiling milk… is logged and comes to the next line.
2. `setTimeout()` is now pushed into the call stack and since it is handled by the Web APIs ,it is then pushed to it and schedules “Milk is ready, making coffee!” to run after 3 seconds.
3. `makeCoffee()` is completed now and is removed from the call stack.
4. `doTheDishes()` runs and it is pushed to the Call stack and logs “Doing the dishes…”.
5. By this time i.e after 3 seconds our JS finishes boiling the Milk and its corresponding text “Milk is ready, making coffee!” has to be logged. How will it be logged?. Once its required 3 seconds is done, it will be now moved to something called the Task Queue. Hurray! We found out another silent hero now.
But how the next sequence of actions will be done. Queue will follow the FIFO principle where as the Element getting inside first will be First element to come outside. Our super hero Event Loop will constantly run between the Task queue and the Call Stack. If the Call Stack is empty and if any item is pushed into the Task Queue, it will then bring into the Call Stack and execute it. By using this our “Milk is ready, making coffee!” text will move from Task Queue to Call stack and will be executed.
This is how JavaScript achieves Asynchronous behavior while still being single-threaded!
What Helps the Event Loop?
1. Web APIs — Handle async operations like `setTimeout`, `fetch()`, and DOM events.
2. Task Queue — Stores callbacks waiting to be executed.
3. Event Loop — Moves tasks from the queue to the call stack when it’s empty.
Wrapping Up
By now, you should have a clear understanding of:
✔️ The Call Stack and why it follows LIFO.
✔️ Why “Maximum call stack size exceeded” happens (infinite recursion).
✔️ How Web APIs, Task Queue, Call Stack and the Event Loop work together.
✔️ How JavaScript manages asynchronous tasks without actually being multi-threaded.
Next time you see “Maximum call stack size exceeded,” you’ll know exactly what’s happening under the hood. And more importantly, you now understand how JavaScript juggles tasks like a smart personal assistant rather than a clueless one!
Happy coding! 🚀
