async await | Namaste JavaScript - Season 02 - Ep 04

Wanna dive deep into React JS with me?
Use coupon code : CODE72 and register now by link below. Only valid for first 500 students.
Running heavy discounts right now, register today!

async and await are keywords in JavaScript that are used to work with asynchronous code, making it easier to handle asynchronous operations like network requests, file I/O, or timers in a more synchronous-like manner, which can make your code more readable and maintainable.

00:00 - Introduction
01:08 - What is async in JS
15:15 - Using Await with async
21:48 - Diving deep into async/await
40:43 - Behind the scenes of async await
55:09 - Real world examples
01:04: 28 - Error Handling
01:09:00 - interview Tips
01:11:03 - async await vs promise then/catch

If this video was helpful, give it a thumbs up and subscribe to my channel for more such videos. 🔔

If you want me to cover any specific topic, then comment down below. I would be happy to help you.

Cheers,
Akshay Saini

Stay Connected:

#Javascript #JavascriptInterviewQuestions #AkshaySaini

[akshaymarch]

Like this video and subscribe to the channel for more new video coming very soon. 🚀
Also comment down below what topics should I cover next.. ✌

[trialaccount]

Ques). for those who thinks if code reaches await of p1 suspends function execution and after 5 sec it should go to await p2 the timer for p2 should start and should take 10 sec there so overall function execution should be 15sec?

Ans). the timer ticking doesn't start at await, instead it started in the beginning of the code only where promise was declared.

If the declaration would have been like inside async p1 declare then p1 await after that p2 declared follwed by p2 await then function would have taken 15 secs

[AmarSingh-uwdb]

Gratitude Sirji ❤❤.
I request Sir to please make videos on
1) Design patterns
2) Solid Principles
3) File Upload(Single and Multiple)
4) Video Upload as Data stream
5) Forms with validation, error handling and warning messages
6) Ajax and xmlhttpRequest
7) Importing javascript and code Reusablility

[mohammadaffan]

Promise: Think of a promise as a guarantee made by someone (like a function) to do something and provide you with the result later. It's like ordering food at a restaurant. You get a promise (receipt) saying your order will be ready soon. You can wait for it (.then()) or check on it later (.catch()).

Async/Await: Async/await is like asking someone (a function) to do something for you, but instead of waiting for them to finish right there, you tell them you'll do something else while they work. It's like asking a friend to pick up your order from the restaurant. You can go do other things (like order a drink) while your friend (the async function) waits for the food (awaits the promise).

[omkarshidore]

Great energy, throughout the series,
I've been working into backend, cloud & data-science for past 4 years, wanted to understand frontend for System design, Luckily I ran into your channel, spent the new years long weekend on both seasons of NamasteJS.

Sending some love!
Keep rolling out the content! 🍻

[rohinijadhav]

Thank you for sharing your knowledge😄Akshay.
Please add following topics as well in namste JS season 2:
1. Browser - behind the scenes
2. DS in javascript
3. How to improve performance of application

[shubhsharma]

Idk why this video has so less likes, this deserves so much appreciation!

[komalpatil]

Must watch for All Front End Developers!!! Nothing can beat his way of explanation and his deep understanding.

[nknikky]

I'm an QA engineer and wanted to learn JS concepts to prepare for my job interviews. And after watching all of your videos season 1 and 2, I'm feeling so confident that I can crack Developer JS interviews (after some practice obviously).

Thank you so much for making the Namaste JavaScript series. 🙏Namaste 🙏

[borntobefree]

Never seen a better explanation than this, How much you must be working to get all this knowledge and then putting out here for all of us with so much of effort and work.
Thanks from all the developer community. You are a true teacher. Please keep teaching all of us .

[akshaychavan]

No one can match Akshay's energy while teaching.
He's as curious as a small kid. Love it!!

[premshahu]

