The JavaScript Event Loop

JavaScript is Single-Threaded. Yet, it can handle thousands of concurrent API calls. How? By using the Event Loop. Understanding the priority of tasks is the difference between a smooth UI and a frozen browser.

1. Macrotasks vs Microtasks

• Microtasks (VIP): Promises (.then, async/await). These run *immediately* after the current script finishes, before the browser renders anything.
• Macrotasks (Standard): setTimeout, setInterval, fetch callbacks. These wait for the next turn of the event loop.

2. Blocking the Main Thread

If you run a heavy calculation (like sorting 1 million items) directly in your code, the Event Loop stops. The browser cannot paint, and the user cannot click. Architect Rule: Always offload heavy tasks to a Web Worker or break them into small chunks using requestIdleCallback.

4. Interview Mastery

Q: "What happens if an infinite loop occurs in a Microtask?"

Architect Answer: "The browser will **Freeze** and eventually crash. Because the Event Loop will keep processing the Microtask queue until it is empty *before* moving to the next task or rendering the UI. If you recursively call a Promise, the Macrotask queue (and the UI) will never get a turn. This is why you should be even more careful with async recursion than with standard loops."