What is the result of executing the following code snippet in a modern browser environment? const p = Promise.resolve(); p.then(() => console.log(1)); queueMicrotask(() => console.log(2)); setTimeout(() => console.log(3), 0);

Question

Web Development — Hard

What is the result of executing the following code snippet in a modern browser environment? const p = Promise.resolve(); p.then(() => console.log(1)); queueMicrotask(() => console.log(2)); setTimeout(() => console.log(3), 0);

Accepted Answer

Both 'Promise.then' callbacks and 'queueMicrotask' callbacks are placed into the microtask queue. The event loop processes the entire microtask queue before moving to the next task in the macrotask queue (which includes 'setTimeout'). Therefore, 1 and 2 are logged in the order they were queued, followed by 3, which is a macrotask.