Mastering Asynchronous JavaScript: Callbacks, Promises, and async/await

1. Course Introduction: Welcome to Mastering Asynchronous JavaScript with the help of callbacks, promises and async await keywords. My name is Wessel, and I'll be your instructor throughout this course. I'm excited to guide you through one of the most crucial concepts in the world of JavaScript development, which is handling asynchronous operations. Bit tricky at first, but it's an essential step in building efficient non blocking web applications. In this particular course, I break down complex topics into bite size and easy to understand manner applications or you're dealing with APIs, this knowledge is going to unlock the ability for you to work with multiple tasks at once without slowing down your application. So here is a sneak peek of what we will cover in this particular course. So we will begin with callbacks and we'll understand how you can make use of callbacks in your job Script based application. Then we will move on to promises, which is a modern and powerful alternative to callbacks. We will learn both these concepts or all these concepts throughout the course with the help of real examples and in a hands on manner. And lastly, we will explore async and await keyword, and you will write asynchronous code that looks and behaves just like synchronous code. And it's simple and really, really powerful. We are going to unlock these possibilities and these concepts throughout this particular course, and by the end of this course, you will have a solid understanding of writing asynchronous code in the world of Ja script. This course is for developers of all levels. Whether you are a advanced level Ja script developer who is just looking to press upon certain concepts in a synchronous Ja Script, then you can enroll into this course or whether you are any beginner who is looking to explore this concept of callbacks, promises, async await, then you can enroll and leverage a course. And if you're intermediate level developer, this course will also definitely help you. So this course is for developers of all levels. Like I said, whether you are a big intermediate level developer or an advanced level professional. Okay, you are going to get something out of this course. Now, are you ready to level up your ja Script skills? I'm super excited. Let's dive in together into this course. 2. Getting Started to a Wonderful Journey with an Initial Setup: Hey, there, everyone. So to run JavaScript, we are going to do some setup on our local machine, right? Now, of course, you can run JavaScript by right clicking like this in the browser and heading over to the console and writing JavaScript treatments over here. But this is not ideal if you want to write long, large scripts for production grade web applications. Now, this is where you need a setup on your local machine. So what we are going to do is we are going to make use of an IDE. If you're not aware of this term IDE, it stands for integrated development environment, which gives you the set of tool to write code and execute it. So I'm going to search for Visual Studio code because that is what we are going to make use of. Now, if you have a Visual Studio code installed already onto your system, or if you're aware how to install it, well and good. But I'm going to assume that you don't have it installed onto your system to benefit the students who are not aware of this process. So I'm going to head over to this particular website, code.visualstudio.com. Okay? A little bit of Zoom in. Now, here, the screenshot that you see is how Visual Studio code looks like, okay? And you can see, there is a syntax highlighting you can see. So interface is being highlighted in a different color. Button props is being highlighted in a different color. So these are all the benefits of the IDE, okay? You can see the nice folder structure on the left hand side. There's a terminal below with all the color coding and all of that. It offers a lot of benefits to the developer. So if you scroll down, you can see Visual Studio code supports. As I'm recording this video, it supports so many programming languages, okay? You can even add extensions. Now, what are extensions? Extensions basically extend or extend the ability that Visual Studio code has by default into it. Okay? So if you want to add some support for Python, okay? So more support for Python. So you can add this extension. If you want to add support for GeucPilotO you want to make use of AI while programming, you can add Get up Copilot CC plus plus. You can see there are tons of extensions, and there's an extension marketplace from where you can download and install all of this, and it's free. You can see Git up copilot, a little bit of. So it's all highlighting different features. You can customize the color themes, settings, profiles. There are a lot of stuff, okay? It has really good integration with otion control system and all of that. Okay? So you can take a look at this website and you can browse through as to what it has to offer. But if you scroll up at the top, here you're going to see this download for Windows button, okay? Now, if you're on Mac or Linux, you're going to see the download option for your appropriate operating system. Or if you're not seeing for some reason, you can go to other platforms and you can see what all platforms are supported over here. Okay? So I already have Visual Studio code installed onto my system, so I'm not going to install it, but the installation is very straightforward. It's like any application that you install on the system. There's no complex configuration that you have to even for Mac, it's easier, and you can see over here, there are multiple versions like if you are making use of Intel chip, you can install this one. Apple Silicon, you have this one over here. And also for Linux Ubuntu based systems over here, you have option to download and install. Okay? Now I definitely have this installed onto my system, okay? So here, I have it installed as you can see. Okay? So if you install it and open it for the first time, this is what you're going to see. This is how it's going to showcase you. Your view might differ a little bit because I'm already a visual studio code user, so I'm seeing the recent projects that I've used. So I'll just close this, okay? And here it's asking me that, Hey, you have not opened any folder yet. Yes, you can open folders here into the left side bar, and it is going to show you the tree structure. You can create files and manage it from here itself, or you can even clone a repository. And like I said, it has a really good integration with Git of Ocean control systems. So you can make use of that as well. Alright? Now, what I would request you all to do is just head over to your folder structure and create a folder, when you are going to practice Jascript. Okay? So this is my folder where I'm going to practice Ja Script, okay? And just open this folder over here in Visual Studio code. Open the folder, you can say open folder and you can navigate to the folder that you have just created. Or alternatively, you're on Windows, you have an option. You can right click. You can say show more option, and you can say open with Visual Studio code over here. Open with code over here. This is what it is. So this is Visual Studio, which is not Visual Studio code, it's different. So you have to take a look at this logo. Okay? This one. Okay? And if you say open, you'll see the folder open up over here. Okay. Maximize it. Okay? You can see. Now I have two instances or two windows or visual studio code over here. Okay? This is my folder that I had created called JavaScript. And this is where I'm going to create all my Ja script related files and everything that I'm going to learn about. So that's about it. I hope you have been able to do this setup successfully onto your system as well. 3. Mastering Callbacks: The Foundation of Asynchronous JavaScript: So now is the time that we talk about callbacks. Now what is a callback? So, by definition, a callback is a function that is passed as an argument to another function. Okay? A function that is passed as an argument to another function and is executed after a particular event or an operation completes. Now, let us understand in detail as to why you need something called as callbacks. Okay? So let me give you an example. Now, there will be scenarios wherein you are working on some sort of a code wherein you need to perform some sort of an external event or interface with some external system, okay? Which might take a little bit of time, it might not be instant like basic operations, but it might involve some bit of time that your system might need to wait to get the output, okay? For example, an API call. So if you're doing an API call, what would happen is you would typically wait for the response from the API call, right? It's not like you trigger the API call and you get an instant response. It's not like that. You triggered an API call, you wait for the response, you get the response, and then you use the response. Okay? So let us simulate a scenario wherein we do an API call. Okay. So what I would do is I would simulate a scenario with the help of timeout function. Okay? So in JavaScript, we have something called a timeout, Okay, which basically used can be used to set a delay on your end. Okay? So let me give you an example over here. Okay? So let's say I have this message. Okay, so I can say Console dot log over here. Okay. And I can say immediate. Now, this message will be displayed immediately, right? It's not like it would be displayed after a while over here, right? It would be displayed immediately. Okay? But there will be scenarios wherein I might want to cause a delay. So in that case, you can make use of time out. So you can say set time out over here. Okay. I can have a function like this, o. And this would be anonymous function, no parameters. I can say Csol log, I can say delay. Something like this. And I can even set the delay time. So let's say 2000. Now, 2000 is milliseconds, which means it will be delayed by 2 seconds. So I can save this. You can see immediate and after 2 seconds, you will see delay over here, right? So that's how it works. If I add three dots over here, if I save this, you'll see immediate and then a delay. Okay? So why are we learning about timeout right now? Why are we discussing time out? Because we are going to make use of timeout to simulate an example of something that is dependent on an external system, like an API call, right? API call will take a little bit of time, right? Like, you will trigger your request to the server, and then server will process the request. I will talk to the database, and it will get back to you with the data. Okay? So there is a little bit of delay, like 1 second, 2 seconds, depending on how fast things are at your end, right? So there will be a delay, and how do we simulate a delay? We will be simulating the delay in R code with the help of timeout. Right? So let's say I have a piece of code over here. Okay. What I'm going to do is I'm going to create a function. Okay? So there's a function. I'll call this function as fetch data over here. Okay? I don't need any sort of parameters over here. Okay. And I'll have set timeout here like this. Okay. And I can actually make use of arrow functions over here. Okay? Instead of the older syntax, I can upgrade to arrow functions. And here, I can say data fetched from the server. Okay? So I can data from. Okay. And here, I can add a delay of 2 seconds. Okay? So this is done. All right. And what we can do is we can call this particular thing. Okay. So let us say I have, I can say function over here. I can say process data over here, okay? And here, I can say fetch data, something like this. Okay. I'm calling this. And I'm calling process data. Okay? I'm saying, okay, so I'm saying process data. Okay. Something like this. What is happening is I'm calling process data first over here, as you can see, process data. Process data is then calling fetch data, and fetch data is doing some sort of an operation like talking to an EPI or something, and it is getting the data. Okay? If I save this, okay, you'll see delay and data from the server after 2 seconds. Okay? So for now, I'm just going to remove this, I'll just comment this out since we have understood what timeout is. But here, what we are trying to do is we're trying to fetch the data and the data is being fetched at the delay of 2 seconds. Okay? Now, let us say if we are fetching the data and we get some sort of response that we want to catch. Okay. Let's say if we're fetching the data and we get a response from the server that we want to catch. So I'll have a hypothetical return over here, which will represent. Let's say this is the data that is being represented from the server. Okay? It's saying sample data. Okay? What would happen in this case is I can get the data over here. I can say let data over here. Okay. I can do a console log over here. Okay, I can see data, something like this. If I save this, you'll see I don't get an output. I get undefined. Okay? This did not work because fetch data has a delay, right? So this thing took 2 seconds to return. Okay? But what happened is this got executed before this returned, right? This has a delay of 2 seconds. So this thing did not wait for this thing to finish executing and get back to it with the result. Instead, it executed this first. Right? So what happened is we got undefined. So the data was returned, but this code was executed and this did not work as expected, right? Now imagine having an API call over here, real API call instead of timeout over here. I'm having an API call, and I'm fetching some response from the server. Now, I need to get I need to wait to get the response from the server, right? I cannot just directly proceed to the next step, right? And this is where callbacks come into picture, right? This is a need of callback. So this example, you can see, assuming that here you are having any sort of an operation that is causing some sort of delay. Okay, of around 2 seconds. And we have simulated that delay with the help of this set timeout function. So assuming that you are having a operation that is causing a delay, okay, this is how things would work without callbacks, right? So you need a callback, which is a function that is passed as an argument to another function and is executed after a particular event or operation completes. Now, what is the event in our case? The event in our case is this fetch operation or this delayed operation that we're having. Okay? So how would things work? Let me upgrade this example over here, okay? So what I would do is I would have a callback here, something like this. Okay. And what we can do is let me or, you know, rather than modifying this example, I would simply copy this example, okay. And we would create, I would keep this example intact and I would have callback over here, okay? And I'll say with call here. Okay, so this I'm doing so that we have both the examples and we can differentiate as to what is the difference. Okay? So you can see over here fetch data and I'm calling fetch data with callback. Okay? So fetch data with callback, I can have callback over here. Okay? This is a callback. Okay. Now, over here, I can here I'm calling this process data with callback, okay? And this is being called from here. Now how I would modify this is I would take this data as a parameter over here. Okay, I would get rid of this over here. Okay. So this is the callback function that would be executed once this operation is complete. So this operation of timeout, once it's complete, what we need to do is we need to print the data, right? So I'm accepting data as a parameter over here and I'm doing a console log, okay. What I would do is whenever I'm calling this process data, with callback. What I would do is instead of calling this, I would say fetch data with callback over here. I would call straightaway this function over here, and I would pass this as an argument, this function like this. So I'm making use of callbacks now. And if I save this, okay, let me add this add something over here with callback. Okay? And this is done with callback and I'm getting the data. I'll add a cool in. Okay? Now, over here, rather than returning, what I can do is I can say over here. I have to create data first, okay? So I'll say data. It's equal to something like this. So this is the data. So let's say this is the data that is being returned from the server. Now I'll take this data and I'll say callback and I'll pass it to the data, something like this. If I save this, you'll see the first one is undefined. You can see data from the server data from the server, and here you see with callback, right? So data from server is being printed twice because of this console log. So if I get rid of this, and if I save this, you'll see data from the server. So this is one, and then you have with callback sample data over here. So I hope this is clear as to what is the use of callback over here, what is the use case. So here, this was a function that was supposed to be executed when the data was returned successfully. Okay? So over here, if you see when the data was returned successfully, this function was being executed, like code inside this, right? So instead of doing this, what we did is we are passing this function itself. So here you can see this function itself is being passed over here to another function, okay? This is a function that is interacting with the API or performing some sort of operation that is causing delay, okay? And here, this function is being passed as a callback. Okay. So once the operation is complete, the callback function is being called with the data and data is coming over here and it is printing the data over here, right? So I hope this is clear. So instead of getting undefined now, what is happening is this entire operation is waiting. It is waiting for 2 seconds until the data is fetched. And then this process data with callback is being called along with the data that is received from the server, and then it is being printed onto the controller, whatever operation you want to perform that you can add over here. Okay. So that is how the callback works, and I hope it's clear as to why this thing matters. Okay? Now, one more thing I want to show you over here, you can have callbacks, like callbacks for success, as well as errors, okay? So that is something that I wish to show to you all. Okay? So what you can do is before going to callbacks with success and errors, I also want to show you one syntax over here, which is of anonymous callback functions over here. Okay. So here, what we are doing is here in this particular example, if I copy this. Okay. This is not anonymous, right? So let me update this two on. Okay. I'll just say non over here. Okay. And this one also non This one also non over here. Okay. I hope everything is updated. All right. Now what is happening is we are actually passing this function to this particular function over here, right? So we can shorten the syntax. What I can simply do is I can simply cut this, over here, I can simply say function. I can simply accept data over here and I can simply o, oops, I didn't need a curly paese, I can simply paste this like this. Okay? Now, this is not needed, this is how the syntax becomes, with anonymous. I can say with non over here. I can save this and you'll see data from server with callback with non, you can increase this to 3 seconds. Let us see how this operates. All right. You can see data from server, data with callback and data with non. Or if I update this to 10 seconds, it should work well. Okay, actually one mistake over here, this is calling fetch data with callback. Okay. So it's still referring to the cool function, but I'll update it too with Annan over here. I was wondering why it's not reflecting the changes in seconds. So you can see over here after 10 seconds now with Annan will be reflected over here. You can see. Okay, you can see. So it worked perfectly fine with a shorter syntax. So this is an example of anonymous callback functions. Okay? Now, I wish to talk about callbacks for success and errors. Now, there will be scenarios wherein if you're doing an EPA call okay there's a possibility of things being successful and not being successful, right? So I'll copy this over here. Let's say there's an operation that we want to perform. Okay. I'll say with success error, something like this. You can have two callbacks over here. Success, callback and you can have error, callback, something like this. Okay. So what happens is over here inside, within set timeout, you can have some code. Let's say I have a code. Curd. Okay. I have error occurred, let's say, I'll keep this two true. Let's say it's a boolean value over here. Okay. Now, oops, if error occurred, then what I need to do is I need to call Success callback, right? Success callback with some data, I can pass in some data like error. Cord or something like this. Okay? And if this is not the case, then I can say se over here. Okay. And instead of that, I can say, okay, so if it's not error, then probably you can have the normal thing going on like this. Okay, you can have this. And instead of calling callback over here, you'll say, oops, this should not be error. This should be success callback. And actually, if it's an error, you'll call the error callback over here, something like this, right? So this is how the calls will be, right? And you can see, so we'll change this to four, okay, 4,000 milliseconds over here. Okay. Now what you can do is you can have these two callbacks also created over here. Okay? So here, I can say function. Okay. So function on success like this and you can say data over here. Okay. And here below, you can says not confirm. It should be console dot log over here, and you can say success Okay. And you can have data being printed onto the console. Okay. Now, the same thing you can duplicate for error as well. So you can say on error, Okay, like this. And instead of success, you can say error and it will display the data. Okay? So these are two functions. Now what you can do is when calling this, when calling the fetch data. So if you say fetch data with success and error, you can say on success, Okay. On success first because you have success callback defined first, right? And then on error, something like this. Now, if you save this, you should see on error being printed because we've simulated the error situation. You can see error error occurred, right? So you can see, and this is being printed. Error error occurred, right? Now you can upgrade this example to the anonymous function example. So first of all, this is an example of success and error. Okay? You can randomize this as well, so I can I can make use of math dot random. Math dot random over here. Okay. If you say math dot random, it's a method inside math object. So you can see it is giving me random values 0-1. You can see here on the console. Okay. Now I can say math dot random less than 0.5. It'll give me a boolean value, true, sometimes true, sometimes false. So I can have this condition copied and added over here. Okay? So this error occurred condition is now dynamic, right? So if I save this, you can see the error, you can see the error and success will be pretty much dynamic. Now, if I save it again, now it was error situation, it can be success as well. Okay? You can see success sample data, right? You can upgrade this to an anonymous function, so I can cut this over here. Okay. You can say like this. Okay. And then you have this over here. Okay. So this is done, okay? And then you can have the error one also. Now, you can also chain callbacks, okay? So let me show you how you can do that. Okay? So chained callbacks. All right. So let's say I have a function. Okay, so I'll have this function over here. Okay. Let me call this. Oh, sorry. Let me copy this. So I'll I'll call this function as step one. Okay, it has a callback, set timeout. And here, I'll have console log over here, which says step one to over here. Okay, something like this. I'm calling I'm having a callback as well over here, which does not accept a parameter. Okay. And instead of 10,000, I'll stick to thousand over here. So this is one function that I have with a callback. This is step one. Let's say I have a step two. So I'm doing a multiple set of operations over here. Okay? This is step two. I'll say this is step two again over here. Okay. I'll come over here again. I'll say this is step three, something like this. This is step three again over here. Okay. So so over here. Now, what I can do is I can say step one. So first style called step one. Okay. Within step one, I'm going to have an arrow function like this, And here I can say step two. So within the arrow function, I'll say step two. Now, step two needs a parameter. Instead of that, I'll pass in an arrow function over here again. Okay. And then over here, I'll again have step three, something like this. I'll say something like this. Like so and over here, like so. Okay. And here, I'll just mention console dot log all completed, okay? Something like that. All completed. I'll say steps, okay? I'll add semicolon here. And I'll see CV Okay. Now you see step one done, step two done, step three done, and all steps completed. All right. In the end, you see success sample data because this had a lot of timeout was longer, yeah. And this one also had a longer timeout, right? But here you can see step one, step two and step three were completed, okay? And this is how you can do an operation that involves multiple asynchronous operation, okay? Now, also, I would like to highlight one more thing over here like this thing of chaining callbacks is also known as callbacks hell. So if you Google or if you're reading about JavaScript or callbacks, you'll come across this term called callbacks Hell, and this is what it is. Wherein you are chaining callbacks or creating a pyramid of callbacks, wherein the callbacks are nested inside each other. So they are nested inside each other. Now, this is not a recommended practice, right, because it is making the code harder to read and maintain as well. So anyone reading your code tomorrow, okay, it would be tough for him to understand what is happening over here, right? And if you have more call wax or more asynchronous operations, more APA codes that you're doing, then it would be even more difficult and you might even make mistakes as a developer. Right? So yeah, this is what callback hell is. It's not a recommended practice, but I wish to explain and teach this concept to you all, okay? Now, you can even make use of callbacks, okay, use callbacks with array methods. Okay? So arrays have some good methods that are useful over here. Okay? Let me demonstrate this to you, so I can say number over here or I should say numbers. Okay. And I have one, two, three, four, five, and six okay. Okay. Now, you can say, let's say we wish to double or we wish to get an array where every number is doubled in this array. So I can say let doubled numbers, okay. And over here, what I can do is I can say numbers taught map. Okay, so I'll have map over here, and here I can see function. I'll have a function statement. This won't have a name. You can even create a function using arrow functions, but I'm doing it this way and you can see return numbers into two, something like this. You are just doubling the number over here. Okay? And then over here, you are seeing console log. Okay, so I'll just say log over here. And you can say double numbers, something like this. Okay. So now, okay, so we're getting an error that number reference is not defined. Okay? So function numbers. Okay, so this has to be numbers. Or you can call this as number, okay, not numbers. Numbers is the name of the array anyways. So if you save this, you'll see, this is the output. Okay? So what is happening is this map function is taking callback as an input, okay, because this is also function and this is also function. You can see? So that is how it's operating. Okay? So map methods takes a callback function and applies it to each element in the arrays. Alright? So yeah, that's about callbacks, all right. Now, coming back to the theory, okay? What are callbacks? So you are pretty much clear now. Callbacks is a function that is passed as an argument to another function and is executed after a particular event or operation is completed. So they allow you to control the order of execution, handle multiple tasks, and also respond to events, right. But keep in mind, excessive use of callbacks over here, like we saw, can lead to callback hell. Okay, and this is not a good practice, right? So yeah, these are callbacks, and I hope this was useful. 4. Promises Unlocked: Writing Cleaner & More Manageable Async Code: So now it's time that we talk about promises and how they can make our life easier. So like the definition says over here, promises provide a cleaner and a more structured way to handle asynchronous operations. Of course, what these methods are, we'll talk about them. But first, let's understand what promises are. So whenever you're doing asynchronous operation, one way to get them done is a callbacks. So if I pay some code over here, this is a asynchronous operation that is happening, and I'm making use of callbacks over here. So you can see this is a function that is doing the operation. I'm accepting a parameter called callback, and I have this asynchronous operation wherein you can assume I'm fetching some data from the EPI, and this is the data that I'm getting. It's an object. And then I'm calling this callback function over here once this data is fetched, right? Now, this callback function is actually this function that is being passed. So when I'm calling G data, I'm passing in this anonymous function with the help of arrow function syntax, and you can see this is being called once Get data is done. So if I save this, you'll see after 1 second, this data is being printed onto the console. So this is callbacks, but promises is a better approach whenever you're working with asynchronous operation, right? Because if you're doing a lot of asynchronous operations, then callback might lead to callback hell wherein you might it might be difficult for you to manage different callbacks when you are using them extensively, right? So promises are a better approach. Now, let me convert this example into an example with promises, okay? So I'm going to write the same example where I'm actually getting this JCN data from, let's say, a server, and I'll do this with the help of promises, okay? So I'll copy this function, first of all, okay? And I'll get rid of this part over here, because this is what we are going to change. Now, instead of having this timeout and then doing a callback or doing a call to this callback function, what I will do is I'll remove this. I'll say return new promise, okay? Promise, something like this. Okay. Now, if you hover on this, let me see if we get a documentation. Okay, you can see over here. So this is a promise, okay? And you will have so within promise over here, you're going to have a function, okay? So here inside, I'm going to have a arrow function to find like this. Okay. Like so. All right, and I'll add a semicolon over here. Okay. Now, this promise needs this function, and within this function, you need two parameters. Now, what are these parameters? One will be resolve, and other one will be the name rechect over here. Okay? Now, why do we have resolve and why do we have rechect? Now, whenever you are doing an asynchronous operation, there can be two states that can occur. One is that Asynchronous operation was successful. And the second state can be that the Asynchronous operation that you performed was not successful. Okay? So here, if you see a little bit of documentation, you'll see like you have two arguments or resolved callback, resolved means the operation was successful. So resolve is just a term used to say that the callback or whatever the operation happened was successful, o and reject, meaning that the error happened or for some reason, the operation was not successful. So we are having two callbacks over here, resolve and rechect. Okay? Now, what we are going to do over here is I'm going to have the logic. Asynchronous operation comes over here. So what is my asynchronous operation? I'll take this asynchronous operation, I'll add it over here. Okay? Now, one more change we need to make is here we are calling callback, right? So I'll get rid of callback over here. We don't need callback. And instead of callback, I'll say resolve. Over here, something like this. So what I'm doing is once the operation is complete, I'm saying resolve this particular call back. That is what I'm doing. Okay? And resolve will be called, and then whoever is the caller, there we can perform the next steps. So what I can do over here is I can say get data, like so. Okay, so I'll call get data. But now this is returning a promise, right? So I can say dot, then. Now, there are two methods that you need to be aware of then and catch over here. Okay. Now what is then? If you hold on then, I might see your documentation. Okay, I'm not seeing them. But then actually is the successful completion of this promise. Okay? And if you want to handle error, then you have to do it in cache. So here you can see, Data, and I'll have an arrow function over here, something like this, and I'll say log over here. Okay, and I'll say data, something like this. Okay. And then I can copy this same thing over here. Instead of Tita, I can see error over here, like so. And instead of console dot log, I can log the error in this format and I can save it. Okay? And you can see the output here. Okay? You can see so the output I'm getting is only one. Idally I should be getting two, one for this and other one for this one. But there seems to be a problem because the functions names are same over here. G data, get data, everywhere, get data. Okay. So I'll call this one, get data. Okay. I'll see with promise over here, something like this. Okay. And instead of calling get data over here, I'll say get data with promise. All right? So now there is some sort of separation in the names over here. This is get data, and this get data with promise. And if you save this, you'll see this one is from the first and this one is from the second. Okay? So it works absolutely fine, and you can see what happened over here. Okay? So what we did is we defined this function get data with promise with a return over here. So this is a return. It's returning a promise now. Right? Now, inside the promise constructor. So when calling this promise or when creating this promise, inside this constructor, we simulate an asynchronous data retrieval operation using set timeout. Okay, so whatever operation you're doing will go inside the constructor is something that you need to keep in mind. Okay. Now, once the data is retrieved over here, okay? Once the data is retrieved, we call resolve over here. Okay. Now, resolve function is called over here to fulfill the promise with the retrieve data. So we are passing in the data also because we want to fulfill this promise now with the retrieved data. And then what is happening is when you're calling get data with promise over here, okay? You're making use of then and catch over here. So these are two methods that can help you handle the successful fulfillment of the promise or the failure of the promise. So then is being used to handle the successful fulfillment. So here if you scroll up when the promise is fulfilled and catch when the promise is rejected. So you can see if there is any error, the promise is rejected, then the cache will be executed. Okay? So you can see this is the syntax of promise, and in this way, they provide a cleaner and a structured way to handle asynchronous operations in JavaScript. All right. Just keep in mind that the operation that you want to do, okay, will go over here within the constructor. You can see this entire thing over here, this entire thing is within the promise constructor. Okay? So this is the promise. And then if I see control, C, you can see this entire thing is going within the constructor. That is what you're supposed to keep in mind. Now this definition is getting a little bit complicated because it just says that it provides a cleaner and structured way to handle those sync operations. Okay? So you can think of promises this way as well that promises actually are representing a value that may be available now. It may be available in future or it may never be available because if it's available now, okay, it's available. If it's not available, then it's being fetched, right? So that is a state. And if it's never being available means an error has occurred. So these are the three states that normally a promise would have. Right? So yeah, that's about the promise. Now, let me show you the failure scenario as well over here. Okay, so what I'm going to do is I'm going to come over here. I'm just going to duplicate this code here with promises, and I'm going to add a colon. I'm going to say success and failure over here, something like this. I'm going to call this all as one. One so just differentiating the function name so that there are no conflicts as such. Okay? So we are working with this now, one. Okay. So get data with promise one. Now, over here, I'll have, let's say, I have a success or a success or a failure rate defined. Okay. So within timeout, I can say let success. Okay, so I'll have a 50% success rate. So I'll say math dot random over here. And if math random is less than 0.5, okay? So it will give a true or false. So the success will have boolean, whether it's true or false, right? And then over here, what I can do is I can say if statement over here, okay? And I can say if success. All right, then we are getting this data, like so. I'll move this inside. All right. And if it's not successful, then I have an s block over here. Okay. And within se, I can say reject. Okay? So resolve what is resolve for? Resolve is for resolving the promise. Means the data fetch has been successful, please resolve this promise. Now, if an error has occurred, you will call reject over here and you'll pass a message. You can pass a message. You can provide any reason like error and some reason over here. So I'll just say some reason. Okay. You can add the reason depending on your scenario, all right. But this is how it will be, okay? And I have FLs and there's nothing else. Okay? So now, if you save this so you have success over here. If you save this again, let's see, you can see error for some reason. So this condition failed, and you're getting an error over here. So this promise failed, actually. Okay? So this is how you can have success and failures handled. Okay? So if you want to if you have a scenario, we didn't handle this scenario, we just said result. Okay? So it just took care of the result. But now if there is an error or something like that, you might, for example, you might have a check on data that you're getting from the server. If the data received is null, then you might say reject and there is some error. Okay? So in that case, if reject is being called, then cache happens to execute over here, and whatever is there in the cache, that gets executed. All right. So yeah, this is an example of success and failure with promise. Now there will be scenarios when working with promises where you might want to execute a piece of code irrespective of whether the promise is fulfilled or rejected, right? So in that case, you have this finally, okay? You can say finally over here. Okay. And in a similar way, like you had the other two things defined, you can say console dot log, o, and you can say, finally. Okay. I would just add this message. Okay? You can have any sort of message over here. So this will be executed irrespective of whether there's a success or a failure. So if I save this, you'll see finally, okay? And you can see there is a failure. Okay? If I save this again, okay, I'm getting the same output. Okay, this is again a failure. You can see this time it's success, and you get finally as well. Okay? So finally is also part. But yeah, main thing resolves around then and catch over here. Okay? Now, let me show you one more scenario, okay, wherein you might want to have multiple promises together. So let's take an example wherein we want to run multiple promises in parallel. Okay? So you can say multiple promises over here. Okay. Now, let me create multiple promises. I'll say let promise one. Okay? How would you create this? You just call fetch data with promise, okay? So fetch data with promise. Okay. Let me copy this. Okay, it's not fetch, actually, it's get data with promise one. Sorry about that. Okay. So yeah, I call this, okay. And on this call, it will return a promise object. Okay so I'm getting that over here. Okay? So this is one, this is two, and this is three. I need to rename this. It'll be two, and this is three. Alright. So three promises created. Now, let's say I wish to have all these three promises executed in parallel. So what I can do is I can say promise over here dot A. You can see this all method. And here, you can pass in an array with promise one, Promise two. And promise three, something like this over here. Okay. And then over here, you can say, then, like so, and you can have the results over here. Okay? So after this is done, let's say I wish to do this. Okay. So I'll have this and instead of you can say all done. Okay. So I'll have this message all done, something like this. Okay? Or else you can add a cache as well, so I can copy this over here. Okay. And here I can add a cache. All right. And this will end with semicolon. So I can save this. And you'll see. So these two are executed, okay? And wait. Let me commend these two calls because now we are doing a lot of calls, okay? So you might get or let me add a console log in between. Okay. So what I would do is I would copy this console log over here. Okay. And here, I'd say multiple. Something like this. Okay. So now you would see multiple is being printed. Okay? Okay, it's actually it's asynchronous call, right? So it's being printed in the first. Okay. What I would have to do what I will have to do is I'll have to disable these calls. That would be the best, I think. Okay? So hoops, would disable this as well. Okay. And I would disable this one with success and failure. Like so. Okay. And I'll see if this. Okay. Now you can see this one got rejected. Okay. So I'm getting this error. Let me get the success scenario over here. Okay. So I'm getting error only. Okay. All right, so you can see all done over here. And all the three promises were successful. You can see over here. Okay. So this is how it is. You can add if you want. We didn't add a custom message for the failure. You can see at least one promise failed. Okay? And if you save this, you'll see at least one promise failed. So one thing I would want to mention over here is if any one promise fails, okay, then the rest are also marked as failed. Anyone fails, if anyone fails, you can see, you can see this in the output over here. So any one is failing, and that is the reason why you're getting this failure as the output. Now, if I run this again, okay, let me say this. You can see now all three were executed successfully. So you're seeing all done as the output. Okay? Similar way, there is one more, uh one more method, which says, which is race method. Okay? So now there will be scenario wherein you want to make use wherein you want to get the output or find the first settled promise, right? So in that case, what you can do is you can say promise dot as, and like you had the array of array of promise over here, you can do this. Okay. And you can have a similar syntax. So instead of, uh, instead of making use of all, you're making use of rays over here. That is it, okay? And you can see this done, okay. And here you can see race. So I'll just mention a series everywhere so that we know that this output is from s. Okay. I'll save this. So you can see den as this is done. So this one was executed over here. This is from race. Okay. So you can see one promise failed error and even as there was some one promise failing. Okay? So so yeah, this is how rays and promise works, okay. Race essentially will get you the force promise that resolves and all will help you execute or fulfill all the promises in parallel. Okay. So these are promises, and I hope this has been clear. So in a nutshell, promises provide a cleaner way and a more structured approach to handle a synchronous operation, okay? Then catch and also finally are some of the methods that you can make use of, okay? And these are the methods that help you work with promises. 5. async/await: The Modern Way to Handle Asynchronous JavaScript: So now it's time that we begin talking about async await. Now, async and await help us simplify our asynchronous code even further, right? Now, over here, I have an example already written wherein I have this function, which is returning a promise, okay? And within the promise, we are actually having this asynchronous code or wherein I'm simulating a delay over here of 1,000 milliseconds, right? And I have a success rate over here of 50% randomly chosen, and they can be success or a failure over here, okay? And I'm making use of this like this. So if a promise is resolved, then this is being used, and if it's not, if there is an error, then we make use of catch. So this is syntax when working with promises. Now the problem over here is this is still not readable. The way you are consuming this is not readable. And with the help of these two keywords, you can simplify this even further. All right? So let me give you an example, so I'll just comment this out, okay? What I can do is let's say I wish to consume this, get data. So what I can do is I can say function over here, and I'll say fetch data or fetch data, let's call it, and I'll fetch it in a sync manner. Okay. Now here, what I can say is I can say let data and I can say get data over here. Okay. So get data is the name of our function over here. Okay? So I'll also call this get data instead of fetch data. Okay? So I have things this way now, and let me also add this log statement over here, console dot log, wherein I'm printing data. Now, of course, let's see what's the output over here. Okay. So we're not getting anything over here. Okay? So what I would do is I would call this function. Okay, I forgot to call this function in short. Okay. I would see if this. Okay, so you are getting a promise now, okay? You are not getting the result, okay? How would you get the result? So to get the result using Async and await keyword, you can make use of async like this and you can add await over here. Like so. Okay. And you would get the data now, you can see? All right. So this is syntax, pretty much readable and pretty much simpler than this one. All right? So this still is not readable, and this thing simplifies it even further. Okay? Now, a sink and a weight are dependent on each other. If you try to remove a sink and if you try to save, you'll see this Awight is only valid in a sink functions. So you need to have a sink. If you try to remove await over here, and if you try to save this, you'll get a promise, and you can see this is an error. Okay? So you need to make use of both over here to get the right output, right. And you can even do error handling over here. So you can use error handling. You can do error handling with the help of simple try catch, and whatever error you are getting, you can log it this way, something like this. And you can move this code inside. Okay. And here you can say, I can add error. Something like this. Okay. Now, if there is a failure over here, you would see this error message. Okay? You can see error and error for some reason. All right. Now, the benefit over here of the syntax is one, it's readable. Okay? And the benefit is you can run multiple async operations in parallel. Okay? So I can have one more over here. Okay. So let's call this as let's call this as one over here. Okay? I'll say this is one. Okay. And this thing I'll add over here. I'll say this is two. Okay. And I'll quickly change the variable name over here. I'll say this is data one. This is data two. This becomes data one, data two, let me save this and let us see. You can see this is error. Now, one promise failed, right? So this got executed. The rest of the block was not executed. But if I run this again, you'll see one and then the second promise failed. One was executed, but second promise failed. Earlier on, first promise had failed. Let me save this again. You'll see one and two. This time, both were successful, right? You can have parallel operations like this, and as you can see over here or you can it's pretty simple to understand and syntax is also easy. Okay? There is no complicated thing involved. Okay? So you can see first one field. So of course, nothing will be executed in this block, right? So I'll save this again. Let us see. Okay. But instead of this, let me call this or let me, increase the success rate to let's say 90%. One, two, and three. So I increase the success rate, and you can see all three were successful, right? So this is how it works, and coming to the documentation, I think Await simplifies the asynchronous code by making it look like synchronous code. So it's looking like synchronous code, normal Javascript, okay, easier to read and easier to maintain. And even for bigness, this is pretty simple, right? People can easily make out what is happening, okay? So with the help of Await, we are telling that wait for this operation to complete because this is an Async operation. So it waits, it finishes this, then it waits for this to complete. I finishes this, then it waits for this to complete. And because we are making use of await, we have to mark this function as a sink over here. Okay? So it improves the readability and makes the error handling straightforward with Try Catch. So over here, you had to make use of cache, right then and catch. Now over here, it's pretty straightforward, like standard JavaScript, try and cache, okay? And you can use asyncad with multiplesynchronous operations, HTTP request, and more. All right. So all that is possible, and it's amazing Like these things are being used a lot, so if you're checking any JavaScript code or if you're working with EPIs a lot, which, of course, you will since you're learning JavaScript, okay, you will see these two keywords a lot. All right. So these two are important. Like, if you want to go advanced into Javas Crave, you want to use things like react and all, all right, these Await and a sink is something that you should understand really well. All right? So I hope this is useful and I hope you have been able to follow along. 6. Course Conclusion: Well, congratulations. You have completed mastering asynchronous JavaScript, and I hope you have learned a lot throughout this entire journey. I hope you're feeling much more confident in your ability to handle asynchronous operations with the help of concepts like callbacks, promises, async await. And I hope this course has given you a new perspective as to how you can write JavaScript based asynchronous code to handle operations such as database calls, EPI calls, and other stuff. Now, here's a quick recap of what we have learned. We covered callbacks. We learned about promises, and we learned how you can make use of this modern concept to write Async operations in JavaScript. And we also learned about ANC and await and we understood how you can make use of them. Now, I hope this course has given you some good hands on experience because we did not make use of any presentations. It was all strictly restricted on IDE. And I know developers like you always love or prefer to code and have the editor open in front of them always because that is what provides the real hands on experience before you start working on real world projects. Now, after finishing this course, I would highly encourage you to keep practicing and utilize the concepts that you've learned throughout into your projects that you have been working on Thank you for being such an engaged group of learners. This course comes with a class project, which you can find in the project section of this particular course. I would highly recommend you complete the project and share it with the entire class for more feedback. And with that said, we have come to the very end, and I wish you all the very best for the JavaScript projects that you work on.