The Eventloop in JavaScript - How does it work?

Why does a promise resolve before a `setTimeout` with a zero delay? The answer reveals the hidden priority inside JavaScript's event loop.

#1about 4 minutes

Differentiating between a JavaScript engine and a runtime

A JavaScript engine implements the ECMAScript standard, while a runtime adds extra functionality like Web APIs and the event loop.

#2about 2 minutes

Understanding why JavaScript needs an event loop

JavaScript's single-threaded nature can block the UI, so the event loop is necessary to handle asynchronous operations without freezing the application.

#3about 7 minutes

Exploring the core components of a JavaScript runtime

A runtime consists of a call stack for synchronous code, Web APIs for browser or Node features, and separate queues for microtasks and macrotasks.

#4about 2 minutes

How the event loop prioritizes and executes tasks

The event loop continuously checks if the call stack is empty, then processes all available microtasks before handling a single macrotask.

#5about 4 minutes

Demonstrating setTimeout and the macro task queue

Code example shows how `setTimeout` with a zero delay is placed in the macrotask queue and executed only after the synchronous call stack is clear.

#6about 2 minutes

Prioritizing promises with the micro task queue

A resolved promise is handled as a microtask, which is always executed before macrotasks like `setTimeout` when the call stack is empty.

#7about 3 minutes

How network latency affects promise execution order

Using `fetch`, this example shows that a promise is only added to the microtask queue upon resolution, so a slow network request can execute after a faster macrotask.

#8about 3 minutes

Starving the macro task queue with micro tasks

A recursive `queueMicrotask` call demonstrates how continuously adding microtasks can prevent the event loop from ever processing the macrotask queue.

#9about 2 minutes