Povedz mi o udalostnej slučke (event loop).

Cykly udalostí je základom asynchrónnej práce v JavaScripte. Riadi vykonávanie kódu, spracovanie udalostí a interakciu s vonkajším svetom.

Hlavné komponenty:

• Heap (Heap): Oblasť pamäte na prideľovanie objektov.
• Stack (Zásobník): Miesto, kde sa ukladajú kontexty vykonávania funkcií. Pri volaní funkcie sa umiestni do zásobníka, pri ukončení sa odstráni.
• Web API: Rozhrania poskytované prehliadačom (DOM, AJAX, Timers a pod.). Spracúvajú asynchrónne operácie.
• Callback Queue (Fronta callbackov): Fronta správ súvisiacich s udalosťami. Web API sem umiestňujú callbacky dokončených asynchrónnych operácií.
• Event Loop (Udalostný cyklus): Neustále sleduje zásobník a frontu callbackov. Ak je zásobník prázdny, vezme prvý callback z fronty a umiestni ho do zásobníka na vykonanie.

Proces:

1. Synchronous kód sa vykonáva na zásobníku.
2. Asynchrónne operácie (setTimeout, fetch) sa odosielajú do Web API.
3. Keď asynchrónna operácia skončí, jej callback sa umiestni do fronty callbackov.
4. Udalostný cyklus čaká, kým sa zásobník nevyprázdni.
5. Keď je zásobník prázdny, cyklus vezme prvý callback z fronty a umiestni ho do zásobníka, kde sa vykoná.

Príklad s setTimeout:

console.log('Začiatok');

setTimeout(() => {
  console.log('Vnútri setTimeout');
}, 0);

console.log('Koniec');

Výstup bude:

Začiatok
Koniec
Vnútri setTimeout

Napriek timeoutu 0 ms sa callback setTimeout vykoná po synchronickom kóde, pretože vstupuje do fronty a čaká na vyprázdnenie zásobníka.

V Node.js tiež existuje cyklus udalostí, ale s niektorými rozdielmi v fázach spracovania front.