microtask queue and callback queue in javascript

Question

The javascript runtime environment has an event loop, callback queue, and microtask queue. The functions in the microtask queue get priority over the functions in the callback queue (for getting pushed into the call stack).

Functions returned from the web API like fetch (which returns a promise) get pushed to the microtask queue while functions returned from web APIs as setTimeout gets pushed to the callback queue. So functions returned by the fetch promise will get executed before the setTimeout.

My doubt is, the console is also a web API, right?? now if we simply want the console to log something then the console web API will return the result which technically should first get stored in the callback queue.

So here we can observe that a simple console log should get lower priority than a fetch (since the returned function from fetch gets stored in the microtask queue while the console is stored in the callback queue.).

So theoretically a function returned from fetch should get executed before a simple console log but in reality, the result is reversed. So what am I missing? Please someone clear my doubt please.

Please watch the holy grail of explaining the event loop by Jake Archibald: youtube.com/watch?v=cCOL7MC4Pl0&vl=en — k.tten
– k.tten, Commented Sep 25, 2022 at 0:15
If with 'Web API' you mean the apis that browsers provide, then not all web apis use these queues. There's no callbacks/events/promises involved. console.log happens immediately. — Evert
– Evert, Commented Sep 25, 2022 at 0:29
You're even calling it 'callback queues'. This should give you a good hint. There's no callback in console.log — Evert
– Evert, Commented Sep 25, 2022 at 0:42
@NishantKumar Web APIs that are synchronous do not use the event queues. Web APIs that are asynchronous (cause events to be fired later, or are listening to events) do use the event queues. — Bergi
– Bergi, Commented Sep 25, 2022 at 2:25

Danny · Accepted Answer · 2022-09-25 00:32:17Z

3

Take a look at this snippet

setTimeout(() => console.log('ASYNC'))
Promise.resolve().then(() => console.log('PROMISE')) // also microtask
queueMicrotask(() => console.log('MICROTASK'))
console.log('SYNC')

answered Sep 25, 2022 at 0:32

Danny

6101 gold badge4 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nishant Kumar Over a year ago

Yes, perfect but I'm thinking why won't SYNC get logged after PROMISE and MICROTASK because functions in the microtask queue get priority over the callback queue(console waits in callback queue)

Danny Over a year ago

@NishantKumar No, the point of microtask is to execute after all the sync code. This is the reason of the order of the console.log. And in this case the only part that is sync is the last console.log that is not wrap in any function.

Bergi Over a year ago

@NishantKumar There is no "callback queue", and console.log does not wait for anything

Collectives™ on Stack Overflow

microtask queue and callback queue in javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related