What is the JavaScript event loop and how do the call stack, task queue, and microtask queue interact?

JavaScript is single-threaded with an event loop. The call stack executes synchronous code. When an async operation completes, its callback is queued. Two queues:

1. Microtask queue (higher priority): Promise callbacks (.then/.catch), queueMicrotask(), MutationObserver.
2. Task queue (Macro-task queue) (lower priority): setTimeout, setInterval, I/O callbacks, UI events. Event loop rule: after each task completes, the event loop drains the entire microtask queue before picking the next task. Order example: console.log('1'); setTimeout(() => console.log('timeout'), 0); Promise.resolve().then(() => console.log('promise')); console.log('2'); Output: 1, 2, promise, timeout. The promise callback (microtask) runs before the setTimeout (task) even with 0ms delay.