1. Single-Threaded Concurrency

JavaScript is single-threaded (one Call Stack, executing one line of code at a time). Yet it handles async network requests and UI timers seamlessly using the Event Loop.

2. Why It Matters

Knowing the execution priority between Promises and setTimeout prevents subtle timing bugs in asynchronous applications.

3. Queue Priority Rules

The Event Loop continually monitors the Call Stack. When the Call Stack becomes completely empty, it processes pending callbacks in this exact order:

1. Microtask Queue (Highest Priority): Promises (.then(), async/await), queueMicrotask(). All microtasks drain completely before the loop touches macro tasks!
2. Task Queue / Macrotasks: setTimeout, setInterval, I/O events, UI rendering.

[ Call Stack (Empty) ]
         ^
         |-- 1. Drain ALL Microtasks (Promise.then)
         +-- 2. Process ONE Macrotask (setTimeout)

console.log("1. Sync Start");

setTimeout(() => console.log("2. Macrotask (Timeout)"), 0);

Promise.resolve().then(() => console.log("3. Microtask (Promise)"));

console.log("4. Sync End");

// Output Order:
// 1. Sync Start
// 4. Sync End
// 3. Microtask (Promise)  <- Drains BEFORE timeouts!
// 2. Macrotask (Timeout)

4. Common Mistakes

• Assuming setTimeout(fn, 0) Runs Immediately: setTimeout(fn, 0) yields control to the Event Loop. It runs ONLY after all synchronous code and microtasks finish!
• Starving the Event Loop with Endless Microtasks: Recursively queuing microtasks starves the Event Loop, permanently blocking timeouts, I/O, and UI repaints.

5. Try It Yourself

Write it yourself. The tests below run against your code.

function getExecutionOrder() {
  return [];
}

6. Next Steps

Promises always drain before setTimeout. Next, let's dive into Promises!