Event loop v JavaScripte zjednodušene: Čo je to a ako funguje?

JavaScript je jazyk, ktorý využívame pre interaktívne webové stránky a dynamické aplikácie. Jednou z kľúčových vlastností JavaScriptu je asynchrónne spracovanie úloh. Ak ste už pracovali s JavaScriptom, pravdepodobne ste sa stretli s pojmom "event loop" (cyklus udalostí). Mnohí začiatočníci môžu byť zmätení týmto pojmom, ale nebojte sa, tento článok vám všetko zjednoduší! Vysvetlíme si, čo je to event loop, ako funguje a prečo je nevyhnutný pre správne fungovanie JavaScriptu.

Čo je event loop?

Event loop, alebo cyklus udalostí, je mechanizmus, ktorý umožňuje JavaScriptu vykonávať asynchrónne operácie. Je to kľúčová súčasť spracovania kódu v JavaScripte, ktorý umožňuje vykonávanie rôznych úloh bez toho, aby program "zablokoval" ďalšie operácie. Tento cyklus sa stará o to, aby asynchrónne funkcie, ako sú HTTP požiadavky alebo časovače, boli spracovávané efektívne.

Bez event loop by JavaScript nemohol vykonávať viacero operácií súčasne. Predstavte si to ako dopravnú cestu, kde sa rôzne úlohy spracovávajú postupne bez toho, aby sa vzájomne blokovali. Event loop zabezpečuje, že kód, ktorý čaká na spracovanie, môže pokračovať, zatiaľ čo iné úlohy sú vykonávané v pozadí.

Ako funguje event loop?

Aby sme pochopili, ako event loop funguje, musíme sa pozrieť na to, ako JavaScript vykonáva kód. JavaScript je jednorežimový jazyk, čo znamená, že vykonáva len jeden príkaz naraz. Našťastie, JavaScript má aj asynchrónne mechanizmy, ktoré umožňujú vykonávať operácie na pozadí, pričom hlavný proces (call stack) sa nezastaví. Tieto operácie sa zvyčajne zapisujú do tzv. "callback queue" (fronta spätných volaní), kde čakajú na svoju príležitosť.

Keď je call stack prázdny, event loop preberá kontrolu. Skontroluje, či je v callback queue nejaká úloha. Ak áno, presunie túto úlohu na call stack, kde sa vykoná. Tento proces pokračuje v cykle, čo znamená, že ak je call stack prázdny, event loop vždy skontroluje callback queue.

Event loop a stack

Na lepšie pochopenie si ukážeme, čo sa deje pri vykonávaní kódu v JavaScripte. Predstavte si, že máme tieto dve operácie:

console.log("A");
setTimeout(() => {
  console.log("B");
}, 0);
console.log("C");

Všetky tieto operácie sa spustia v poradí. Prvá operácia, ktorá sa vykonáva, je console.log("A"), ktorá okamžite vypíše "A". Potom sa vykoná setTimeout(), ktorý spôsobí, že kód vo vnútri sa má vykonať po uplynutí určitého času (v tomto prípade 0 milisekúnd). Tento časovač sa však nevykoná okamžite, preto sa úloha odloží do callback queue. Na záver sa vykoná console.log("C").

Po vykonaní všetkých príkazov sa event loop skontroluje callback queue. Zistí, že tam je funkcia setTimeout(), ktorá ešte nebola vykonaná, a tak ju presunie na call stack, aby sa vykonala. Výsledok bude nasledovný:

A
C
B

Aj keď sme nastavili setTimeout() na 0 milisekúnd, stále sa vykoná až po dokončení všetkých príkazov v call stacku.

Callback queue a microtask queue

Okrem callback queue existuje ešte aj microtask queue, ktorá sa používa na vykonávanie veľmi rýchlych úloh. Microtasks zahŕňajú operácie ako Promise a queueMicrotask. Rozdiel medzi callback queue a microtask queue spočíva v tom, že microtask queue má vyššiu prioritu. To znamená, že ak sú v oboch frontách úlohy, event loop najprv vykoná všetky úlohy v microtask queue, až potom sa presunie k úlohám v callback queue.

Príklad s promismi

Pozrime sa na príklad, kde použijeme Promise:

console.log("A");

Promise.resolve().then(() => {
  console.log("B");
});

console.log("C");

Výsledok bude:

A
C
B

Aj keď then() je asynchrónna funkcia, kód v then() sa vykoná až po tom, ako sa dokončia všetky úlohy v call stacku, ale pred operáciami v callback queue, preto sa vypíše "B" až po "C".

Event loop a asynchrónne operácie

Event loop umožňuje JavaScriptu zvládať asynchrónne operácie veľmi efektívne. To je veľmi dôležité pri práci s webovými aplikáciami, ktoré musia reagovať na udalosti, ako sú kliknutia myšou, vstupy na klávesnici alebo odpovede zo servera. Všetky tieto operácie môžu byť spracované bez toho, aby spôsobovali zbytočné oneskorenia alebo zablokovali aplikáciu.

Prečo je event loop dôležitý?

Event loop umožňuje JavaScriptu vykonávať kód efektívne a bez zbytočných oneskorení. Bez neho by sme nemohli využívať asynchrónne operácie a našich webových aplikácií by sa stali pomalými a neefektívnymi. Event loop je teda kľúčovým prvkom, ktorý umožňuje JavaScriptu vykonávať operácie na pozadí bez toho, aby to ovplyvnilo výkon aplikácie.

Záver

Event loop je jednou z najdôležitejších vlastností JavaScriptu, ktorá umožňuje asynchrónne spracovanie úloh. Ak chcete efektívne pracovať s JavaScriptom, je nevyhnutné pochopiť, ako tento mechanizmus funguje. Dúfame, že tento článok vám pomohol zjednodušiť pochopenie event loopu a ukázal vám, ako ho môžete využiť v praxi. Ak sa chcete stať lepším JavaScript programátorom, určite nezabudnite venovať pozornosť tejto kľúčovej koncepcii!