De JavaScript event loop zorgt ervoor dat code, gebeurtenissen en asynchrone taken op een gestructureerde manier worden afgehandeld. Het helpt JavaScript, dat één enkele thread heeft, om niet te blokkeren en toch asynchroon gedrag te ondersteunen. **Hoe werkt de event loop?** 1. **Call Stack (oproepstack):** Hier worden functies uitgevoerd. Als een functie wordt aangeroepen, wordt deze op de stack geplaatst en wordt uitgevoerd totdat hij klaar is. 2. **Task Queues (wachtrijen):** Er zijn twee hoofdtypen wachtrijen: - **Macro-task queue (macrotasks):** Bijvoorbeeld `setTimeout`, `setInterval`, I/O-operaties. - **Micro-task queue (microtasks):** Bijvoorbeeld `Promise` callbacks, `queueMicrotask`. 3. **De event loop:** Controleert voortdurend of de call stack leeg is. Als dat zo is, haalt hij de eerstvolgende taak uit de microtask-queue en voert die uit. Pas daarna wordt een macro-task uitgevoerd. **Samenwerking van callbacks, microtasks en macrotasks** - Wanneer een asynchrone operatie wordt gestart, zoals een `setTimeout` of een `Promise`, wordt de bijbehorende callback in de juiste wachtrij geplaatst. - **Microtasks** (bijvoorbeeld `Promise` callbacks) worden altijd vóór macro-tasks afgehandeld bij het afronden van een taak. Dit betekent dat microtasks een hogere prioriteit hebben. **Waarom wordt een Promise callback eerder uitgevoerd dan een `setTimeout`?** Stel je code voor: ```javascript console.log('Start'); setTimeout(() => { console.log('Timeout callback'); }, 0); Promise.resolve().then(() => { console.log('Promise callback'); }); console.log('Einde'); ``` De uitvoer is: ``` Start Einde Promise callback Timeout callback ``` **Uitleg:** 1. `console.log('Start')` en `console.log('Einde')` worden direct uitgevoerd omdat ze synchrone code zijn. 2. De `Promise.resolve().then()` wordt aangemaakt en de callback wordt in de microtask-queue geplaatst. 3. De `setTimeout` callback wordt in de macro-task-queue geplaatst, maar pas nadat de timer afloopt (hier 0 ms, dus bijna meteen). 4. Na de synchronisatie, wanneer de call stack leeg is, controleert de event loop eerst de microtask-queue en voert de `Promise` callback uit. 5. Daarna wordt de macro-task (`setTimeout`) uitgevoerd. **Kort samengevat:** - Microtasks (zoals Promise callbacks) worden altijd vóór macro-tasks uitgevoerd zodra de call stack leeg is. - Daarom wordt de Promise callback eerder uitgevoerd dan de `setTimeout` callback, zelfs met een timeout van 0 ms. **Samenvatting:** - De event loop zorgt voor de volgorde van asynchrone taken. - Microtasks hebben prioriteit en worden onmiddellijk afgehandeld na de huidige taak. - Macro-tasks worden pas afgehandeld nadat alle microtasks zijn gedaan. - Hierdoor worden Promise callbacks altijd vóór `setTimeout` callbacks uitgevoerd, zelfs bij een timeout van 0 ms.

Zeker, ik leg het uit alsof je een druk café beheert. De JavaScript event loop is jouw bedieningssysteem. **De Café Analogie:** - Jij bent de **event loop** (de enige bediener) - **Microtasks** zijn dringende bestellingen (beloftes die nú moeten) - **Macrotasks** zijn normale tafelbestellingen (setTimeout, events) **Hoe het werkt:** 1. **Call Stack**: Je voert eerst alle synchrone code uit (huidige bestelling afhandelen) 2. **Microtasks Queue**: Checkt na elke synchrone taak of er beloftes (Promises) klaarstaan. Deze hebben **prioriteit**! 3. **Macrotasks Queue**: Pas als alle microtasks afgehandeld zijn, behandel je de timeouts en events. **Jouw voorbeeld uitgelegd:** ```javascript console.log('Start'); setTimeout(() => console.log('Timeout'), 0); // Macrotask Promise.resolve().then(() => console.log('Promise')); // Microtask console.log('Einde'); ``` **Output:** ``` Start Einde Promise Timeout ``` **Waarom?** 1. Synchrone code eerst: 'Start' en 'Einde' 2. **Microtask** (Promise) krijgt voorrang over **macrotask** (setTimeout) 3. Ook al staat timeout op 0ms, hij wacht netjes tot alle microtasks klaar zijn **In het café:** - Eerst serveer je alle aanwezige gasten (synchrone code) - Dan komen de **dringende telefoonbestellingen** (microtasks) direct daarna - Pas daarna de **normale tafelbestellingen** (macrotasks), ook al bestelden ze eerder Dit verklaart waarom Promises altijd voor setTimeout gaan, zelfs bij 0ms delay!