How JavaScript's Event Loop Actually Works: Call Stack, Queues Explained

JavaScript's event loop is part of a four-component system comprising the call stack, Web APIs, a microtask queue, and a macrotask queue. The call stack executes one operation at a time, meaning long-running tasks can block the entire page until they complete. Web APIs, provided by the browser, handle asynchronous work like timers and network requests outside the main JavaScript thread, freeing the call stack immediately. Once that async work finishes, its callback joins a waiting queue — microtasks such as Promises are prioritised over macrotasks like setTimeout callbacks. This ordering explains why resolved Promises always log before a zero-delay setTimeout, even when both are scheduled at the same time.