I've been developing in JavaScript for over 20 years now. But when I was interviewed recently for a new job, and asked about JavaScript event loop, I could not remember it for the life of me. This is mainly academical knowledge, not something that you need as an experienced developer. People who do interview are often dumb, and do not understand that.
...this video explains it poorly actually. and you do need to know it.. you're wrong. not knowing event loop and execution context and enviorement and the phases.. is how people fck themsealves with accidental closures and other stuff... most important part to know about event loop is about task queue and microtask queue, how microtask queue has priority, and that web apis.. some of them are callback based, some of them are promise based .. even setTimeout 1000ms for example.. is not 100% guaranteed,that it actually is 1000ms , that's not execution to time.. that's execution to enqueue of microtask queue.
Finally, after looking for n^1000 videos, forums... I found a person who can explain these terms in real simple and understandable way 😭really appreciate your work man.
This is true but i think its important to not call event queue "stack" when the real data structure its a Queue. When you think about stacks and queues from real life everything makes sense
Thanks for the video! And yes, I have a question. So we know that every async procedure will go to the event queue. And it will only passed to the call stack if this is empty. So... 1. What about if we have a large large project, with many sync procedures, the event loop will wait until ALL of them finish before pass it to the call stack and give the result? 2. How it work then the "await", if we know that we need to clear the call stack before pass the async functionality. How it work when we need to have some data before proceed with the other instructions? For example data mutation 1, data mutation 2, data mutation 3, await for something() data mutation 4 How it works when we need to have the "something" before go to the data mutation 4 Thank you!
THNKAS A LOT i was havnig a hard time to get this idea but you have explained really simple, so Here you have a new student, thanks again and have a great day...and if your a reading this and your not the teacher , have a great day to smile, and remember you are important to.
i am really thankful for this video just before my interview, , feel having clear idea about what happen behind the scenes with node.js, please more advanced topics like this with such great explanantion
For me the most tricky part is that you never really know when the function you call is going to be asynchronous or synchronous. For example if you read data from a file and then process it, for small files it will be synchronous and for the files with let's say 300k lines it will most likely be asynchronous (it also depends on what you do with these lines). It's obvious that all HTTP requests are asynchronous so this is quite easy to handle or predictable at least.
Hi , i was trying to wrap my head around the event loop, one suggestion for the video , a brief about v8 + libUv must have been wonderful specially mentioning about the 4 extra threads that libUv brings in so that the fundamentals becomes much more clear, anyways great video as ever :)
Something to add there is that. This is the event loop explained from the NodeJS side. If you take a look at the event loop in the browser side. It's much mure complex due to UI taks, Render Tasks, Dom Tasks, Net tasks.
Awesome! I have few questions 1. few days ago i was reading a medium article in which they use the term callback queue but here you mentioned event queue. 2 they called it Node APIs and you mentioned Libuv APIs. 3. They also did mention what's called MicroTask Queue, but here it was missing. 4. Does Event Loop handles only Async operations? 5. How does Event Loop handles setTimeout functions?
So I believe "callback queue" would be the same as the "event queue". I would assume Node APIs are also referring to the Libuv APis as well. I have never heard of the MicroTask Queue, so I'm not sure where that fits in. For the event loop, yes, it is only looking for async operations that have finished running. setTimeout takes a callback function. So, when setTimeout is called, it sends it off to the underlying APIs to be handled. When the timeout is done, it then throws the event/callback onto the Event Queue. The Event Loop will find the event on the queue and pass it back to JavaScript call stack. hope that helps!
Same doubt as yours, I just watched a different video where the event loop components are mentioned as follows: Call stack, event loop, micro tasks queue, macro tasks queue and scheduled tasks queue.
@@ivansandoval3757 You have probably watched the explanation of the browser event loop, whereas here it's the nodejs event loop They work in a different way. Not to mention the fact that browsers don't have the Libuv API
nice video but the title is a bit misleading, this is actually the node.js event loop as you say at the end of the video, not the javascript event loop as the title says.. JS natively does not use libuv, instead it uses the browser's built-in Web APIs to handle asynchronous tasks
now i can say for sure that asynchronous javascript is certainly not single threaded, because LibUV API is running a separate thread in parallel to javascript main thread.
so if we have async/await, it will put the asynchronous to libuv, then event queue, and stack it to the call stack along with the other synchronous tasks?
First time hearing about LIBUV API. I thought async task directly goes from callstack to event queue. LIBUV only applicable in nodejs? Still not clear what exactly processing LIBUV does to async task before it goes to event queue
when synchronous code and a callback are both triggered at the same time, the synchronous code takes precedence over the callback function in the call stack. This means that the synchronous code will be executed first, and then the callback function will be added to the call stack and executed once the synchronous code has finished running.
Hi, 5:15 Eventloop use to take the event from queue and pushes into the callstack only when the callstack is empty. Means, eventloop do not take the event from the queue when there is an event(atleast 1) in the callstack. Am I right? What if there are multiple events waiting in event queue. Do the eventloop dequeues all the events one by one from eventqueue when the call stack is empty or it will dequeue only one event?
how does nodejs handle this code async function doSomething() {} console.log('Hi') await doSomething() console.log('Bye') doSomething is pushed to the libuv?
![[MV] A leap of faith...ความเชื่อใจครั้งสุดท้าย (From "Petrichor the series")](http://i.ytimg.com/vi/U1piZH2CNXA/mqdefault.jpg)
I've been developing in JavaScript for over 20 years now. But when I was interviewed recently for a new job, and asked about JavaScript event loop, I could not remember it for the life of me. This is mainly academical knowledge, not something that you need as an experienced developer. People who do interview are often dumb, and do not understand that.
...this video explains it poorly actually.
and you do need to know it.. you're wrong. not knowing event loop and execution context and enviorement and the phases.. is how people fck themsealves with accidental closures and other stuff...
most important part to know about event loop is about task queue and microtask queue, how microtask queue has priority,
and that web apis.. some of them are callback based, some of them are promise based ..
even setTimeout 1000ms for example.. is not 100% guaranteed,that it actually is 1000ms , that's not execution to time.. that's execution to enqueue of microtask queue.
Finally, after looking for n^1000 videos, forums... I found a person who can explain these terms in real simple and understandable way 😭really appreciate your work man.
Really? It was a very lame explanation. He skipped many essential parts while dragging on single things.
Understanding the LIFO/FIFO nature of the call stack vs the event stack is really cool, thank you.
So glad that was helpful :)
This is true but i think its important to not call event queue "stack" when the real data structure its a Queue. When you think about stacks and queues from real life everything makes sense
you mean event queue, not stack. Call Stack -- is stack, event queue - is queue.
I loved it, thank you. It would be so great if you make a series like this , explaining advanced concepts under 5 minutes.
Expected a 5 minute video but I got 2 whole extra minutes of James for free! What a deal
Always here to please!
As someone who is new to coding that explanation made the overall process really clarified things for me. Cheers
one of the clearest explanation of event loop, thanks James
Yayyy!!
Amazing video. Whenever I forget how it works I just jump over here and everything is clear again. Thank you mate!
I'm here with no background knowledge on JavaScript. I need to know this for an assignment and I find the video insanely easy to understand
I like this overexplanation. Please do more. I am even watching tiktok videos that loop short coding lessons and they’re sinking in more.
Best video on node js event loop in 5 minutes
AYYYYY!!
Thanks for the video! And yes, I have a question.
So we know that every async procedure will go to the event queue. And it will only passed to the call stack if this is empty.
So...
1. What about if we have a large large project, with many sync procedures, the event loop will wait until ALL of them finish before pass it to the call stack and give the result?
2. How it work then the "await", if we know that we need to clear the call stack before pass the async functionality. How it work when we need to have some data before proceed with the other instructions?
For example
data mutation 1,
data mutation 2,
data mutation 3,
await for something()
data mutation 4
How it works when we need to have the "something" before go to the data mutation 4
Thank you!
THNKAS A LOT i was havnig a hard time to get this idea but you have explained really simple, so Here you have a new student, thanks again and have a great day...and if your a reading this and your not the teacher , have a great day to smile, and remember you are important to.
Recently came across your channel and I’ve been learning so much. Thank you for all the work you put in on these!
Brilliant explanation with a clear design flow. Thanks, James!
i am really thankful for this video just before my interview, , feel having clear idea about what happen behind the scenes with node.js, please more advanced topics like this with such great explanantion
Wow, that's so cool to hear. Hope it went well!
note : libuv is written primarily in c ,
great explanation king
Thanks!
For me the most tricky part is that you never really know when the function you call is going to be asynchronous or synchronous. For example if you read data from a file and then process it, for small files it will be synchronous and for the files with let's say 300k lines it will most likely be asynchronous (it also depends on what you do with these lines). It's obvious that all HTTP requests are asynchronous so this is quite easy to handle or predictable at least.
Well, I think you can tell something is asynchronous based on two things:
1. it returns a promise
or
2. if takes a callback function as a parameter
Hi , i was trying to wrap my head around the event loop, one suggestion for the video , a brief about v8 + libUv must have been wonderful specially mentioning about the 4 extra threads that libUv brings in so that the fundamentals becomes much more clear, anyways great video as ever :)
Always come here for a quick refresher before I have to explain it to anyone :) That article is excellent in itself too! great content!
Thanks for watching!
This is the best video that describes Event loop. Thank you so much for your work James!
Wow, thank you!!
Super bro ... u explained a complex theory so simply with a beautiful animation.
Awesome. It was Crisp, Precise, Easy to understand and To the Point.
Omg, thank you for this explanation. This was so straightforward and easy to understand.
Really nice and simple way of explaining complex concepts. Great video
Thanks for the quick refresher, man! Plus correcting my pronunciation of "lib-you-vee" library ;)
Awsome sir now I understand watching many videos this is very simple to understand.
Something to add there is that. This is the event loop explained from the NodeJS side. If you take a look at the event loop in the browser side. It's much mure complex due to UI taks, Render Tasks, Dom Tasks, Net tasks.
I’m not sure that’s true? How is it different? It still uses the same offloading mechanism for async work right?
Great content games🎉. Can you please share which software you used for visualisation?
Awesome! I have few questions 1. few days ago i was reading a medium article in which they use the term callback queue but here you mentioned event queue. 2 they called it Node APIs and you mentioned Libuv APIs. 3. They also did mention what's called MicroTask Queue, but here it was missing. 4. Does Event Loop handles only Async operations? 5. How does Event Loop handles setTimeout functions?
So I believe "callback queue" would be the same as the "event queue". I would assume Node APIs are also referring to the Libuv APis as well. I have never heard of the MicroTask Queue, so I'm not sure where that fits in. For the event loop, yes, it is only looking for async operations that have finished running.
setTimeout takes a callback function. So, when setTimeout is called, it sends it off to the underlying APIs to be handled. When the timeout is done, it then throws the event/callback onto the Event Queue. The Event Loop will find the event on the queue and pass it back to JavaScript call stack.
hope that helps!
Same doubt as yours, I just watched a different video where the event loop components are mentioned as follows: Call stack, event loop, micro tasks queue, macro tasks queue and scheduled tasks queue.
@@ivansandoval3757 You have probably watched the explanation of the browser event loop, whereas here it's the nodejs event loop
They work in a different way. Not to mention the fact that browsers don't have the Libuv API
Wow, I finally get it. Where does the heap come into this?
Excellent explanation. This is exactly what I was looking for.
this explanation was amazing
Great video. One complaint, this is the node event loop which isn't exactly the same thing as JavaScript
Finally ! Amazing explanation Sir !
nice video but the title is a bit misleading, this is actually the node.js event loop as you say at the end of the video, not the javascript event loop as the title says.. JS natively does not use libuv, instead it uses the browser's built-in Web APIs to handle asynchronous tasks
Good correction
Great and short tutorial! Highly recommended
Thanks Mr. Quick. This was neat magnificently explained
Broo you nailed it thank you and thanks to andrew for this informative explanation
Perfect explanation, thank you!
Thank you very much. It was explained very well and I finally understood what an JS Even Loop is. You did a great job in explaining it!
So glad to hear that!
Thank you! Very concise and simple explanation of not an easy concept! 💛
Awesome explanation, much appreciated. Thanks :)
really impressive thanks man
Glad you enjoyed it!
Great explanation here James!!!
Now I got it, thank you. That is a really great explanation James! You've got a new sub
Yayyyyy!!! Glad it helped!
That was amazing explaining, thank you so much
Best explanation ever
Yes! So glad to help!
thank you pls do not stop thank you
Very clear explanation... great video!
great explanation!
very good explanation
Amazing explanation. Thank you!
wow great video , it simple thanks for the virtual presentation
Great video, keep going James! :)
thank you for explaining this!
Very good explanation. Thanks
So glad it was helpful!
Perfectly explained. Thank you
Brilliant. I think I finally understand.
SUBBED!
This is amazing explanation !!! thank you!
Wonderful Info Sir! please make a series on vue js
Glad you enjoyed it! I still haven’t really spent time with vue yet but I want to!
really well explained.
Clearly understand ❤ followed
Amazing explanation!!
So glad you found it helpful!
Awesome tips!
Thank you! Glad it was helpful!
now i can say for sure that asynchronous javascript is certainly not single threaded, because LibUV API is running a separate thread in parallel to javascript main thread.
Great Explanation, Thanks a lot
Glad it helped!
Amazing explanation, it was very clear! Thanks :)
fantastic video, thanks!
For 5 mins it is fine, but the micro task loop concept is missing
Getter and setter please and why using it
You're interested in why people use getters and setters?
A nice walkthrough the JS Event Loop. Thanks, James
{2024-04-15}
Just a minor correction, libuv is written in C, not C++
Yes exactly
U saved me man. Thank you.
Yay!!!
Thanks for this!!!
Wow, really, really understandable!!!
Great video, thank you!
What about js workers? You can do multi threaded tasks with it.
you gonna confuse people between the built in javascript event loop and nodejs thread pool + event loop which libuv provide
Great explanation!
Thank you. Hope it helped!
awesome...thank you so much.
Okay this is Node platform with C++ wrapper. but what about browser where we dont have Node and still have async JS?
where I can find more videos on js concepts?
Woa truly appreciate it
so if we have async/await, it will put the asynchronous to libuv, then event queue, and stack it to the call stack along with the other synchronous tasks?
First time hearing about LIBUV API. I thought async task directly goes from callstack to event queue. LIBUV only applicable in nodejs? Still not clear what exactly processing LIBUV does to async task before it goes to event queue
so if there is an incoming synchronous code and a callback at the same given time, what is the precedence for the call stack?
when synchronous code and a callback are both triggered at the same time, the synchronous code takes precedence over the callback function in the call stack. This means that the synchronous code will be executed first, and then the callback function will be added to the call stack and executed once the synchronous code has finished running.
Hi, 5:15 Eventloop use to take the event from queue and pushes into the callstack only when the callstack is empty. Means, eventloop do not take the event from the queue when there is an event(atleast 1) in the callstack. Am I right?
What if there are multiple events waiting in event queue. Do the eventloop dequeues all the events one by one from eventqueue when the call stack is empty or it will dequeue only one event?
Explain the “popping off the top” more
Hi there, I'm watching this in April - if I sign up on the website you linked, can I still see the 24 JS and CSS challenges you did for Advent?
Yep!
Thanks 🙌🏼
what does it mean when we say that event loop is blocked and how does that happen?
He says the event loop is "first in last out" is that out from the place it came it in or other end?
Cleannnn thanks
Thank you so much...
great video
thanks a lot man
Thanks!
how does nodejs handle this code
async function doSomething() {}
console.log('Hi')
await doSomething()
console.log('Bye')
doSomething is pushed to the libuv?
great explanation
Thank you! Did you already have a good idea of what the event loop is?
@@JamesQQuick nope not until today, learnt something new
@@krateskim4169 Ah so glad it helped!!