What is an event loop and how does it work?

08 Tem 08:10

JavaScript being single-threaded might seem like it complicates handling both synchronous and asynchronous code, but it cleverly solves this problem with the event loop. If we compare it to a different scenario, imagine a waiter (JS's thread) in a restaurant serving dozens of tables (different tasks) at once. The waiter takes orders but can visit other tables while the food is being prepared. The event loop works similarly: it executes code, defers async operations (like setTimeout, fetch, or promises) while continuing with other tasks, and picks up the results when they're ready. The relationship between callbacks, macrotask (macrotasks), and microtask (microtasks) queues is like a "priority system." For example, a Promise's `.then()` or `queueMicrotask()` is added to the microtask queue, and the event loop processes these tasks immediately after synchronous code. Even a setTimeout with 0ms delay actually waits at least 4ms because it goes into the macrotask queue and won’t run until microtasks are cleared. This priority system is what enables the non-blocking structure—long-running operations (like network requests or file reading) run in the background without blocking the main JS thread.