diff --git a/README.md b/README.md index 924a02f7..7b928510 100644 --- a/README.md +++ b/README.md @@ -403,6 +403,31 @@ With the introduction of ES6 modules, the role of IIFEs in scope isolation has d ## 9. Message Queue and Event Loop The Event Loop is a critical part of JavaScript's concurrency model, ensuring non-blocking behavior by processing tasks in an asynchronous manner. Understanding how it interacts with the Message Queue and Microtasks is key to mastering JavaScript behavior. + +## Beginner's Guide: The Kitchen Analogy + +Think of JavaScript as a **single cook in a kitchen** who can only do one task at a time. + +#### The Characters: +- **Call Stack** = What the cook is doing RIGHT NOW +- **Message Queue** = Order tickets waiting to be processed +- **Event Loop** = The kitchen manager who coordinates everything + +#### Real Example: +```javascript +console.log("Start cooking"); // 👨‍🍳 Immediate task + +setTimeout(() => { + console.log("Pizza ready!"); // 🍕 Goes to Message Queue +}, 2000); + +console.log("Preparing ingredients"); // 👨‍🍳 Immediate task + +// OUTPUT: +// "Start cooking" +// "Preparing ingredients" +// (2 seconds later) "Pizza ready!" + ### Articles - [JavaScript Event Loop Explained — Anoop Raveendran](https://medium.com/front-end-hacking/javascript-event-loop-explained-4cd26af121d4) @@ -422,6 +447,7 @@ The Event Loop is a critical part of JavaScript's concurrency model, ensuring no - [Desmitificando el Event Loop (Spanish)](https://www.youtube.com/watch?v=Eqq2Rb7LzYE) - [Callbacks, Sincrono, Assíncrono e Event Loop (PT-BR)](https://www.youtube.com/watch?v=6lbBaM18X3g) - [JavaScript Event Loop: How it Works and Why it Matters in 5 Minutes - James Q Quick](https://www.youtube.com/watch?v=6lbBaM18X3g) +- [99% of Developers Don't Get Event Loops - The Coding Gopher](https://www.youtube.com/watch?v=LCBc4mxOxXQ) **[⬆ Back to Top](#table-of-contents)**