This is where all the memory allocation happens for your variables, that you have defined in your program.
There is also something called Micro Task. Micro Tasks are useful to make something async without taking the penalty of a whole new task.
As per MDN:
As mentioned above, Microtask queue handles callbacks with respect to Promises and Mutation Observer.
It has responsibility to see weather the call-stack is empty and does the task queue contains pending task to process. If the call-stack is empty, it will push the task to the call-stack from the queue and the task gets processed.
Here is how the Event Loop handles different tasks:
Second, if a microtask adds more microtasks to the queue by calling queueMicrotask(), those newly-added microtasks execute before the next task is run. That's because the event loop will keep calling microtasks until there are none left in the queue, even if more keep getting added.
All of it can be better illustrated by the code below:
console.log('start') setTimeout(()=>console.log('Time-out 1'),0) setTimeout(()=>console.log('Time-out 2'),0) Promise.resolve().then(()=>console.log('Promise 1')) Promise.resolve().then(()=>console.log('Promise 2')) console.log('end')
The output on Chrome would be:
start end Promise 1 Promise 2 Time-out 1 Time-out 2
Now why is that so?
Firstly, the two script jobs are scheduled on to the Call Stack as the first task. The logging start is picked up from the task queue and executed.
Set Timeout is handled by the Browser as it is a Browser window object. The timer and everything is calculated by the Browser as waits for a given delay then schedules a new task for its callback in the Task Queue. This is same for both the Timeouts. So there are two Timeout tasks waiting in the Task queue. As logging script end is part of the first task, so setTimeout is logged in a separate task.
After that, the Promises are run and their callbacks are pushed to the Microtask queue. They're pushed to the queue because the first task isn't yet completed and microtasks callbacks can't be run when one task is in mid-execution.
Then the logging end as it is also part of the first task which is yet to be completed. Note that we have already two Promise callbacks pending in the microtask queue, thus as soon as there is no task in middle of completion, the event loop prioritizes the completion of the microtasks callbacks(over the timeouts) and pushes them to the Call Stack. This process continues until the Mirco Task queue is empty.
Then the rest of the task queue is pushed to the Call Stack.
I Hope the above process was clear.
However the output will vary from Browser to Browser. This is sort-of excusable, as promises come from ECMAScript rather than HTML. ECMAScript has the concept of "jobs" which are similar to microtasks, but the relationship isn't explicit aside from vague mailing list discussions. However, the general consensus is that promises should be part of the microtask queue, and for good reason.
Before concluding this write-up, a brief intro on Web-Workers.
Web-workers help to handle the intensive tasks, which would have blocked the UI. Web-workers help in making the best use of multi-threading.
Will be covering them in a separate article shortly.
Till then Happy Quarantine, Stay Safe and Keep Learning!