How JavaScript's Event Loop Handles Async Tasks While Staying Single-Threaded

JavaScript is single-threaded yet manages asynchronous operations like timers, API calls, and file reads without blocking execution — a capability made possible by the event loop. When async tasks are delegated to external APIs, their callbacks are queued and later picked up by the event loop to run on the call stack. The event loop relies on two distinct queues: the microtask queue, which handles Promise callbacks and runs at higher priority, and the macrotask queue, which handles setTimeout, I/O, and similar operations. Microtasks are always fully processed before the event loop moves on to any macrotask, which is why a resolved Promise callback executes before a setTimeout callback even if the timer appears earlier in the code. Grasping this execution order clarifies much of the seemingly unpredictable behaviour in asynchronous JavaScript programming.