ما قصد داریم این پروژهٔ متن‌باز را در دسترس همهٔ مردم در سرتاسر دنیا قرار دهیم.

به ترجمهٔ محتوای این آموزش به زبان خودتان کمک کنید/a>.

نقشه آموزش
بازگشت به درس
این محتوا تنها در این زبان‌ها موجود است: English, Español, Français, Русский, Українська, 简体中文. لطفاً به ما

What will be the output of this code?

اهمیت: 5

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,

  1. Numbers 1 and 7 show up immediately, because simple console.log calls don’t use any queues.
  2. 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).
  3. 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.