Asynchronous JavaScript & EVENT LOOP from scratch 🔥 | Namaste JavaScript Ep.15

In-depth explanation of Event Loop, Web APIs, MicroTask Callback Queue, and how JavaScript works asynchronously in the web browser. Understand how setTimeout works behind the scenes along with fetch and event listeners.

You'll also find a lot of code examples along with a deep-dive explanation of the web APIs and how JavaScript code is executed asynchronously.

The only request is to watch this Episode of Namaste JavaScript with full attention. 🙏

It took a lot of effort to create this video, do comment down and let me know if you find it helpful.

00:00 - Introduction
00:40 - How JS Engine Executes the Code using Call Stack
03:25 - Main Job of the Call Stack
03:51 - How does JavaScript perform async tasks
04:36 - Behind the Scenes in Browser
07:35 - Web APIs in JS
12:03 - How setTimeout Works behind the scenes in Browsers
16:09 - Event Loop & CallBack Queue in JS
18:59 - How Event Listeners Work in JS
23:43 - More about Event Loop
25:02 - Why do we need Event Loop
27:29 - How fetch() function works
30:26 - MicroTask Queue in JS
36:01 - What are MicroTasks in JS?
38:35 - Starvation of Functions in Callback Queue
39:48 - Teaser of the Next Video
40:53 - Thank you for watching Namaste JavaScript 🙏

Support this video series, NOT BY MONEY, but by sharing it with your friends. 🙏
I'll give my best to come up with great content and everything absolutely for free on YouTube. 😊

If you are active on Social Media,
please give a shoutout to Namaste JavaScript and help me reach more people. 🙏

Cheers,
Akshay Saini

Would love to Stay Connected with you ❤️

#NamasteJS #AkshaySaini

[shrutigupta]

Amazing content Akshay :-) Have some quick questions: 1) When does the event loop actually start ? Are only asynchronous web api callbacks are registered in web api environment ? Does the web api environment stores only the callback function and pushes the same callback to queue/microtask queue? How does it matter if we delay for setTimeout would be 0ms. Then callback will move to queue without any wait ?

[rhimanshu]

Cracked 2 interviews back to back and answered Event Loop quest in such a way that there were no cross question left for interviewers to ask. Thanks again Akshay

[akshaymarch]

How was this video? Let me know in the comments below, I read each and every comment! ❤️

[rhimanshu]

A good teacher with quality content doesn't needs a marketing and advertisement. Ppl fallback with him naturally. Thanks Akshay for being a good teacher😊

[omkarsk]

Current job market had been depressing and I recently joined Bytedance! In my final tech round, I was asked JS Event Loop, Prototype chaining, promises etc. I immediately thanked you when I saw the smile on the interviewer's face after I answered all of them correctly. He then asked me to code JSON Deep clone and it went super smooth. Grateful for the lessons. I also happen to have graduated from MUJ.!

[jamilshafayat]

After almost two years, here I am again, experiencing the same exhilarating rush of emotions just like the very first time. It's truly amazing to journey through this entire session once more.

[Manibabu]

#gajab(virtual hug emoji, searched specially for this video only.)

watched in one go at 2Am, initially thought to skip bcz of length. but while watching got excited and completed without any pause.
you will get to know about following terminology,

callstack
global execution context
event loop
Web APIs (e.g. setTimeout, DOMs, fetch, console) context
callback queue(or task queue)
microtask queue
promises, mutation observer
startvation of callback

all the things are explained with three examples : setTimeout, dom apis with click event, fetch api + setTimeout.

Great video, I can confidently say that this guy has not learned the conecpt in this deep bcz of simply working in company.
Its because of his great interest/passion for Javascript.

keep empowering us with such a great knowledge.

I don't comment or like generally, but on this video have commented & liked both.

[jagrutsharma]

Things learned:
1. Browser has superpowers that are lent to JS engine to execute some tasks, these superpowers include web API's such as console, location, DOM API, setTimeout, fetch, local storage.
2. Callback functions and event handers are first stored in Web API environment and then transferred to callback queue.
3. Promises and mutation observer are stored in API environment and then transferred to microtask queue.
4. Event loop continuously observes call stack and when it is empty it transfers task to call stack.
5. Micro task is given priority over callback tasks.
6. Too many micro tasks generated can cause Starvation (nit giving time to callback tasks to execute).

