Frontend Developer interview question
How does the JavaScript event loop work?
JavaScript runs synchronous work on one call stack. Promise callbacks run as microtasks before the browser takes the next macrotask such as a timer or input event, so long synchronous work blocks rendering.
Direct answer
What a strong answer covers
How it works
The engine executes one task at a time on a single call stack. When the stack empties, the event loop drains the entire microtask queue, which holds promise reactions and queueMicrotask callbacks, before picking one macrotask such as a timer, I/O completion, or user event. Rendering happens between macrotasks, so a long synchronous task or a microtask loop that never ends freezes the page even though no timer is involved.
Example
After a click handler finishes, queued Promise.then callbacks run before setTimeout callbacks scheduled in that handler. A component that awaits three fetches in sequence still keeps the UI responsive because each await yields the stack, whereas parsing a 50 MB JSON string on the main thread blocks input until the parse ends.
Common mistakes
- Treating setTimeout(fn, 0) as running immediately after the current line.
- Assuming await pauses the whole program rather than just the async function.
- Doing CPU-heavy work on the main thread instead of a Web Worker.
A useful answer structure
Answer from your own work.
Do not memorise a script: use only examples you can explain honestly in follow-up questions.
Open the desktop workspace and rehearse a clear answer in your own words.