Що таке Event Loop?

Event Loop або цикл подій є фундаментальним механізмом у JavaScript, який забезпечує асинхронну поведінку мови попри її однопотокову природу. Без цього механізму було б неможливо уявити сучасну веб-розробку, оскільки він координує виконання коду, обробку подій, мережеві запити та рендеринг інтерфейсу.

В основі роботи Event Loop лежить кілька ключових компонентів. Перший із них — це Call Stack або стек викликів, де безпосередньо виконуються функції вашого синхронного коду. Коли інтерпретатор зустрічає функцію, він додає її до стека, а після завершення роботи видаляє. Якщо функція викликає іншу, та поміщається поверх першої.

Другий важливий елемент — це черги завдань. Коли асинхронна операція, така як таймер або запит до сервера, завершується, її результат надсилається до однієї з черг. Тут існує поділ на Task Queue, куди потрапляють стандартні колбеки від setTimeout або подій DOM, та Microtask Queue, призначену спеціально для промісів і мутацій DOM.

Сам Event Loop є нескінченним циклом, який постійно перевіряє стан стека викликів. Якщо Call Stack порожній, цикл звертає свою увагу на черги. При цьому діє суворе правило пріоритетності: Microtask Queue опрацьовується завжди раніше, ніж Task Queue. Event Loop переносить усі завдання з черги мікрозавдань до стека викликів і виконує їх доти, доки ця черга не спорожніє. Лише після цього береться одне завдання зі звичайної черги завдань.

Такий підхід гарантує, що ланцюжки промісів та асинхронні операції будуть виконані якомога швидше, зберігаючи передбачуваний порядок виконання коду та запобігаючи гонкам даних в однопотоковому середовищі виконання.