Suggest an edit

Improve this article

Refine the answer for “What is the "microtask queue"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 1. What the microtask queue is

> The **microtask queue** is a queue of tasks that must run **right after the current code**,
> but **before the next macrotask** (for example, `setTimeout`, `click`, `load`, and so on).

In other words:

- JavaScript runs your main code (the main script);
- then it **runs all microtasks** (for example, `.then()` from a Promise);
- and only then moves on to the next macrotask (for example, `setTimeout`).

---

## 2. Example (pay attention to the order)

```javascript
console.log('1');

setTimeout(() => console.log('2 - setTimeout'), 0);

Promise.resolve().then(() => console.log('3 - Promise'));

console.log('4');
```

Console output:

```javascript
1
4
3 - Promise
2 - setTimeout
```

Why:

1. First, all **synchronous code** runs (`1`, `4`);
2. Then - the **microtasks** (`Promise.then`);
3. And only then - the **macrotasks** (`setTimeout`).

---

## 3. Which operations create microtasks

| Microtask source | Example |
|---|---|
| **Promises** | `Promise.resolve().then(...)` |
| **MutationObserver** | observing the DOM |
| **queueMicrotask()** | manually creating a microtask |
| **async/await** | a microtask is created inside `await` |

---

## 4. Example with `queueMicrotask`

```javascript
console.log('A');

queueMicrotask(() => console.log('B - microtask'));

console.log('C');
```

Output:

```javascript
A
C
B - microtask
```

Microtask `B` runs **after the current code finishes**,
but **before any other events** (setTimeout, and so on).

---

## 5. Example with Promises and setTimeout

```javascript
setTimeout(() => console.log('timeout'), 0);

Promise.resolve().then(() => console.log('promise'));

queueMicrotask(() => console.log('microtask'));
```

Output:

```javascript
promise
microtask
timeout
```

All microtasks run **before** `setTimeout`.

---

## 6. Execution order in the Event Loop (simplified)

```javascript
1. Run all synchronous code (script)
2. Run all microtasks (Promise, queueMicrotask)
3. Move to the next macrotask (setTimeout, DOM events, etc.)
4. Repeat the cycle
```

---

## 7. Example with async/await

```javascript
async function example() {
  console.log('start');
  await null; // creates a microtask
  console.log('end');
}

example();
console.log('after');
```

Output:

```javascript
start
after
end
```

Why:

- `await` pauses the function;
- the code "after it" goes into the **microtask queue**;
- after the current code finishes (`after`) - `end` runs.

---

## 8. Microtask vs macrotask

| Type | Examples | When it runs |
|---|---|---|
| **Microtask** | `Promise.then`, `queueMicrotask`, `await`, `MutationObserver` | Right after the current code, before macrotasks |
| **Macrotask** | `setTimeout`, `setInterval`, `I/O`, `click`, `load` | After all microtasks, in the next Event Loop cycle |

---

## 9. Example of the full picture

```javascript
console.log('1');

setTimeout(() => console.log('2 - macrotask'), 0);

Promise.resolve().then(() => console.log('3 - microtask'));

queueMicrotask(() => console.log('4 - microtask'));

console.log('5');
```

Result:

```javascript
1
5
3 - microtask
4 - microtask
2 - macrotask
```

---

## Summary

| Concept | What it is |
|---|---|
| **Microtask queue** | Queue of tasks that run after the current code, but before the next macrotask |
| **Example sources** | Promises, `queueMicrotask`, `await`, `MutationObserver` |
| **When they run** | After the main code and before `setTimeout` |
| **Why they're needed** | To handle asynchronous code quickly, without delays (for example, Promise results) |

---

> **A simple way to remember it:**
>
> - **Microtasks** run "between the lines" - right after your code.
> - **Macrotasks** (setTimeout, click) run "later", on the next step of the Event Loop.
>
> Or in short:
> **Promises -> microtasks -> faster than setTimeout.**

Markdown · drag & drop images · ⌘B / ⌘I shortcuts553 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.