Skip to content

docs: Add kitchen analogy and video to Message Queue section #637

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

docs: Add kitchen analogy and video to Message Queue section #637

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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!"

### <img align= center width=40px height=40px src="https://cdn-icons-png.flaticon.com/512/1945/1945940.png"> Articles

- [JavaScript Event Loop Explained — Anoop Raveendran](https://medium.com/front-end-hacking/javascript-event-loop-explained-4cd26af121d4)
Expand All @@ -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)**

Expand Down