Javascript event loop | Every Javascript developer must know !

#events #eventloop #javascript
This video covers the concept of event loop in Javascript. After watching this video, you will have a greater understanding of how Javascript is capable of handling asynchronous events even though the runtime is single-threaded.

1. Learn about public-key cryptography

2. maximum substring in a string (Google interview question)

3. How the javascript engine works?

4. Real time median in a stream, another google interview question

5. Understand the Javascript event loop

6. Understand Promises in javascript

7. Git basics you must know

8. Styled components in React

9. JavaScript Interview question null vs undefined

10. The reason behind that silly CORS error

[mmmmkk]

The setTimeout() function expects a function as it's first argument. As the question stands now, the console output will be,

alpha
beta
gamma

However, if we pass a function to the setTimeout() like this: setTimeout(function() { console.log('beta')}, then the following will take place.


First, func() is added to the call stack and it's execution is started. Following that the statement console.log('alpha') is executed and 'alpha' is printed to the console.

When the runtime reaches the setTimeout() call, it is handed over to the browser through the Web API (including the callback which is function() { console.log('beta')}), and the setTimeout() is popped from the call stack. Then the runtime moves on to the next statement (which is the console.log('gamma')), executes it and prints 'gamma' to the console.

In the meantime, the browser sets a timer on a separate thread and once the timer runs out(in this case even though it is 0s the timer needs to be set and resolved) it sends the callback to the event queue.

Once the runtime has completed executing the last function call in the call stack, it checks the event queue and adds the first function from the event queue to the call stack (in this case function() { console.log('beta')} which was the callback for the setTimeout() function). It then executes the statement console.log('beta'), and prints 'beta' to the console.

The order of functions and statements executed from the call stack are as follows,
1. func()
2. console.log('alpha')
3. setTimeout(callback, ...) callback sent to browser through Web API
4. console.log('gamma')
5. console.log('beta') callback taken from event queue put there by the browser upon successful resolution of timer

The console output is as follows,

alpha
gamma
beta

[shabnamnaaz]

this is what I was asked in an interview and I messed it up, thankyou so much for helping me understand .

[mevimalkumar]

Man love you 3000 ❤

I'm looking for an well explained answer for How Javascript actually works? and no one explained that better than you.

[nickaxworthy]

Very good - thank you - more concise, correct, and up to date than many others - recommending to my students

[harsh]

i always see this video while revising javascript as it makes things simple for me..thanks for sharing your knowledge with us

[riteshnavadia]

Very nicely explained sir! I kept listening to this video tutorial repeatedly till I got Complete Clear Idea on event, call back fn. Concept
Answer to question asked in the end of the video is alpha, gamma, beta; as per the concept explained

[sherifhossny]

Brilliant video brother! Thanks a bunch! For the people having problems with your speaking pace I recommend slowing down the video. That's how I did it

[archanag]

This is one superb video and amazing explanation ...so simplified that anyone can understand easily.Keep up the good work!!

[bardhan.abhirup]

Hey, a couple of pointers - the volume is too low, background music is too loud/unnecessary. Thanks for the lesson though.

[manishk]

Very nice video and very good explanation. Thanks for it. But I feel there is some confusion due to the example to figure out alpha, beta, gamma to understand eventloop. As javascript SetTimeout api always expects function callback, in example you are executing console.log('beta'), not passing function as callback so even if you do setTimeout(console.log("beta"), 1000) your output will be alpha, beta, gamma.

[abhijeetmishra]

Very nice video, clearing the concept very well .Thanks

[himanshujain]

Nice video explanation keep post more vedios

[whydoyouneedmyname]

amazing. and I love the background music. its meditating.

[robinsingh]

The stuff you are explaining is important enough, you don't need a background music over it.

[pankajtambe]

alpha, gamma, beta.... settimeout for 0 millisecond will appear at the end.. the rest of code which doesn't have settimeout will exicute first

[nametakenfan]

Phenomenal video - this was a really clear and easy explanation! Thanks!!

[darotudeendurosomo]

The setTimeout should accept a callback ' setTimeout(()=>{console.log('beta')}, 0)
'

[bhaktikadam]

Thank you so much for this explanation🙂

[sahiljaiswal]

I am a bit confused here. First of all there are 2 types of stack: one is call stack which holds execution contexts with global execution context at the bottom and second there is normal stack inside the execution context storing primitive variables and references to non primitive variables. If events inside the queue happen after the call stack is empty it means we have no information of the program, everything is blank and suppose the callback function needs some access to those variables won't it throw error? Please help by clarifying on this.

[MrKrishnanandaKHegde]

Very well done video.. Thank you very much.. that background music is also very nice.. I am now going to search if you have made similar video on node.js.. keep up this good quality work.. most videos in YouTube are low quality videos.. they don't fully digest the concept and try to explain to others.. your way of explaining the concepts is very impressive.. 👌👍🙏