async await | Namaste JavaScript - Season 02 - Ep 04
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2024
- Wanna dive deep into React JS with me?
Checkout Namaste React - namastedev.com/namaste-react/...
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. 🔔
Link to Subscribe: th-cam.com/users/akshaymarch...
If you want me to cover any specific topic, then comment down below. I would be happy to help you.
Cheers,
Akshay Saini
akshaysaini.in
Stay Connected:
LinkedIn - / akshaymarch7
Facebook - / akshaymarch7
Instagram - / akshaymarch7
Twitter - / akshaymarch7
#Javascript #JavascriptInterviewQuestions #AkshaySaini
🔥Dive deep into React JS with me, checkout `Namaste React` - namastedev.com/namaste-react
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.. ✌
@akshaymarch7 can you explain the higher order component also
Sir please launch a react js course with starting from javascript and also include backend part also
It would be nice if you make 3 to 5 projects in vanilla JS including all the basics to advanced concepts.
Machine coding questions and System design as well.
Also DSA in JavaScript would be awesome. 🙏🙏🙏
Sir please cover AJAX,
Omg please do complete season 2 thats the least we could ask for please put a proper fullstop on this gem playlist❤😊
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
you and your skills its too AMAZING after the long practice with other TH-camrs today I have cleared my doubts so thanks for this but bhai aisa mat karna ki ye course bhi paid kar do tum😃😃😃
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
Exactly. The concept of hoisting comes into play.
thanks bro u cleared my doubt
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).
first time seen such a crystal clear explaination !!
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! 🍻
Idk why this video has so less likes, this deserves so much appreciation!
Thank you, please share this on social media and to your friends and help us reach more people out there.
Your support is much valuable to us. ♥️
All my serious programmer friends watch your content already haha @@akshaymarch7
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
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 🙏
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 🙂
No one can match Akshay's energy while teaching.
He's as curious as a small kid. Love it!!
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.
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 .
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 ❤
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 🙏
You deserve so much respect and love for the efforts you put in especially for the examples you think to demonstrate such complex concepts
One of the best way to explain this topic . Comparison of what happens when we use .then to handle promises as well as using async/ await combo to handle promises. Thank you for clearing my basics. Respect! 💯
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 ❤
Your dedication to teach us such hard concepts with such deep understanding is commendable Akshay Sir.
Teacher like you can literally boost confidence in new coming developers like me. Please never stop teaching us🙏
Must watch for All Front End Developers!!! Nothing can beat his way of explanation and his deep understanding.
Tiger is back
Loda tigers😂
Yes he resembles 🐅 😅. Orange & black 😂
Akshay, You are a great teacher. I am really enjoying javascript now.
I am loving it more after subscribing to "Namaste React" course. Both free and paid contents of yours have same value and are at par than any other course. Thanks for your guidance, Sir!
Thanks, Akshay for putting your effort into taking a session like this. I can see your dedication to fulfilling your subscriber's expectations of you. I saw each and every video of your javascript and react JS live sessions. I learned a lot from you especially how to learn any skills or concepts. I loved JavaScript because of one and only you. Early I didn't know how to learn things. If you are taking a session like this big companies will struggle to reject the candidate. Thank you, my great teacher.☺☺☺☺☺
I searched a lot before this on youtube for async and await but I didn't find any video that explains how async and await work behind the scene thank you so much for covering this topic Akshay please make more videos this was very helpful for students and for building strong fundamentals
A movie can't hold my attention for an hour , but this glued me to my screen for the full episode.
Great video as usual!🤩
Best Best Best that is what this video is, when you say nobody teaches this, that is literally true the way you explain the way you teach the way you deep dive that is simply amazing amaaaaaazingggg. I purchased your react course the way you taught the knowledge you shared in that course was next level the best thing was you actually knew where we the one watching the course will get stuck so you taught accordingly really appreciate it. You are Amazing a teacher.
I can't watch videos that are longer than 10 minutes, but when it's your video, I don't know how time passes. Even if the video is an hour long, it feels short. Thanks a lot for your tremendous effort, man!❤❤❤❤
Happy to see you again on the channel. I really enjoy your way of teaching.
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.
Anyone purchase his namste react course? ...please let me knnow that all hooks are covered or not..? i am also planning to buy that's the reason i am asking...becoz in playlist its not mention about hooks ...i saw only useSate and memo hook...so please tell me if any one purchased..thankyou..
@@67009 yes i have purchased it recently and let me tell you my friend this is the best react course i have found.
I have currently completed 2 projects.
Its very good not only for his teaching but the community support of namaste react is very good you will get to see lot of react devs.
I entered this course with absolutely no knowledge on some of the topics like redux and testing and all . But now i feel very confident in it
@@67009 about hooks akshay has covered many hooks while doing the project. In theory he did not go in deep about irrelevant hooks but while doing project he covered most of them including custom hooks also
@@G_O_J_O_S_A_T_O_R_U thankyou buddy..
Omg, how can someone explain in such a simplified way? Thank you so much for this. U are a great teacher.
I am a developer with 2 yrs experience and for the first time I understood this topic completely. I have had read some articles previously but it didn’t gave me the complete understanding. Thank you for this. Never knew it was easier
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!
Inshort
Did p1 and p2 promises are resolved simultaneously during function execution? As p1 took 10 sec, does it mean in background ,p2 was also getting executed?
I'm not getting it why Js engine didn't wait for p2 since after executing promise p1, it execute p2 and should wait for p2 to resolve because p1 and p2 are different promise and can have different operations.
@@GAURAVMOKASHI
The reason is, promises are not getting started executing when the function is called and it reaches to line 28 [At 43:21 ]Promises were added in the call stack a way before, before the function execution started.
So, you are right, untill line 28 is getting executed, js will not move furhter, But P2 was already started running when jt encountered at line 18.
Now simply understand this as, call the same function twice. Only first promise in the first function where function will get suspended and wait. For all other 3 promises there will be no wait and values will be printed no time
The reason is, promises are not getting started executing when the function is called and it reaches to line 28 [At 43:21 ]Promises were added in the call stack a way before, before the function execution started.
So, you are right, untill line 28 is getting executed, js will not move furhter, But P2 was already started running when jt encountered at line 18.
Now simply understand this as, call the same function twice. Only first promise in the first function where function will get suspended and wait. For all other 3 promises there will be no wait and values will be printed no time
1. In call stack first handlePromise is loaded . and excution context is created for handlePromise.
a) Their is two phase one is memory phase and second excution phase .
when code goes from memory phase it see the promise and it will register a promise .
b) when code goes in second phase ( excution phase) it will see that promise it resolve or not.
** every js program run in two phase
sorry for bad english
@@vikaskumar-hc1cs no problem with your English; from where do you got this information, is there any resource
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.
Thank you so much Akshay Sir.Have watched a lot of tutorials, but the way you have explained the async await concept and how it works behind the scences is amazing.
Amazing how all the concepts you taught in season 1 about task queue, microtask queue, call stack, event loop, execution context are in play here! There is nobody else who explains these topics in such deep level! But once you understand these in deep level and get your hands dirty in the chrome dev tools, it all just makes sense!
I wish we would have teacher like you in college what an explanation 🙇. You make anything interesting. I have coding for 1 year I didn't knew how did it work behind the scenes . Thank you so much sir ❤️🙇
❤
If this video had been made earlier, I would have done 2 more internships by now. But Thanks a lot❤.
Didn't found a single video on TH-cam who makes me understood it so well as you did.
Akshay, I wish I had teachers like you during my college.. Thanks for making this course available for free in TH-cam. I have enrolled for Namaste React few days back. Wish you all the success.
One of the best teachers for FE. I particularly enjoyed the practical examples you provided, which helped me to better understand the material.
Please continue this series i already learned a lot from you
I was waiting so long for this series ❤❤❤.
Glad that you come back
This is the first Playlist which I have completed till the last and you have made fall in love with JavaScript. Thanks a Lot Sir ❣
really its the only video in the youtube which cleared the async await concept at very deep level.
I have completed Namaste JavaScript Seasons 1 and 2, and wow, what a course! .
lots of in-depth knowledge about JavaScript, which I'm confident will stay with me for life. Anything bigger than this would only be in dreams. Now, I'm excited to start the React JS course. 😊
And you are the best teacher I've ever seen.
Keep up the great work!"❤
Wish you the best, keep rising! 🚀
Finally The King of JS is back with another Banger 🔥🔥🔥🔥🔥🔥🔥
This is the best video I've ever seen on this topic, not only my concepts are clear but also I feel so much confident
Akshay sir this video is the best video among all async await videos, not just this but your whole Javascript series, I was too beginner before this course and now I got so good understanding of so many concepts just because of your videos. You are the best. Thanks a lot 🙏
Welcome back. Waiting for more topics to be covered.
Also bring machine coding and system design and DSA in JavaScript please 🙏
Thank you, Akshay, for such an amazing series. I'm eagerly waiting for #NamasteDSA now ;)
Yes, We need #NamasteDSA
everyone waiting
बहुत ही शानदार वीडियो है आपके मेने। पहली बार किसी प्रोग्रामिंग लैंग्वेज को इतनी गहराई से पढ़ी है । बहुत बहुत धन्यवाद आपका ❤
The best javascript and react teacher. You are the real gem. Thank you for sharing your knowledge with us. I have learned from many teachers on youtube but no one teaches like you.🙇♀🙇♀
Thank you soo much for such a mindblowing explaination 🔥 I bet there couldn’t be a better explanation for covering such complex topic in such easy way.
Thanks for supporting my channel, means a lot to me!
what a coincidence I just finished watching Namaste React and was sad it got over and I came to TH-cam to check out your channel. BOOM new video🥳. OMG. After Namaste React I feel like I found the right path to learning new things in the right way. Thank you so much. I will give you a guru Dakshina when I get a job🤞
Do you feel like you can create an application on your own, after you've finished Namaste React?
Give us a review of your experience with the course please.
I also learned js from #akshaysaini, and currently I am learning react with nextjs (bcoz it becomes very easy to learn react with nextjs). What is your review of this course, is it worth paying 2000 for this course. Plzz tell
@@aloktrivedi3285 100% worth it. He also goes in-depth and gives great insights about how everything actually works behind the scenes. After this course not only nextjs You can use or pair any library or framework with React with ease.
@@sandeeproy6564 yess. Although I knew some basics of react, this course literally changed my perspective. I have confidence that I can build any web app now.
The thing is after watching the lecture please put extra efforts of researching by yourself and code it. Try adding extra features etc. It'll be fun.
@@aloktrivedi3285 it is totally worth of paying 2000 or even more, because in this we actually build projects not just learning react and after this course you can have ability to build some other applications as well.
This is just awesome!!! These types of questions were being asked in many assessment rounds too and i usually get confused back then, but after this video, i feel confident. Great work, please keep making such amazing content 🔥
brother..!Please don't stop this series which is very useful and we are not able to find any such content.Thanks a lot
I watched the whole series and while waiting for this particular episode I landed a job, Thank you Akshay, the concepts learned from you in Namaste JS one way or another helped me secure the position.
Congratulations, wish you the best for your career ahead. 🚀
at 45:16 in your example when you say 40 seconds for the second promise its actually 20 seconds after the first promise is executed but totally it takes 40 seconds from the beginning which says JS doesn't wait :)
yes,correct
This is the best video of the Javascript series for me. Too much knowledge in it. loved this.
This is a complete video nothing more is expected from you Akshay. Great job bhai 👏👏👏👏
Sir, It is because of you that I understood JavaScript. And today I am working as a javascript developer.
Thank you so much Sir 😊❤
❤
@@akshaymarch7I think at some point in video it starts repeating. Look at 7:45
@@knowledgedose1956repetition is good
i am skipping any movies or web shows just for this series ❤
Genuinely the bestttt JavaScript course I've ever come across, the way you explained each and everything in detail was amazing. Thanks a lot for sharing your knowledge❤
This is the best video of Async Await ever! PERIOD!
After so many days akshay bhaiyaa you are back😍😍😍😍. I am planning to purchase your namaste react course. I started learning js from your namaste js series, and now it's been 6 months 🥰🥰🙏🙏🙏🙏
On which platform Namaste react course is available
@@vinayakag900 on his own website namastedev
@vinayakag900 Namaste Dev website.
Such a nice and deep concepts (which u have gained from years of hardwork and practice from various resources), you have combined here in a single video for free.People dont have to look lots of references and blogs.
This is really very appreciable and a great resource for the developers.
Thanks a lot😍(Great work).
This video is on a different level i have never thought that someone will teach javascript in such a good manner best explanation on async and await i have come across thanks guruji 😊
Waiting for this series😅
But what is happening when the function is suspended? And how it is coming back to call stack and how it is again start its execution from where it left?
When the function is suspended, it goes to the microtask queue for promise settlement, when it's done, it gets back to the main thread and all this movements of that async function is done by the event loop.
@@shalin1 hey I wanted to know that, if the function is grtting suspended on interacting with the 1st await promise, and the further code has stopped working there, how the 2nd promise also running parallel to the 1st one, when and how we started the time ofo the 2nd promise
Function is not suspended it is paused the function is indeed stored and managed within the microtask queue.
@@avigupta3691even I am wondering the same 🥲
Because of this series I'm way better JS developer than before. Thank you Akshay Saini.
I am not even a js dev, but i needed it to get the air of how the web works in general. Primarily i am a java dev with competitive coding as hobby. But i swear without ur concise, precise, and quality videos have helped me get over my js fear, understand web with a newer vision and also bypass the pesky questions interviewers ask to test js even tho i didnt have it in resume😁😁
Your ability to explain everything is simply amazing! Thank you for your fantastic videos 🙏
Heart-fully appreciate your hard work and dedication for teaching.Thank you for the excellent content.
This is great. Learned async await from other videos also , but never gone so deep in this concept like this. ❤
Thank You for your wonderful explanation , really your teaching is helping me learning a lot in JS. i think we are fortunate enough to have a good teachers like you who is really more interested teaching the concepts in an interesting way
Such a beautiful tech-series. Have a really better clarity on how things work under the hood - wrt the Call Stack and overall JS Engine. Makes me understand and love JS more. Thank You for the great work, Akshay ❤
Absolutely love it. Listening on my holidays in Spain. Thank you so much
Koi itna aachy say kaisay pada skta hai ! You're a gem bro ! Love you ❤❤
I never comment on utube videos but bro this lecture is something else. Literally u killed the topic. God bless uh bro keep uploading content like this.❤❤
• Async/await used for handling promises
• Async always return a promise
° Await can only used inside an async function
° Can only write await keyword infront of a promise
° While awaiting JS Engine does not actually wait rather the function is suspended and call stack is free for other stuffs but it looks like program is waiting at that point
° Use try catch for Error handling and can also use . Catch() method
Just pure stream of knowledge flowing on this channel for learner
This is one of the best tutorials about async await ❤
I am amazed Akshay ! I never knew this thing that how async await function works behind the scenes. Thanks for the video. Please continue this series with more such amazing videos in JS.
Wow, this tutorial on async/await is simply superb! 🚀 The explanation was crystal clear, and I loved how you broke down complex concepts into easy-to-understand steps. Thanks to your guidance, I finally grasp the power of async/await in JavaScript. Keep up the fantastic work! 👏 Looking forward to more insightful videos like this.
Thank you Akshay for sharing the knowledge, hats off for explaining topics with such simplicity ❤
You made us Fall in love with JS ❤.. You are a true Gem. Please don't stop making videos,
We cannot get these premium content anywhere else,, we are totally rely on you,,
It's a pleasure to see you back again.
Thank you for making such amazing contents ❤
If i had a choice to give you more likes, i would surely hit 10000 times the like button. Hats off.
My mood lights up when I see your upload.
Seriously The best javascript teachers i have ever seen . Hats off sir ❤❤
You're just crazy. I have never seen anyone who teaches like you. I just loved it.
great course. Hats off to Akshay to explain the concepts so clearly with so much of passion
Best javascript playlist thank you so much for putting so much efforts
Async await is fixed permanently in my head now....Amazing!!!!
Beautiful explanation! You're an amazing teacher!
you are a great teacher, your passion for sharing the knowledge is highly appreciable. Gratitude
Literally best concept series "Namaste Bhaiya "🔥🔥
Bro didn't even hesitate to make this complex topic look so simple, kudos to you Sir.
i have joined a startup to train us they also recommend your videos..Thanks for everything
Thank you so much for explaining us this beautiful async await video, i was confused before but now i have a very good understanding of promises and async/await, thank you so much ♥ you are the best JS teacher and this is the best JS playlist! ♥
What a Video bhai full of power with no sleeping mode while watching full energy on. After watching you video i'm JavaScript Addicter