How does the JavaScript event loop coordinate synchronous code, tasks, and microtasks?

Direct answer

JavaScript executes the current job synchronously on the call stack; the host event loop schedules tasks, and microtask checkpoints run queued microtasks such as Promise reactions before the event loop proceeds to later tasks.

The phrase “JavaScript is single-threaded” is useful only as a starting point. ECMAScript defines execution and Promise jobs, while browsers and other hosts define event loops, timers, networking, rendering, and other scheduling behavior.

Call stack / current execution — ordinary statements and function calls run to completion unless they throw or suspend through language/host mechanisms.
Tasks — browser events, timers, and other host work can queue tasks for later event-loop turns.
Microtasks — Promise reactions and queueMicrotask() callbacks are processed at microtask checkpoints; newly queued microtasks can extend that checkpoint.
Rendering — in browsers, rendering opportunities are controlled by the HTML event loop and do not simply occur after every line of JavaScript.

A zero-millisecond timer therefore means “eligible after at least the timer delay and when scheduling permits,” not “execute immediately after this statement.”