Opowiedz o pętli zdarzeń (event loop).

Pętla zdarzeń jest podstawą asynchronicznej pracy JavaScript. Zarządza wykonywaniem kodu, obsługą zdarzeń i interakcją ze światem zewnętrznym.

Główne komponenty:

• Heap (Sterta): Obszar pamięci do przydzielania obiektów.
• Stos (Stack): Miejsce, gdzie przechowywane są konteksty wykonywania funkcji. Przy wywołaniu funkcji jest umieszczany na stosie, a po zakończeniu usuwany.
• Web API: Interfejsy dostarczane przez przeglądarkę (DOM, AJAX, Timers itp.). Obsługują operacje asynchroniczne.
• Kolejka callbacków (Callback Queue): Kolejka wiadomości związanych z zdarzeniami. Web API umieszczają tutaj callbacki zakończonych operacji asynchronicznych.
• Pętla zdarzeń (Event Loop): Ciągle monitoruje stos i kolejkę callbacków. Jeśli stos jest pusty, bierze pierwszy callback z kolejki i umieszcza go na stosie do wykonania.

Proces:

1. Kod synchroniczny jest wykonywany na stosie.
2. Operacje asynchroniczne (setTimeout, fetch) są przekazywane do Web API.
3. Gdy operacja asynchroniczna się kończy, jej callback jest umieszczany w kolejce callbacków.
4. Pętla zdarzeń czeka, aż stos stanie się pusty.
5. Gdy stos jest pusty, pętla zdarzeń bierze pierwszy callback z kolejki i umieszcza go na stosie, gdzie jest wykonywany.

Przykład z setTimeout:

console.log('Start');

setTimeout(() => {
  console.log('Inside setTimeout');
}, 0);

console.log('Koniec');

Wynik będzie:

Start
Koniec
Inside setTimeout

Pomimo timeoutu 0 ms, callback setTimeout jest wykonywany po kodzie synchronicznym, ponieważ trafia do kolejki i czeka na opróżnienie stosu.

W Node.js również istnieje pętla zdarzeń, ale z pewnymi różnicami w fazach obsługi kolejek.