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

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.

i think thousands of senior developers finally understood it today.

Where has this channel been all my life?

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.

This video should receive the Oscar for best animation

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!

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.

@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.

This is excellent work, Lydia! Your visualization of the event loop definitely can help millions of JS engineers understand it better. Huge impact, congratulations!

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.

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

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.

I finally understand Event Loop after 1 year writing JS.

This is the type of visualization that coding vids need

Top tier presentation, this is easily one of the best visualizations I've seen on RU-vid. 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.

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

One of the best video on event loop, till now on youtube, words are not enough to appreciate it... really... thank you...

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

Thank you. This is the best explanation I've seen.

I have no words. I’ve never seen a coding, programming or any kind of software dev video this well laid out! Your visuals and your ability to “talk shop” are both incredible. If you sell a course, I’d buy it immediately.

This is so important in JavaScript! Finally someone made a good video topic on this. Made me understood the call stack so clearly.

Hands down, the best event loop explanation ever!

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.

Amazing. I'm a visual learner, and it was a pleasure to watch and learn. Thank you for the content. 👏🏻👏🏻👏🏻

You made it easy for me to understand the sequence of execution between the microtask queue and task queue. Thank you!

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

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

12 min just recalled my last 2 years ❤🎉

this single video has taught me more about js under the hood then months of watching other videos

Whoaaaa... Ive been writing js for years and this is hands down the BEST event loop video resource ive ever seen. My god its presented so simply! 💯

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.

one of the best video on javascript visulization. thank you lydia Hallie. Make more videos like this.

I can't believe, there is literally not one incorrect word here. Amazing.

Fucking hell Lydia, this is incredible

Pls, don't stop making videos like this, it's really enlightening!❤

Are you Ai? This seems too perfect

Mam can you make a video on how exactly the react works under the hood ?

This video is way better than watching my favorite golden buzzer artist for the first time. Off the charts explanation. This video has just made history. Thank you so much. I had gone through a similar tutorial, yet, this one is so easy to follow.

Best possible explanation out there for understanding event loop concept in JS. Thanks for the video.

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

God bless you Lydia. Hands down the most important and enlightening JavaScript tutorial on the RU-vid that every serious JavaScript developer needs. God

Got it right ! Once you understand the basics this is the best video ever to understand how the event loop and overall js engine execution work ! Thanks lydia

By far the most simple yet effective way to show event loop . Really enjoyed it

Been doing javascript for over a decade, and this was the coolest explanation I've ever seen!

Where was this video when I was doing interviews 2 months ago 😆 An incredible video, really useful and clear. Thank you and well done 👏

This channel is a gold mine, thanks for sharing it, this is amazing

Amazingly simple explaniation and satisfying graphics! Really thankful for this video. Keep it up!

I have been programming for some years now, as a visual learner this video was awesome. Perfectly visualized and straight to the point! Keep up the great work

Well done! the best way to understand these concepts is with a visual explanation. Keep it up! 🔥

it took me way to long to find a video that explained everything this well

I didn't know this was possible but this video is JavaScript meets Absolute Cinema

I've just came across your channel. Very concise, informative and pleasantly visualised. Also interesting topic!

This presentation is crazy good. I can only imagine the amount of work put into it. Congratulations.

Thank you, Lydia. You explain very well. After 3 years writing JS, I'm finally taking the time to go back to the basics and learn the fundamentals and I'm learning a lot

These are the most gorgeous looking slides... ever.

Okay it doesn’t look like me to just stupidly show appreciation, but this video is straight up great

I'm preparing for an interview and this helps a lot. The promises video and this one are simply incredible. Love the series.

Very well done. When learning a new language or framewor, I try to assemble similar box diagrams showing how config and references tie across different code modules to achieve a result. It takes enormous amounts of work to devise examples that are small enough to support summarization while still demonstrating the functionality. Tying them together in code dependency order or execution order is yet another challenge to do well. Your videos do both extremely well. Subscribed!

Never thought I grab some popcorn🍿 to learn about the inner workings of JavaScript, yet here I am. Awesome work!

I can't imagine the amount of work you put in to explain something so complex put so simply

I've never seen this information provided with such uncompromising clarity. Subbed. This is the first video I've seen of yours, but if the rest are anything like this one, you're worth it. Amazing.

Lydia, your explanation is by far the clearest i've seen out there. I'd love to watch something similar for async-await!

This was absolutely amazing!! The way you broke down callbacks from methods, visuals to see what’s happening. Best of all a challenge to really help drive the subject home, best way to improve learning. I can’t wait for more to come from you and THANK YOU!

One of the best explainer videos I've ever seen, thank you! Subbed

It is insane how much information you you were able to convey in one short video, I knew async tasks were pushed off to be filled later but I had no mental model how that worked until now.

I am in awe of the explanation and the masterful use of Keynote. Great stuff. Congrats!