[Merucan]

I'm a QA transitioning to a Front-End Developer. Thanks for this amazing course! Episode 15 is my favorite! Your way of teaching is awesome, and you bring a smile to the learning process.

[feeltherhythm]

In JavaScript, the event loop, microtask queue, callback queue, and call stack are all key components that help manage the asynchronous nature of the language.

Call Stack:

The call stack is a data structure that keeps track of the function calls in your code. It follows the Last In, First Out (LIFO) principle, meaning the last function that gets pushed onto the stack is the first one to be popped off when the function completes.
Callback Queue (Task Queue):

The callback queue, also known as the task queue, holds tasks (callbacks or events) that are ready to be executed. These tasks usually come from asynchronous operations, such as DOM events, HTTP requests, or timers.
Event Loop:

The event loop is responsible for continuously checking the call stack and the callback queue. If the call stack is empty, the event loop takes the first task from the callback queue and pushes it onto the call stack for execution.
Microtask Queue:

The microtask queue holds tasks that are also ready to be executed but has a higher priority than the callback queue. Microtasks are usually scheduled by JavaScript promises, mutation observers, and other similar mechanisms.
Here's how they work together:

When an asynchronous operation is encountered, such as a setTimeout or a Promise, the callback associated with that operation is sent to the callback queue after the specified time or when the Promise settles.

When the call stack is empty (no functions being executed), the event loop takes the first task from the microtask queue and pushes it onto the call stack.

If the microtask queue is empty, the event loop looks at the callback queue and pushes the first task onto the call stack.

This process repeats, allowing JavaScript to handle asynchronous operations without blocking the main thread.

Understanding these concepts is crucial for writing efficient and responsive asynchronous JavaScript code, as it helps you manage the order of execution and prevent blocking the user interface.

[IshanKesharwani]

Forget everything, just admire the way he is doing everything so that we can understand everything. The guy isn't backing off for one single moment.

[danachen]

At first, I clicked on your video to clarify my concepts on hoisting. However, I ended up watching the entire series for multiple times. It is surprising how you can have such a thorough understanding of JavaScript, and such in-depth explanation of all the concepts, both theoretically and practically. Love your passion, thank you so much!

[dronedarshan]

I have never seen anyone teaching concepts with so much depth, clarity and ease. The content is unbeatable, the delivery enthusiastic and love how eager you are to make JS easy for everyone. Thank you for putting all this effort and coming up with this series. Worth every second of watch time.

[souravsingh]

I am a student .I started learning JavaScript 3 months back .I am very passionate to know how actually JS works behind the scene. For me this NamasteJS series is like dream came true

[shrishtisingh]

I cannot stop watching "Namaste Javascript". As a beginner, I am quickly able to grasp so many new terms and explanations. Hats Off Man!

[SalmanMalik-wx]

almost 2.5 year back, i crossed path with one of your namaste js video, after watching it for few minutes i got aware of that i am not ready for this level of content but in my mind i registered a promise that one day i will come back when i will be well versed with basic js and trust me i have hustled alot with js and when the right would come start this series, finally i was able to start watching this series and currently just finished this one. extremely Thankful to you as well as to me finally i am about to resolve my promise and soon my own promise will going to move to microTask queue and then to call stack.
THANK YOU ❤❤

[pramudithajayasinghe]

This is the best JS tutorial I've seen on the internet. It is quality than a paid course. Thank you Akshay!!!.

[santhoshmoolemane]

Best thing is that He himself requests us to stay for some more time to learn.
In clg, even if we request, teachers weren't explaining clearly.
Akshay "ದೇವರು ಒಳ್ಳೇದು ಮಾಡಲಿ🙌"

[neerajchavan]

I am a java developer. Before watching this series I really used to hate JavaScript because it really behaves differently than other programming languages . I have watched a lot of tutorial series of JS but, your content is PURE GOLD! As you said at the start of this series, your GOAL is to make people fall in love with JS. I think you have succeeded. ♥️

[anishagoyal]

You are doing an amazing job Akshay. Thanks for such a valuable content.