JavaScript's Event Loop — Simple Guide (with SVG Timeline)

The event loop lets JavaScript handle async tasks on a single thread.

Example Code#

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Output: Start → End → Promise → Timeout

Visual Timeline (SVG)#

Event Loop SVG

Why this order?#

• Start and End are synchronous → run immediately on the call stack.
• Promise.then is a microtask → runs before macrotasks.
• setTimeout callback is a macrotask → runs after microtasks drain.