𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗔𝘀𝘆𝗻𝗰 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 𝗟𝗶𝗸𝗲 𝗮 𝗚𝗿𝗼𝗰𝗲𝗿𝘆 𝗦𝘁𝗼𝗿𝗲

𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗔𝘀𝘆𝗻𝗰 𝗘𝘅𝗽𝗹𝗮𝗶𝗻𝗲𝗱 𝗟𝗶𝗸𝗲 𝗮 𝗚𝗿𝗼𝗰𝗲𝗿𝘆 𝗦𝘁𝗼𝗿𝗲

Many developers memorize technical definitions about the Event Loop. They talk about Web APIs and Microtask Queues. They learn the words but do not understand the logic.

Think of JavaScript as a grocery store with one cashier. The cashier serves one customer at a time. This is how JavaScript works.

If you run code like this: console.log("A"); console.log("B"); console.log("C");

The output is A, B, then C. One task follows another.

Now imagine a customer asks the cashier to wait 5 seconds. If the cashier waits, the whole store stops. No one else gets served. This is what happens if JavaScript handles timers alone.

Instead, JavaScript uses a helper.

When you use setTimeout, JavaScript tells the browser: "Watch this timer for me." The browser takes the job. JavaScript moves to the next task immediately.

After the timer ends, the helper cannot interrupt the cashier. The helper places the task in a waiting line called the Callback Queue.

The Event Loop acts as a manager. The manager asks: "Is the cashier busy?"

• If the cashier is busy, the manager waits.
• If the cashier is free, the manager pulls the next task from the waiting line.

JavaScript uses two waiting lines. One line has high priority.

• High priority: Promise.then() and queueMicrotask()
• Low priority: setTimeout() and setInterval()

The manager always clears the high priority line first. This is why a Promise runs before a setTimeout.

Network requests work the same way. When you fetch data, the browser handles the request. JavaScript does not sit idle. When the data arrives, the task enters the queue. JavaScript runs it when it finishes current tasks.

If the cashier starts a task that takes 10 minutes, the store freezes. This happens when you run heavy calculations on the main thread. Web Workers fix this. They hire an extra cashier to handle heavy work on a separate thread.

Here is the summary:

• JavaScript = The Cashier • Browser Web APIs = The Helpers • Callback Queue = The Waiting Line • Event Loop = The Manager • Web Workers = Extra Cashiers

Stop memorizing definitions. Start visualizing the process.

Source: https://dev.to/aarthirs/-javascript-async-explained-like-a-grocery-store-4men