What will be the output of this code?

back to the lesson

          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.