What will be the output of this code?
importance: 5
console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)));
Promise.resolve().then(() => console.log(5));
setTimeout(() => console.log(6));
console.log(7);
The console output is: 1 7 3 5 2 6 4.
The task is quite simple, we just need to know how microtask and macrotask queues work.
Let’s see what’s going on, step by step.
console.log(1);
// The first line executes immediately, it outputs `1`.
// Macrotask and microtask queues are empty, as of now.
setTimeout(() => console.log(2));
// `setTimeout` appends the callback to the macrotask queue.
// - macrotask queue content:
// `console.log(2)`
Promise.resolve().then(() => console.log(3));
// The callback is appended to the microtask queue.
// - microtask queue content:
// `console.log(3)`
Promise.resolve().then(() => setTimeout(() => console.log(4)));
// The callback with `setTimeout(...4)` is appended to microtasks
// - microtask queue content:
// `console.log(3); setTimeout(...4)`
Promise.resolve().then(() => console.log(5));
// The callback is appended to the microtask queue
// - microtask queue content:
// `console.log(3); setTimeout(...4); console.log(5)`
setTimeout(() => console.log(6));
// `setTimeout` appends the callback to macrotasks
// - macrotask queue content:
// `console.log(2); console.log(6)`
console.log(7);
// Outputs 7 immediately.
To summarize,
- Numbers 1 and 7 show up immediately, because simple console.log calls don’t use any queues.
- Then, after the main code flow is finished, the microtask queue runs.
- It has commands: console.log(3); setTimeout(...4); console.log(5).
- Numbers 3 and 5 show up, while setTimeout(() => console.log(4)) adds the console.log(4) call to the end of the macrotask queue.
- The macrotask queue is now: console.log(2); console.log(6); console.log(4).
- After the microtask queue becomes empty, the macrotask queue executes. It outputs 2, 6, 4.
Finally, we have the output: 1 7 3 5 2 6 4.