Execution Order
Execution Order
Section titled “Execution Order”Introduction
Section titled “Introduction”Understanding the exact order JavaScript executes code helps you predict behavior and avoid bugs.
The Classic Example
Section titled “The Classic Example”console.log('1. Sync');
setTimeout(() => console.log('2. setTimeout'), 0);
Promise.resolve().then(() => console.log('3. Promise'));
queueMicrotask(() => console.log('4. Microtask'));
console.log('5. Sync end');
// Output:// 1. Sync// 5. Sync end// 3. Promise ← microtask queue// 4. Microtask ← microtask queue// 2. setTimeout ← macrotask queueWhy This Order?
Section titled “Why This Order?”- Sync code runs first (call stack)
- Microtasks (Promise.then, queueMicrotask) run next
- Macrotasks (setTimeout) run last
Real-World Example
Section titled “Real-World Example”document.getElementById('button').addEventListener('click', () => { console.log('Click event');});
setTimeout(() => console.log('Timeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
// Clicking the button:// 1. Promise ← microtask// 2. Timeout ← macrotask// 3. Click ← macrotask (user events have higher priority)Summary
Section titled “Summary”- Sync code always completes before async callbacks
- Microtasks (promises) run before macrotasks (setTimeout)
queueMicrotask()adds to the microtask queue- Each event loop cycle: 1 macrotask → all microtasks → render