Chapter 6 of 12
6.1 The Event Loop Mechanics
JavaScript is single-threaded, but achieves non-blocking asynchronous concurrency via the Event Loop, Microtask Queue, and Macrotask Queue.
Queue Priority in Event Loop
1. Call Stack
Executes synchronous JS bytecode
2. Microtask Queue
HIGHEST PRIORITY: Promise callbacks, queueMicrotask(), MutationObserver. Empties COMPLETELY before next frame!
3. Macrotask Queue
LOW PRIORITY: setTimeout, setInterval, setImmediate, I/O events
Event Loop Execution Order Testjavascript
console.log('1. Script start');
setTimeout(() => console.log('2. setTimeout (Macrotask)'), 0);
Promise.resolve()
.then(() => console.log('3. Promise .then (Microtask)'));
queueMicrotask(() => console.log('4. queueMicrotask (Microtask)'));
console.log('5. Script end');
// Output Order:
// 1. Script start
// 5. Script end
// 3. Promise .then (Microtask)
// 4. queueMicrotask (Microtask)
// 2. setTimeout (Macrotask)6.2 Promises Architecture & Promise.withResolvers
Promises represent the eventual completion or failure of an asynchronous operation. Modern ES2024 introduces Promise.withResolvers() for cleaner promise creation.
Modern Promise Patternsjavascript
// ES2024 Promise.withResolvers()
const { promise, resolve, reject } = Promise.withResolvers();
setTimeout(() => resolve('Done!'), 1000);
// Parallel Execution with Promise.allSettled
const results = await Promise.allSettled([
fetch('/api/user'),
fetch('/api/posts'),
fetch('/api/analytics')
]);