I think this is the best event loop explanation in the internet. You have described each and every point in such detailed way, making this topic feel so simple to understand. The animation is also made with such detail, making life easier.

It's so well explained that after 1minutes 27 seconds of watching I had to subscribe. This is pure quality content

Este video es INCREIBLE. Completamente deberia ser un MUST en cualquier capacitación/universidad. Millones de gracias!

I had seen a Holy Grail of profound knowledge to javascript! ALL HAIL LYDIA!

I've already learned all this, but this is the probably the clearest, best, and most beautiful explanation I've seen. I need to share this...

This is phenomenal. I just started learning javascript coming from an Embedded systems background and never understood how the execution of commands happened. This cleared a year of misconceptions for me and unprecedented years of troubles. Wow! Some people are just goated!

Well explained with smooth & meaningful animation. Awesome 👏👍

I don't even use JS in my line of work, ever, but the beautiful animations and colors caught my eyes, so I watched it and learned quite a bit about JS. :) Very well put together!

This channel is a gold mine... literally.. please post more.

I already knew all these but still watched it because of the quality of your presentation. Great work. Keep doing what you're doing.

Legend. Easily one of the best videos on JS on YT!

Congrats on this video. I've read a lot about this topic... articles, tweets, book passages. I've seen videos and talks about this. None of them were so thorough, clear and enlightening as this one. Keep up with the outstanding work!

Glad to be more clear about async stuff. Before just confused with the sequence and did not know why. Not even heard terms of promise based and callback based and their respectively being thrown to microtask queue and general task queue. Thanks 👏

I were to make notes on my notion for this.. but adding just the youtube link.. Best explanation on entire Internet by a great margin. Subscribed !

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.

GREAT EXPLANATION Something that wasn't very clear to me first time learning JS is that JS is just a thin layer of abstraction of a huge complex software that the browser is. Web APIs are NOT executed by the JS engine, but by the browser, which mostly execute C/C++ code. JS is just a tool tailored to do I/O operations effectively. i. e. most of the code you write in JS is just delegating tasks to the browser, it's not "pure" JS. One may ask "why monothread?". Because multithreading sucks. It's a design decision. Given most of complex work is done by the browser internals, and to make working with web apps a bit more pleasant, JS follows a simpler yet effective model, this model being the event loop. i. e. you don't have to care about race condition and stuff in JS, just code asynchronously, relying that the browser will do the heavy lifting

Hope you keep doing this great job. This is one of the best explanations I've seen in the last few months.

YISUS!!!! Piling up on what everybody else says: This video is amazing! I loved the video, and specially the visualization of the calls! Even if I don’t do Javascript anymore, this is so useful even for other languages, specially those based on a virtual machine or runtime! Thank you!

i often use "feeling" to say "maybe this work like this", finally your video with the visualization make me say "ahh so that how its work". Amazing Video

You've broken this down so simply that I'm surprised this isn't the standard model for teaching this. I don't deal with js a ton so you've helped explain behaviors I had witnessed but never fully understood, thank you!

The presentation quality is top-notch! This is probably the best JS "under-the-hood" explainer out there

So far the best explanation of how Java script works. Thanks

this is the best ever explanation i've ever seen... Thank you for this amazing video

What you've done is mind-blowing, ma'am.

Your explanations are crystal clear and your slides are absolutely stunning! You have a real talent for breaking down complex topics in such an engaging way. Keep up the fantastic work, you're making learning an absolute pleasure!

This video showcases a true understanding of the web api and the javascript event system resulting in a extremely high quality presentation.

This channel is a precious gem! Thank you, Lydia. I know it takes a lot of effort, but I hope you could make more videos with excellent visual explanations like this.

Thank you! This is absolutely the best explanation I have ever seen. 12 mins of video cleared out all the my confusions I had in event loop from day 1!!

Wow! I'm surprised at how well the JavaScript asynchronous lifecycle is explained in this video. The best of its kind bar none.

This is absolute gold! So glad RU-vid recommended this video. Lydia, it is amazing to see the effort you've put into creating these slides. I subscribed in the first 60 seconds. This is how the universities should have taught us! Kudos! Looking forward to your next one!

This is a really great resource for learning the importance of the event loop. This is the perfect medium between deep technical understanding and practical application of the event loop and Javascript as a whole. Even though I knew all of this, I found it refreshing relearning with the way you organized information, and I even forgot about the Microservice queue so that cleared up some of my async JavaScript understanding. This was an awesome watch! Looking forward to your future explanations/animations. Please keep it up 😁

I must say, this is the best visual representation of JS I've seen so far

No BS just pure content! True GEM!! Subscribed right away at 4:22 These small concepts took me a long time to grasp while working with JS over the years

The best explanation I've ever seen on this topic. I'm not sure if the visualization was the key or not, but your explanation was also impeccable. Subscribed! 🛎