Розкажіть про базовий пристрій і механізм роботи Event loop.

Повне пояснення

Що це і навіщо Event loop — ядро асинхронності в JavaScript‑рушії. Він дозволяє виконувати неблокуючі операції, не зупиняючи головний потік.

Ключові принципи

• Call stack (стек викликів) обробляє синхронний код.
• Task queue (очередь задач) зберігає колбеки, що готові до виконання.
• Microtask queue (очередь мікротасків) обробляється після кожного синхронного блоку.

Як це працює

1. Синхронний код виконується у call stack.
2. Після завершення стеку, рушій перевіряє microtask queue; якщо є задачі – обробляє їх.
3. Якщо microtasks порожня, рушій переходить до task queue і виконує першу задачу.
4. Процес повторюється, забезпечуючи реактивність.

Практика і реалізація

setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('sync');
// Output: sync, promise, timeout

Тестування

import { test } from 'vitest';

test('event loop order', async () => {
  const logs: string[] = [];
  setTimeout(() => logs.push('timeout'), 0);
  Promise.resolve().then(() => logs.push('promise'));
  logs.push('sync');
  await new Promise(r => setTimeout(r, 10));
  expect(logs).toEqual(['sync', 'promise', 'timeout']);
});

Особливості в контексті JS Core

• Event loop працює однопоточно, тому важливо не блокувати стек.
• Microtasks мають пріоритет над task queue, що впливає на порядок виконання.
• Таймери (setTimeout/interval) додаються до task queue після заданого часу.

Оптимізація та типові помилки

• Не використовуйте довгі синхронні цикли; вони блокують event loop.
• Уникайте нескінченних рекурсій у колбеках, що призведе до стек overflow.
• Перевіряйте порядок виконання при використанні Promise, async/await та setTimeout.

Часті помилки (8)

1. Очікування setTimeout(..., 0) як миттєвого виклику – це task queue.
2. Відсутність await у async функціях, що призводить до непередбачуваного порядку.
3. Використання setImmediate (Node.js) замість microtasks.
4. Блокування стеку через довгий цикл while.
5. Неочікувані колбеки в process.nextTick (Node.js) – вони виконуються перед microtasks.
6. Перевантаження task queue великою кількістю таймерів.
7. Залишені setTimeout без очищення, що створює memory leak.
8. Виклик Promise.resolve().then() у циклі без очікування, що створює мікротаски в нескінченності.

Cheatsheet

• call stack → microtask queue → task queue → repeat.
• Promise.then → microtasks.
• setTimeout/interval → task queue.

Follow‑up питання

1. Як microtasks впливають на порядок виконання колбеків?
2. Що відбувається, якщо в microtask queue додати ще один колбек?
3. Чому setImmediate не є частиною стандартного Event loop в браузерах?