JavaScript has a concurrency model based on an event loop, which is responsible for executing the code, collecting and processing events, and executing queued sub-tasks.
Here, we will see about microtask and macrotask in event loop and how event loop will handle tasks.
let’s dive in! 🏃♂️
Within the Event Loop, there are actually 2 type of queues: the (macro)task queue (or just called the task queue), and the microtask queue. The (macro)task queue is for (macro)tasks and the microtask queue is for microtasks.
Microtask
A microtask is a short function which is executed after the function or program which created it exits and only if the JavaScript execution stack is empty.
- Promise callback
- queueMicrotask
Macrotask
A macrotask is short function which is executed after JavaScript execution stack and microtask are empty.
- setTimeout
- setInterval
- setImmediate
Explanation
When a Promise resolves and calls its then(), catch() or finally(), method, the callback within the method gets added to the microtask queue! This means that the callback within the then(), catch() or finally() method isn’t executed immediately, essentially adding some async behavior to our JavaScript code!
So when is a then(), catch() or finally() callback executed?🤷♂️
Here the event loop gives a different priority to the tasks.
All functions in that are currently in the call stack get executed. When they returned a value, they get popped off the stack.
When the call stack is empty, all queued up microtasks are popped onto the call stack one by one, and get executed! (Microtasks themselves can also return new microtasks, effectively creating an infinite microtask loop).
If both the call stack and microtask queue are empty, the event loop checks if there are tasks left on the (macro)task queue. The tasks get popped onto the call stack, executed, and popped off!
Example
Task1: A function that’s added to the call stack immediately, for example by invoking it instantly in our code.
Task2, Task3, Task4: microtasks, for example a promise then callback, or a task added with queueMicrotask.
Task5, Task6: a (macro)task, for example a setTimeout or setImmediate callback
First, Task1 returned a value and got popped off the call stack. Then, the engine checked for tasks queued in the microtask queue.
Once all the tasks were put on the call stack and eventually popped off, the engine checked for tasks on the (macro)task queue, which got popped onto the call stack, and popped off when they returned a value.
Here’s graphic illustration of the event loop 👇
Conclusion
Congratulations for reading until the end! In this article you’ve learned:
- How microtask and macrotask are working in event loop.
I hope you find this article helpful in understanding microtask and macrotask how it works.
Suggestions are highly appreciated ❤️
Top comments (0)