Vorbește-mi despre bucla de evenimente (event loop)…

Ciclul evenimentelor este fundamentul muncii asincrone în JavaScript. Controlează executarea codului, gestionarea evenimentelor și interacțiunea cu lumea exterioară.

Componente principale:

Heap (Heap): Zonă de memorie pentru alocarea obiectelor.
Stack (Stivă): Locul unde sunt stocate contexte de execuție ale funcțiilor. Când se apelează o funcție, este plasată în stivă, și când se termină, este eliminată.
Web API-uri: Interfețe oferite de browser (DOM, AJAX, Timers etc.). Ele gestionează operațiuni asincrone.
Coada callback-urilor (Callback Queue): Coada de mesaje legate de evenimente. Web API-urile plasează aici callback-urile operațiunilor asincrone finalizate.
Ciclul evenimentelor (Event Loop): Monitorizează continuu stiva și coada callback-urilor. Dacă stiva este goală, ia primul callback din coadă și îl plasează în stivă pentru execuție.

Proces:

Codul sincronic se execută în stivă.
Operațiunile asincrone (setTimeout, fetch) sunt trimise către Web API-uri.
Când o operațiune asincronă se finalizează, callback-ul său este plasat în coada callback-urilor.
Ciclul evenimentelor așteaptă ca stiva să devină goală.
Când stiva este goală, ciclul evenimentelor ia primul callback din coadă și îl plasează în stivă, unde este executat.

Exemplu cu setTimeout:

console.log('Start');

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

console.log('Sfârșit');

Ieșirea va fi:

Start
Sfârșit
În setTimeout

Deși timeout-ul este de 0 ms, callback-ul setTimeout se execută după codul sincron, deoarece intră în coadă și așteaptă golirea stivei.

În Node.js, există și o ciclu de evenimente, dar cu unele diferențe în fazele de procesare a cozii.

Vorbește-mi despre bucla de evenimente (event loop).