JavaScript’s Event Loop: Explained Like a Five-Star Restaurant

Imagine a restaurant with one of the best services in town yet relies on a single counter attendant who is the only point of contact with customers. He takes customers’ requests/orders for the synchronous (quick service done immediately) and the asynchronous (time-intensive, which cannot be done quickly but would be written down and later attended to).

This is a story of JavaScript, the single-threaded yet fast programming language, and how its engine handles processes. I will be explaining JavaScript using the analogy of a restaurant.

Key Entities:

1. The Counter Attendant (Call Stack): processes order one by one

2. The Kitchen (Web APIs / Node APIs): where the heavy lifting happens

3. Heat Lamps (Task Queues): where the finished orders are kept

4. The Expeditor (The Event Loop): continuously monitors when the attendant is free to deliver finished orders.

The Workflow

When a customer reaches the front of the queue to make their order, they may have more than one request to make. The attendant will process them line-by-line in a First-In, First-Out (FIFO) logic. In cases of quick requests like “Give me a napkin” (synchronous) the attendant might quickly attend to those. but if the request is time-consuming like “bake me a bread”, the attendant doesn’t make the rest of the line wait for 4 hours in order to satisfy this request. Instead he writes down the order and then sends it to the kitchen (browser web API or Node C++ API) and attends to the next request or customer.

The Heat Lamps: VIP vs. Regular Queues

When the Kitchen finishes an asynchronous task, the order is placed under the Heat Lamps (Task Queues). Although, not all orders are treated equally. There are two separate queues:

• The VIP Queue (Microtask Queue): The VIP Queue (Microtask Queue) handles high-priority tasks like Promises and async/await resolutions.
• The Regular Queue (Macrotask Queue): The Regular Queue (Macrotask Queue) handles standard tasks like setTimeout or setInterval.

The Rule: The VIPs always get served first. The attendant will not touch a single “Regular” order until the VIP queue is completely empty.

The Expeditor: The Event Loop

The Expeditor (Event Loop) has only one job: watch the Counter Attendant.

As long as the attendant is busy attending to a customer or processing a sync request, the Expeditor waits. When the Call Stack is empty (the attendant is idle), the Expeditor grabs the first order from the VIP Queue and moves it to the attendant to deliver it to the owner. Only when the VIP queue is empty does he move to the Regular Queue and after a regular is served the attendant will check if there is a new order in the Vip.

This is exactly how the JS engine works: code is executed line by line. When a function is called, it is pushed into the stack; the first line is pushed and executed, and so on. But when it gets to an asynchronous operation, it gets handed off to the web API for the browser or the C++ API for Node and, when ready, distributed among two types of queues: the micro queue, which handles the promises, async/await, etc., and the macro queue, which handles, e.g., setTimeout, setInterval, etc.

Now the event loop is responsible for the moving of these processes back to the call stack by continually listening for when the call stack is empty or idle and pushing a process from the micro queue first until none is left before the macro queue one by one to be executed.

Huge thanks to @ColorCode‑io (ColorCode YouTube) and Sina Jazayeri for the video that inspired much of my explanation.

JavaScript Event Loop -- Visualized! - YouTube

If this made the event loop finally click for you, consider following me for more simple tech breakdowns like this.

https://medium.com/@stephensimon288

#JavaScript #Programming #WebDevelopment #Coding #TechTutorial #EventLoop #learnByAnology #Anology #beginners #advanceJavascript #advance

JavaScript Mastery JavaScript freeCodeCamp