Vertel me over de event loop.

De event loop is de basis van asynchroon werken in JavaScript. Het beheert de uitvoering van code, het afhandelen van gebeurtenissen en de interactie met de buitenwereld.

Belangrijkste componenten:

• Heap (Heap): Geheugengebied voor het toewijzen van objecten.
• Stack (Stack): Plaats waar de contexten van functie-uitvoeringen worden opgeslagen. Bij het aanroepen van een functie wordt deze op de stack geplaatst, en bij voltooiing verwijderd.
• Web API's: Interfaces die door de browser worden geleverd (DOM, AJAX, Timers, etc.). Ze verwerken asynchrone operaties.
• Callback Queue (Callbackwachtrij): Wachtrij van berichten gerelateerd aan gebeurtenissen. Web API's plaatsen hier callbacks van voltooide asynchrone operaties.
• Event Loop (Evenementenlus): Controleert voortdurend de stack en de callbackwachtrij. Als de stack leeg is, pakt hij de eerste callback uit de wachtrij en plaatst deze op de stack voor uitvoering.

Proces:

1. Synchronous code wordt uitgevoerd op de stack.
2. Asynchrone operaties (setTimeout, fetch) worden naar Web API's gestuurd.
3. Wanneer een asynchrone operatie voltooid is, wordt de callback in de callbackwachtrij geplaatst.
4. De event loop wacht tot de stack leeg is.
5. Wanneer de stack leeg is, pakt de event loop de eerste callback uit de wachtrij en plaatst deze op de stack, waar hij wordt uitgevoerd.

Voorbeeld met setTimeout:

console.log('Start');

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

console.log('Einde');

De output zal zijn:

Start
Einde
Binnen setTimeout

Ondanks dat de timeout 0 ms is, wordt de callback van setTimeout uitgevoerd na de synchronische code omdat hij in de wachtrij komt en wacht tot de stack leeg is.

In Node.js bestaat ook een event loop, maar met enkele verschillen in de fasen van queue-verwerking.