JavaScript Visualized - Event Loop, Web APIs, (Micro)task Queue

Learn how the browser event loop, task queue, microtask queue, and Web APIs work together to enable non-blocking, asynchronous JavaScript.

Timestamps:
0:00 Intro
0:32 Call Stack
1:18 Single-threaded Problem
2:01 Web APIs
2:47 Callback-based APIs
4:04 Task Queue
4:39 setTimeout
6:22 Microtask Queue
8:40 Promisifying Callbacks
8:57 Challenge
10:52 Recap
11:58 Outro

[theavocoder]

Btw if you're in a hurry you can just fast-forward to 10:52 haha! I use Apple Keynote for everything.

💡Just a heads up: I explain these concepts in a way that personally helped me conceptualize the processing order.

E.g. the event loop doesn't directly "prioritize" the microtask queue, rather they're just processed and completed before the event loop continues to the next task. One iteration of the event loop is executing a single task, processing all available microtasks, and then updating the rendering of the page if needed (that's not covered in this video, might be another video, things like requestAnimationFrame). However, within your code, you'll get the sense that the microtasks are "prioritized" over the task queue-based parts.

[bilalarain]

i think thousands of senior developers finally understood it today.

[carltongordon]

Where has this channel been all my life?

[ryandawson]

I have been programming for 15 years and I don't think I have seen information presented so succinctly in that span. Thank you so much for this.

[kubackip]

This should be a gold standard for all programming tutorials on YT. Really awesome

[Ainigma]

@Lydia Hallie Are you kidding? This level of detail, every animation, every transition, the highlighting (and temporarily hiding unimportant components) is just so good.

Very well done, love it.

[jamesallen]

I've been in software development for 16 years. This video is outstanding. Probably one of the best I've ever seen for JavaScript.

Lydia, I want to encourage you to keep doing these if you desire. This visual, animated approach combined with your ability to teach is a home run.

Thank you so much for doing this. I am now subscribed.

[ramlaaal]

wow the visualization is awesome. The colours, gradients, design and animation. Its perfect down to the tiny details.

[amulpatel]

it is very very rare to have material like this presented in such a visual and engaging way .. animation is hardly ever used in js tutorials. Visualization of these concepts is so important for the visual learners out there. THANK YOU.

instantly subscribed.

[ahmedmaaz]

Okay ma'am, I noticed you only have 3 videos on your channel. Don't stop until you have at least a 20 video playlist on your channel. This is gold.

[timurdinov]

If anyone had a question in the Challenge section as to why console.log(1) didn't execute immediately, even though it was in the Microtask Queue and the Call Stack was empty, read on.

All the code on the left is a script and can be represented as an anonymous function. At the very beginning of the "Challenge" section in the Call Stack, there should have been an "anonymous" block. This block starts executing (the script is being executed), and then everything is the same as in the video, except that the "anonymous" block is always at the bottom of the Call Stack. The "anonymous" block disappears from the Call Stack after console.log(5) is executed, because it is the last operation in the script.

And so when the "anonymous" block disappears from the Call Stack, Microtask Queue and Task Queue processing starts (10:04).

Great video!

[slevinstayshere]

I'm a web programmer for 15+ years now and I'm stunned how well made this explanation is. really Amazing! Subscribed right away!

[scaly]

The sign of mastery is being able to simply explain a complicated concept. This preso is a thing of beauty... and mastery!

[TC]

Top tier presentation, this is easily one of the best visualizations I've seen on YouTube. You clearly have excellent teaching and communication skills. I know you are focusing your content on JavaScript but if you were ever interested in giving us an overview of some of your presentation techniques in Apple Keynote, I think many viewers could greatly benefit from it.

Keep up the awesome content! I can't wait to see what videos you have in store for this channel.

[MagnumCarta]

10 / 10 quality. The explanation of the different queues helped clear up confusion I had in the background of how asynchronous tasks work underneath the hood in the context of Javascript. Even with a bachelor's degree in computer science it was still a pretty head scratching concept thinking "how does the engine know what is I/O blocking and what is not? How does it handle that?". I would always hear "oh its just on the event loop! Its just on the event loop!" but I'd be like "all these diagrams suggest the blocking and non-blocking are on the same queue". I had no idea about the microtask queue and that is where fetch's then calls are appended to.

Also I can't help but look at the word "event loop" and just think of Froot Loops.

[HamzaKhan-rsyo]

The visualization is outstanding, providing one of the clearest and most informative explanations I've come across.

[paulopontovaz]

Whoa, I'm so happy that this channel exists. The visuals help SO MUCH with understanding all the JS flow!

[leepaulison]

Lydia, your teaching style is the best I've seen. Please continue to educate us.

[forkanshanto]

This video brilliantly illustrates the intricate workings of JavaScript's Event Loop, Web APIs, and (Micro)task Queue. The visuals make complex concepts crystal clear, making it easier to grasp how JavaScript manages asynchronous tasks behind the scenes. Kudos to the creators.

[VladMihailescu]

jesus you have an amazing talent to explain things visually just like how I prefer to learn, please a thousand times make more videos