9. Message Queue and Event Loop
Tags: javascript, webdev, beginners, programming
Published: 2022-01-23 14:15:50

### **Articles**

- [JavaScript Event Loop Explained — Anoop Raveendran](https://medium.com/front-end-hacking/javascript-event-loop-explained-4cd26af121d4) 100%
- [The JavaScript Event Loop: Explained — Erin Sweson-Healey](https://blog.carbonfive.com/2013/10/27/the-javascript-event-loop-explained/) 30%?
- [Understanding JS: The Event Loop — Alexander Kondov](https://hackernoon.com/understanding-js-the-event-loop-959beae3ac40) 100%
- [Understanding the JavaScript Event Loop — Ashish Gupta](https://www.zeolearn.com/magazine/understanding-the-javascript-event-loop) 100%
- [The JavaScript Event Loop — Flavio Copes](https://flaviocopes.com/javascript-event-loop/) 100%
- [How JavaScript works: Event loop — Alexander Zlatkov](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5) 100%
- [Tasks, microtasks, queues and schedules — Jake Archibald](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/) 70% not getting mictrotask queue
- [Visualising the JavaScript Event Loop with a Pizza Restaurant analogy — Priyansh Jain](https://dev.to/presto412/visualising-the-javascript-event-loop-with-a-pizza-restaurant-analogy-47a8) 100%
- [JavaScript Visualized: Event Loop — Lydia Hallie](https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif) 100%

---
## Question
How is Javascript **asynchronous** and **single-threaded** in same time?

The answer is Javascript is single=threaded, but not quite asynchronous. Asynchronous tasks are handled by the environment around Javascript like browser for example. Browser contains Web APIs, Task queue, Microtask queue, and Event loop which handles asychronous tasks.

---
## Event loop
Event loop is a running process that watches call stack & queues. If the call stack is empty, it takes first event in Task queue and pushes it to the call stack. 

**Tick** represents an iteration that event loop executes.

---
## Mictrotask Queue (Job Queue)
Most asynchronous callbacks like `setTimeout` or `setInterval` goes to Task queue when it is fired. However, in ES6, Mictrotask queue was introduced as a queue that stores callback from the `Promise` object, `MutationObserver`, and etc.

### Main difference between Task queue vs Microtask Queue
<p align="center" style="color:gray">
  <img src="https://camo.githubusercontent.com/2f12852c45cf6c9f9f7c3f03c07c063a83b7ede0/68747470733a2f2f626c6f672d6173736574732e726973696e67737461636b2e636f6d2f323031362f31302f7468652d4e6f64652d6a732d6576656e742d6c6f6f702e706e67" style="padding: 0;margin:0; width: 500px">
  <a href= ""> </a>
</p>
Most importantly, Mictrotask queue has priority to Task queue.
Additonaly, Mictrotask queue continues to push its callback into call stack untill the Mictrotask queue is empty. 

``` jsx
console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('script end'); 
// script start - promise1 - promise2 - setTimeout - script end
```
Although `setTImeout` function's callback is added to Task queue faster than `Promise` object's callback, as event loop visits to microtask queue first, `Promise` object's callback is pushed to call stack and executed first.

Another point is that promise1 and promise2 logged at one stream. In case of Task queue, event loop only pushes callback to call stack one at a time. However, as it's previously mentioned, mictrotask queue moves stored callbacks to call stack untill it's empty.