Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке event loop?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Event Loop (цикл подій)** - це **механізм всередині рушія JavaScript**,
який керує виконанням коду,
обробкою **асинхронних операцій**
та взаємодією між **Call Stack** (стеком викликів)
і **чергами завдань (task queues)**.

Саме **event loop** робить JavaScript **асинхронним і неблокуючим**,
навіть попри те, що мова сама по собі **однопотокова**.

## Коротко

> **Event Loop** - це "організатор", який вирішує,
> **яке завдання виконується зараз**, а **яке почекає**,
> щоб не блокувати основний потік.

## Основні учасники

Щоб зрозуміти Event Loop, потрібно знати три структури:

1. **Call Stack** - стек викликів
(де виконується поточний код, наприклад функції та вирази).
2. **Task Queue / Callback Queue** - черга **макротасків**
(таймери, події, `setTimeout`, `setInterval`, `I/O`).
3. **Microtask Queue** - черга **мікротасків**
(`Promise.then()`, `queueMicrotask()`, `process.nextTick()` у Node.js).
4. **Event Loop** - "петля", яка стежить:
  - якщо стек порожній → бере завдання з черги мікротасків;
  - якщо вона порожня → бере завдання з черги макротасків.

## Як працює Event Loop (по кроках)

1. JS виконує **синхронний код** (все, що зверху вниз).
2. Коли зустрічається **асинхронна операція** -
вона відправляється у **зовнішні Web API** (наприклад, таймер, fetch).
3. Коли операція завершується, її колбек потрапляє у **чергу завдань**.
4. Коли **Call Stack порожній**, Event Loop бере завдання з черги
і кладе його в стек для виконання.
5. Після виконання всіх **мікротасків**,
Event Loop переходить до наступної **макротаски**.

Це відбувається **постійно**, у "нескінченному циклі".

## Візуально

```javascript
┌────────────────────┐
│  Call Stack        │ ← виконує поточний код
└─────────▲──────────┘
          │
          │ (порожній?)
          ▼
┌────────────────────┐
│ Microtask Queue    │ ← Promise, queueMicrotask
└─────────▲──────────┘
          │
          │ (порожня?)
          ▼
┌────────────────────┐
│ Task Queue         │ ← setTimeout, setInterval, I/O
└─────────▲──────────┘
          │
          │
          ▼
Event Loop перевіряє черги і переносить завдання в стек
```

## Приклад з setTimeout та Promise

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

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

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

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

Вивід:

```javascript
1
4
3
2
```

Чому?

1. Спочатку виконується синхронний код (`1`, `4`);
2. Promise (`.then`) потрапляє у **мікротаски**;
3. `setTimeout` потрапляє у **макротаски**;
4. Event Loop спочатку виконує **всі мікротаски (3)**,
потім бере **наступну макротаску (2)**.

## Приклад із "зависанням" Event Loop

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

while (true) {} // нескінченний цикл
```

Event Loop ніколи не дійде до `setTimeout`,
тому що стек **ніколи не звільниться**.
Асинхронні завдання виконуються **тільки коли стек порожній**.

## Різниця між макро- та мікротасками

| Тип завдання | Приклади | Коли виконується |
|---|---|---|
| **Мікротаски** | `Promise.then`, `queueMicrotask` | Одразу після поточного коду і перед наступною макротаскою |
| **Макротаски** | `setTimeout`, `setInterval`, `fetch`, `I/O`, `DOM events` | Після всіх мікротасків |

Тобто мікротаски мають **вищий пріоритет**.

## У браузері vs у Node.js

| Середовище | Особливості Event Loop |
|---|---|
| **Браузер** | У Web APIs є таймери, fetch, DOM events |
| **Node.js** | Є свої черги (phases): timers, I/O, check, close, nextTick тощо |

Але в обох випадках ідея одна - **один потік, асинхронність через event loop**.

## ІТОГ

| Компонент | Призначення |
|---|---|
| **Call Stack** | Виконує поточний код |
| **Web APIs** | Відпрацьовують асинхронні операції |
| **Task Queue** | Зберігає колбеки макротасків |
| **Microtask Queue** | Зберігає проміси та мікрочергу |
| **Event Loop** | Переміщує готові завдання з черг у стек |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати526 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.