4 page of notes, simplified and yet deep dive into the concepts why people don't understand and take an interest in learning anything of the teacher is this much enthusiastic and passionate about teaching code .
Actually I find some of you tube channels that teach coding are just coders after a long I saw a proper coding teacher who can teach me and beleive I didn't get bored at all and by the time my intrest in knowing just keep increase.
You are the teacher that not only teach but also develops the energy and enthusiasm and will to learn Thank you Akshay sir ❤

[juhibhardwaj]

One of the best teachers I have ever seen. I deeply appreciate the unwavering effort you put into your teaching. Thanks for the awesome content 🙂

[hardikjain_]

I wish there were more amazing teachers like you can't thank you enough. I once hated web development now I love Js and react just because of the way you teach. Thank you Sir 🙏

[shafaatakhunzada]

An excellent and straightforward explanation of async/await! I highly recommend the Namaste React course to everyone. Even as an experienced developer with 4 years of React experience, I found the course immensely valuable. It clarified topics I was already using but wasn't entirely clear on, making them as easy as a piece of cake to learn.

[G_O_J_O_S_A_T_O_R_U]

I wanted to take a moment to express my sincere appreciation for your course "Namaste Javascript". Your teaching style is clear and concise, and the way you explain complex concepts is truly impressive. I particularly enjoyed the practical examples you provided, which helped me to better understand the material.

Thank you for sharing your knowledge and expertise with the world. I look forward to learning more from you in the future.

[rahulmaurya]

You made us Fall in love with JS ❤.. You are a true Gem . Please don't stop making videos,
We can not get these premium content anywhere else, , we are totally rely on you, ,
It's pleasure to see you back again.
Thankyou for making such amazing contents ❤

[ganeshpavan]

This was very useful in diving deep to know how exactly things are running behind. Could you also please do a video on how exactly the callstack/fetch webapi/callback queue/micro task queue behaves when async function code reaches to await or using multiple awaits in a single async promise function.

[GAURAVMOKASHI]

Akshay Sir, Please clarify my doubt !

const p1 = new Promise( (resolve, reject) =>{
setTimeout(() =>{
resolve("Promise Resolved Value!!")
}, 10000);
});

const p2 = new Promise( (resolve, reject) =>{
setTimeout(() =>{
resolve("Promise Resolved Value!!")
}, 5000);
});

async function handlePromise(){
console.log("Hello World !!")
const val = await p1;
console.log("Namaste Javascript")
console.log(val)

const val2 = await p2;
console.log("Namaste Javascript 2")
console.log(val2)
}

handlePromise();

In the above condition, when p1 will resolve after 10 seconds, and p2 will resolve after 5 seconds
then we see that after 10 seconds it will resolve both value.
As p2's setTimeout value is lesser(5 Seconds) than p1.(10 Seconds)

As you said when JavaScript fetch or reach the line of handlePromise function the following this will be happen.

1. In call stack first handlePromise is loaded and it console log the "Hello World !!"
2. Then it go to the next line, finds that there has been await p1.
3. When it saw await p1, handlePromise Function remove from call stack.
4. After the 10 seconds over, then Function go to call stack and start execution from where it is left.
5. Now the "Namaste Javascript" is print and also the val value i.e. "Promise Resolved Value!!"

Now my query is How it will print/console.log the "Namaste Javascript 2" and
also the val value i.e. "Promise Resolved Value!!" ?

Because as I follow you in the Video, at that time it will not fetch the const val2 = await p2 Line.
When it fetch "const val2 = await p2 ;" Logically It will then Remove the handlePromise Function remove from call stack Again.
So before it go to "const val2 = await p2 ;" Line Interpreter do not know that there has another AWAIT Function there. (i.e. const val2 = await p2;)
So how it prints "Namaste Javascript 2" and "Promise Resolved Value!!" for second time after 10 seconds?
Please enlighten me for this condition.


Thank you for Namste React also!

[Gourav-kljt]

Akshay, You are a great teacher. I am really enjoying javascript now.