Pověz mi o událostní smyčce (event loop).

Událostní smyčka je základem asynchronní práce v JavaScriptu. Řídí vykonávání kódu, zpracování událostí a interakci s vnějším světem.

Hlavní komponenty:

Heap (Hromada): Oblast paměti pro alokaci objektů.
Stack (Zásobník): Místo, kde jsou uloženy kontexty vykonávání funkcí. Při volání funkce je umístěna na zásobník, při ukončení je odstraněna.
Web API: Rozhraní poskytovaná prohlížečem (DOM, AJAX, Timers atd.). Zpracovávají asynchronní operace.
Callback Queue (Fronta callbacků): Fronta zpráv souvisejících s událostmi. Web API sem umisťují callbacky dokončených asynchronních operací.
Událostní smyčka (Event Loop): Neustále sleduje zásobník a frontu callbacků. Pokud je zásobník prázdný, vezme první callback z fronty a umístí jej na zásobník ke spuštění.

Proces:

Synchronous kód se vykonává na zásobníku.
Asynchronní operace (setTimeout, fetch) jsou předávány Web API.
Když asynchronní operace skončí, její callback je umístěn do fronty callbacků.
Událostní smyčka čeká, až se zásobník vyprázdní.
Když je zásobník prázdný, vezme první callback z fronty a umístí jej na zásobník, kde se vykoná.

Příklad s setTimeout:

console.log('Start');

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

console.log('Konec');

Výstup bude:

Start
Konec
Uvnitř setTimeout

Navzdory timeoutu 0 ms se callback setTimeout vykoná po synchronním kódu, protože vstupuje do fronty a čeká na vyprázdnění zásobníku.

V Node.js také existuje událostní smyčka, ale s určitými rozdíly v fázích zpracování front.