JavaScript Under The Hood [3} - Asynchronous JavaScript, Task Queue & Event Loop

In this video, we will look at how JavaScript does Asynchronous operations and how the task queue and event loop works.
Event Loop & Microtask Queue Article:
towardsdev.com/event-loop-in-...
💻 My Courses & More
traversymedia.com
💖 Show Support
Patreon: / traversymedia
PayPal: paypal.me/traversymedia
👇 Follow Me On Social Media:
Twitter: / traversymedia
Instagram: / traversymedia
Linkedin: / bradtraversy
Timestamps:
0:00 - Intro
1:00 - Core JS Refresh
1:30 - Blocking Operations
2:05 - Blocking vs Non-Blocking Example
4:06 - Browser Web APIs
6:20 - setTimeout Example
7:47 - Task Queue & Event Loop
10:53 - Promises & Microtask Queue

[@easywebdev1021]

This series is best for revising our Js concepts. Thanks Brad, learned a lot from you 💯

[@whome4860]

Hello Brad! I'm a junior developer from South Korea and i've been watching your video for about 2 years. ☺️ 2 years ago I started to teach my self computer languages and how to build web app with your contents. They were my best teachers really. Thank you so much for the amazing videos. ‼️ I want you to know there is at least one huge fan of you in Korea 😆

[@simple8810]

great😁

[@rogut8]

Beautiful visual interpretation of call stack, web APIs and event loop. Well done Brad. Thank you

[@ensar8177]

Under The Hood series is really something. Thanks.

[@MgelikaXevi]

great series!

[@nikitaalekseev991]

This is Great series! And Brad, you’re actually an awesome diagram creator!

[@patolorde]

Except its not his diagram

[@nikitaalekseev991]

@@patolorde Oh, important note.

[@hamidakbari3305]

respect. thank you for your hard work and your great channel.

[@mdshohidurrahman1121]

Thanks for crystal clear explanations.

[@ibadshaikh2215]

Such a refreshing tutorial 💯

[@muhammadidrees6650]

Thanks buddy for great work your are doing, it is gonna help a lot of people for sure :)

[@arielro85]

Thanks Brad!! Keep Rocking it!

[@AlexSenichek]

Thanks a lot. Really helpful. Great explanation.

[@muhammadhamzaawan4504]

Perfect explanation brad.

[@ttufox]

Great content as always

[@NNNedlog]

I've been looking forward to this

[@aeronwolfe7072]

Great series!!!!

[@AozenDreyar]

thank you this serie helped so so much ^^

[@rabihg1845]

Thanks a lot, I would like to see a series about React under the hood in details and how the code is executed, it will be very interesting since nobody did it before

[@Naldjei3396]

wow! really awesome content! Thanks from Brazil!

[@jz1607]

Arrive at minute 10:50 and was like WTH he did not explain promises. Then few seconds later you started talking about it :) That's what I was looking for, thanks a lot

[@TheCodeAngle]

Awesome stuff!!!

[@babayaga6172]

Very informative Make whole series on DSA in JavaScript there are playlist whi cover these topics in c++ but we need JavaScript

[@noureldin5611]

Great video thanks

[@thabataalmeida5403]

great, I need this content

[@seddeknadhem5638]

Thank you my friend.

[@_dinhvankhoi]

does the use of promise , async awaitt , be queued in the callback quere ? , or just Promise , while Async is essentially Promise ?

[@ITStars]

great content , thanks alot

[@lifeisbeautifu1]

Thank you❤

[@ahmed-osama2022]

Thanks a lot 😊

[@nark4837]

This is what always confused me, the fact everyone said that asynchrony does not require multiple threads, etc, but what confused me was how the JavaScript engine was executing `fetch`, `setTimeout`, etc at the same time as the code, on a single-thread, but the fact is, the JavaScript engine is only executing one thing, the other things are being executed by the browser APIs (on a different thread!) and then the callback is simply pushed onto the call-stack by the browser back to JavaScript. Therefore, the I/O operations, etc are being executed on different threads, or simply just using another concurrency primitive by the browser at the fundamental level. Is my intuition therefore right that if you have an asynchronous function that does not execute any code using the underlying asynchronous browser APIs, whether it be directly or indirectly through another asynchronous function, will behave synchronously?

[@igorr4682]

I would add Micro Task Queue to your diagram to make it complete for example when you user fetch and set time out together.

[@kasper369]

Can you create an updated video on service workers and web workers? Love your content plz keep the vid coming.

[@_Iokanaan_Marusidze_]

Thanks 👍

[@tomich20]

great explanation. I would like to know why i write down async/await in my functions

[@ivanmilenkovic203]

Do they ask these kind of things in technical interviews? In any case, thanks a lot Brad :)

[@Winter_Wyvern1]

I hope u also mention Job queue or the Promise queue has higher priority over the Callback queueu

[@HabtamuDesalegn]

Thank you for sharing useful concepts. please detail (continuous from last video) on NestJS?

[@mikefenn2451]

I love you Brad…

[@BusinessWolf1]

First of all, thank you for the series. Secondly, look at the title. [3}

[@danielilievski7144]

Developers write only open square bracket and expect the IDE to close it for them

[@BijanProgrammer]

Title of the video has a typo: [3} Great series BTW.

[@universecode1101]

I remember a project with setTimeout and Promise ... It was a nightmare, so learn these concepts thoroughly. Any news about your course, Brad?

[@jww0007]

yo dude I see you on every coding channel

[@akxdev]

You used setTimeout in production?

[@javascriptes]

@@jww0007 LOL

[@markbarlescu1853]

Please add to this playlist , how js engine handles errors

[@serychristianrenaud]

thank

[@jnsjknn]

Are callbacks placed in the task queue immediately when something like setTimeout executes or only after the timeout? If the former, how does the task queue handle the delay before calling the callback? If the latter, how do the web APIs handle the delay?

[@nicolaebalica-oncica8896]

Very good question, I would also like to know the answer to this, but after 1 year, I don't think Brad will reply :D

[@sriramiyer9840]

Could you please make a video on the prototype chain system in javascript too?

[@66abady]

give us part 4 already :)

[@uploadvoice]

I am not sure if the callbacks, put in the task queue are executed in a FIFO mode, imagine 2 setTimeouts, where first has bigger timeout …

[@trevorbuchanan5962]

It's worth noting that there's no task queue in node's event loop. It utilizes libuv's event loop, which, best I can tell, uses a combination of a static order (timers are called first for example), and some internal logic.

[@chandramohannegi]

🙂

[@marcusarcher4]

You used wrong brackets in the title

[@gerardlucas6402]

First view

[@TheCodeDealer]

First