Parlami del ciclo degli eventi (event loop).

Il ciclo degli eventi è la base del lavoro asincrono in JavaScript. Gestisce l'esecuzione del codice, la gestione degli eventi e l'interazione con il mondo esterno.

Componenti principali:

• Heap (Heap): Area di memoria per l'allocazione degli oggetti.
• Stack (Stack): Luogo in cui vengono memorizzati i contesti di esecuzione delle funzioni. Quando si chiama una funzione, viene inserita nello stack, e quando termina, viene rimossa.
• Web API: Interfacce fornite dal browser (DOM, AJAX, Timers, ecc.). Gestiscono operazioni asincrone.
• Coda di callback (Callback Queue): Coda di messaggi relativi agli eventi. Le Web API inseriscono qui i callback delle operazioni asincrone completate.
• Event Loop (Ciclo degli eventi): Monitora continuamente lo stack e la coda di callback. Se lo stack è vuoto, prende il primo callback dalla coda e lo inserisce nello stack per l'esecuzione.

Processo:

1. Il codice sincrono viene eseguito nello stack.
2. Le operazioni asincrone (setTimeout, fetch) vengono inviate alle Web API.
3. Quando un'operazione asincrona termina, il suo callback viene inserito nella coda di callback.
4. Il ciclo degli eventi aspetta che lo stack diventi vuoto.
5. Quando lo stack è vuoto, il ciclo degli eventi prende il primo callback dalla coda e lo inserisce nello stack, dove viene eseguito.

Esempio con setTimeout:

console.log('Start');

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

console.log('End');

L'output sarà:

Start
End
Inside setTimeout

Nonostante il timeout di 0 ms, il callback di setTimeout viene eseguito dopo il codice sincrono perché entra nella coda e aspetta che lo stack si svuoti.

In Node.js, esiste anche un ciclo di eventi, ma con alcune differenze nelle fasi di gestione delle code.