Asynchronous JavaScript Course (Async/Await, Promises, Callbacks)

Joy is a great teacher who has  created many amazing courses   and written a bunch of helpful  technical articles. In this course,   He will teach you how a sink await  and promises work in JavaScript. Hey guys, you're here in this video, we're gonna  make ice cream and learn Asynchronous JavaScript.   Yes, you heard me right, we're gonna  make ice cream today. And along the way,   we're going to discuss three topics, callbacks,  promises, async await along with examples,   the video will go like this over here, we're going  to make the main project, which is the ice cream   project. And over here, we're going to look at  some examples so that you can better understand   how the system works. But the first question  is, what is Asynchronous JavaScript? And why   should you even care? If you want to make bigger  projects more efficiently, then this is for you.   What Asynchronous JavaScript does is it allows you  to break down bigger projects into smaller tasks.   And then using any of these three methods over  here, either callbacks, promises or async await,   what you can do is you can form a  connection between these small steps   in a way that you can get the final result. So  here's an example of what I mean. So this is the   ice cream that we're gonna make today. Here's the  ice cream. Okay, so using Asynchronous JavaScript,   we can break it down into smaller steps. If we  do that, it looks something like this, you can   see that these are the seven steps to make ice  cream first, starting with the Place Order, then   we're going to cut the fruit, then we're going  to add water and ice, so on and so forth. And at   the very last, we're going to serve ice cream. To  make you understand this topic even better, I have   added some time function as well. You can see this  over here, it takes two seconds to place the order   two seconds to cut the fruit one second to add  water and ice, so on and so forth. And at the   very last we're gonna serve ice cream, take the  money and buy ourselves a Lambo, because why not?   If you want to learn Asynchronous JavaScript  better and know the difference between two things,   synchronous and asynchronous system, let's  start discussing with the synchronous system.   Let me explain this to you in clear words. Let's  say that I have given you 10 tasks and just one   hand 10 task one hand, so how will you do the  task? You are going to do one by one, right? Like   this look, 123. So we are in tax number three,  right? You cannot jump to the tax number seven   unless you do 456. And then seven. Right. So what  are you doing? You're doing one by one, right.   But in the asynchronous system for 10 task,  you will be given 10 hands so that you can work   independently without depending on anyone. Look  at this image over here. This is a synchronous   system, they are loading one by one, the second  image doesn't load unless the first one does.   And the third image doesn't load unless the  second one does, which means that they're   following a order like this 123. And on the  asynchronous way, you can see that nobody   depends on anyone they are loading on their own  pace independently. By the way, I wrote an entire   article on the topic that we're going to discuss  today so that you can understand it better.   At the same time, you can revise it from  here more easily, efficiently and quickly.   Link of this article will be given in the  description down below, go and check it out.   To summarize, let's say that we're setting up  a marathon for three persons, how many person   three person, if you are doing it in the  synchronous way, what will happen is you just have   one single lane, and you have to place those three  persons on this single lane in this area of 123.   And the rule is nobody can overtake the other,  everyone has to finish the race one by one. Look   at this image over here. This is the synchronous  system. This is the finish line over here. Okay,   and the images, which is the person's One, two  and three are standing on the same lane, which   lane same lane and nobody can overtake the other,  everyone has to finish the race one by one. So the   person three or the image three will finish the  race first, then the second one and the first one   like this, the single lane, the synchronous  system. If anyone stops, the entire process stops.   If the image three stops over here that everyone  has to stop. And if we are setting the marathon in   an asynchronous way, for three persons, we will  have three lanes. If we have more participants,   then the number of lanes will also increase,  which means that nobody stops for anyone, they can   finish the race independently on their own pace.  If anyone stops, then the system still continues   to run. Look at this image over here. This is  the finish line and this is the participants   over here and these are the lanes Okay, lane  number one, two, and three, the image one, two,   and three. They're gonna finish the race on their  own pace. I hope you understand the difference   between the synchronous and asynchronous system.  Let's look at some examples right now. You can use   any code editor you want but for this tutorial,  I'm going to write Don't go pen because it has   a simple interface. So you can follow along  with me if you want. So open code pen.io. And   then you click this pen over here, then you're  going to click this small pen icon over here,   and you're going to name this project, anything  you want, I'm going to write it async j s. Okay, and then you save it Ctrl F, like this Ctrl  S. And now you're going to drag it in the middle,   like this, and double click on the JavaScript  section like this, and it's going to expand.   And in order to open the console, you're  going to click this small icon over here,   you can see that like this, double click on here,  and it's going to expand like this, we need to   know we need to do one more setting, you come over  here, this small gear icon over here, click it,   click on behavior, and you enable everything  except this one, the auto updating preview. Okay,   turn it off, Save and Close. And then we're  going to manually get a run button over here.   Why is that? That's because every time we write  a single letter, corporate runs it automatically,   which means that every time we write a single  letter, we're going to get an error after error   after error. In order to avoid that I have turned  off this setting. Every time we finished writing   our code, we can manually run it like this. Okay,  now let's look at the synchronous system example.   So we're here we write synchronous si nc HRONOS  synchronous like this. And you comment this like   this. And over here, we're going to write console  dot log five times how many times five times like   this following console dot log, okay, brackets,  double quotes space over here, okay, you copy this   Ctrl C, and then Ctrl, v 510s. Okay, 345. It's  some gap over here as well, additional gaps,   like this. Alright, so over here, we're going  to write a full sentence. Okay, I eat ice cream   with a spoon. So again, divided by phrases, okay,  then follow me along. I eat ice cream. With sorry.   Spoon, okay, Ctrl S to save it. And then  you're going to click this run over here.   And then we're going to get the result,  there we go, you can see that our phrases   are printed one by one serial. That's because  JavaScript runs from the top to the bottom,   how does JavaScript run from the top to the bottom  serially? In this process, if anyone gets stuck,   then the entire process get stuck. This is the  synchronous system. If you change the sale,   let's say that I want to change the spoon from  here to here, okay, Ctrl x, and then you paste   it over here, Control V Control F, you clear this  console over here, and then you run it again,   let's see what Let's see the result. Now you can  see that I eat spoon ice cream with a you see   the JavaScript doesn't care about anything is  gonna run the code from the top to the bottom.   This is what the synchronous system. Now  let's look at the asynchronous system.   Now over here, right, asynchronous, okay, a  synchronous done, clear the console over here, you   change the CL Ctrl x. Okay. And we're here Ctrl  V Ctrl S. And now come over here at the bottom, I   need to make you understand a small function named  set timeout function, which is a built in function   of JavaScript. What this does is it allows you  to run a function after a specific amount of   time. So you write set timeout set, then capital  letter T, timeout, this one, okay, then brackets,   the first thing that we are going to  pass as an argument is a function. So   we're going to use the arrow function, don't  worry, I'm going to explain arrow function   and the regular function with the arrow function  like this, okay, equal to this sign curly braces.   Now let's look at the difference between function  the regular one and the arrow function. Okay,   in the regular way, we write a function like  this first, the function keyword, okay, then   we're going to name it like this A, B, C, D, E,  F, G, however you like, right? Then you put that   then you put that bracket like this, okay? And  then curly braces, this is the regular function,   but in the error function, how we write it is  we're going to write either late var or const.   Okay, like this. And then we're gonna put the name  over here. What was the name of this function? A,   B, C, D, D, right? So we're gonna write ABCDE  D, which is the name of that funk. Like this, like this, and that equals, and then we're gonna  put brackets over here and then this sign over   here, the arrow sign, and then curly braces. On a  regular function, we used to put our arguments on   this bracket like a, b, c, d, etc. In the arrow  function, we place our arguments over here, A,   B, sorry, D, C, D, etc. I hope you understood the  difference between two for this project, I'm going   to use an arrow function. Okay, the latter one,  this one. So once we have entered the function   inside the set timeout as an argument, the next  thing that we're going to put is the time, okay,   so it is actually counted as milliseconds. If  we write 1000 is going to count as millisecond,   which means one second. So if we write, let's say,  3000, it means 3000 milliseconds, which is three   seconds. Okay? Now come over here. Let's say that  I want to cut this and place it inside this set   timeout function. How will you do it? We'll cut  it like this Ctrl x. And that insight over here,   this curly braces, we're going to place it over  here, okay. Ctrl V. And now let's change it to   four seconds. By the way, it said timeout is a  asynchronous function, okay. You got this from   here, Ctrl x, and you paste it over here. Ctrl  V, like this Ctrl S to save it. And then we're   going to press this run function. But before that,  do you remember what I told you? JavaScript runs   from the top to the bottom how from the top to  the bottom. And let's see how this works. Okay,   run it like this. And let's see the result.  Now you can see that we have got, I eat with   a spoon. And then after how many seconds after  four seconds, we got the ice cream over here.   Now how does this system work? This is an  asynchronous system. Okay, asynchronous system.   Look, the cereal is over here. Okay, I eat ice  cream with a spoon. The sale is over here as well,   you can see that I eat ice cream with it spoon.  The system is actually working like this Look,   I eat and then this ice cream over here it  has a set time of function, which means that   we're going to have another hand over here  is going to take this function at the side,   which is our second lane. Okay, this  is our main lane. I mean main road,   this is the secondary road, it is taking that  asynchronous call at this hand. And after four   seconds is going to release it on our main lane  like this. Until then what will happen Look, I   eat ice cream is an asynchronous call, which  means that is going to take it over here,   after four seconds is going to get released, then  with a spoon after four seconds is going to come   over here. So this is how the asynchronous  system works. I hope you understood it.   Now we're going to start our discussion with  callbacks. But before that, if you're new to   the channel, feel free to subscribe because I  post videos based on practical work projects   so that you can level up your coding skills. If  that sounds interesting, hit the subscribe button   and join my gang under the further ado, let's  get started. Let's talk about callbacks. What are   they? In simple terms, very simple terms. calling  a function inside another function is called a   callback. In even more simple terms, what it does  is it forms a connection between what functions.   Let's look at one example with callbacks. And  then we're going to start our ice cream business.   Again, back to code pen. you delete  everything okay? Ctrl A, then delete. Okay,   you clear the console over here as well. Ctrl  S. Okay. So what did they tell you before   callbacks means calling a function inside another  function. So we'll create two functions to form   the relationship. What relationship Okay, function  one, function two, like this. function, one, okay.   We're going to use a regular function. Nothing  complicated. No politics here. Okay. Function   two. Okay, now inside function one, what we're  going to write is console dot log, okay, console   dot log. Over here, we're going to write function  one, or let's write step one. Okay, step one,   of sorry, like this step one. In fact, we're here  we're going to write console dot log, step two, like this, in order to run this  function, what do we do we write   the name of the function at the bottom like this  look. We call it like this one, then brackets over   here. Control As you run this button over  here, after you clear the console, okay,   run it like this. And we're going to see step one  on the console. Let's wait, there we go. This is   step one. Okay? And how do we call the function  two in the same process, we write it over here.   I mean, we call it over here like this, okay? Ctrl  F. Don't forget to clear the console over here,   create like this, and then you paste this run  button. Now you can see that we have step one,   step two, that's because we have an order, right?  JavaScript runs from the top to the bottom.   Look which one is first one is first,  and then to what if we reverse the order   before I do first and then one like this Ctrl x  Ctrl V like this. So first is two and then one.   So what will happen to will run first  and then one, clear the console. Save it,   run it, you can see that we have step two first.  And then step one, these are regular functions.   Now let's form a relationship between these  two using a callback what a callback. Okay?   Let's remove this. Okay. Now we're going  to make a connection of function to   inside function one. So how do we do it, we do  it easy a argument, we're gonna write over here   called to see a double L, hyphen, okay? This  is nothing, this is just an argument, okay?   Nothing else. And over here, we're going to write  step one complete. Okay? This is nothing special,   this is just gonna get printed on our console.  Okay? Please call step two, like this. Okay. Oh,   like this. Now, in order to provoke function to  what we do is, we take this argument over here, called to, and then, as number two function is  a function, what we're going to write   is we're going to give brackets over here  like this. And now it's going to call it   every time. Once our console dot log is  printed like this, look, we don't have   to call to anymore, we just call one, one.  And then inside over here, we're gonna pass   function number two, which one function number  two, okay, to like this, look, how do they form   a relationship between these two? If you clear the  console, save it, run it, let's see the result.   Look what is happening, step one, complete, please  call step two. And then we have the step two.   If you remember, JavaScript runs from the top  to the bottom, right. So our console dot log is   at the first and then call to, but if you  reverse the order, what will happen? Let's see.   Ctrl x, okay. Call it over here, Control V,  Control S. Okay, and now clear the console,   run it and let's see what happens. Now you can see  that step two is first and then step one complete   place called step two. Don't worry about this.  If you don't understand it, we're going to look   at another example right now. For that we're  gonna start our ice cream business right now.   For that we need to know the relationship  between our customers and us. You can see   that this is the flow Okay, first we get the  order from the customers, then we're going to   fish the ingredients. Then we're going to start  the production and then we're going to serve   ice cream. Okay, so we're going to create two  functions, how many functions two functions, order   function, production function, okay? If we don't  get the order, we cannot start the production.   This is how we're forming a connection between  these two functions using what Tell me using   a callback. Come on. Let's go to corporate and  see the example. Come over to copan over here,   you delete everything. Okay, we're going to use  arrow function what function arrow function,   right lead, first is order because without the  order, the production doesn't start okay. Order   equal to brackets, then arrow  sign curly braces like this. Okay,   now write the production function, but before  that clear this console, okay? Let production   duction here we're going to make the ice  cream. Okay. So once we get the order, we're   going to start the production of ice cream, okay.  Production equal to brackets, arrow sign curly   braces like this. Okay? Now in order to form that  connection, that every time we get the order, the   production will start. We do it like this. Okay,  you come over here. Okay, you pass an argument.   We're going to name it call production,  okay. Call underscore, pro dot tion, okay.   And inside these curly braces, we're going to  write the same thing. Okay, the exact same name   Ctrl C Ctrl, V over here and then brackets  Okay, brackets like this. And look at there.   We have formed a relationship between these two  functions is it what a callback now let's test   it. Now we're going to write console dot  log, console dot log, okay? order placed,   please call production like  this, okay. And inside over here,   we're going to write console dot log console  dot log order received. Starting broad duction.   Like this, okay. Now in order to run our  function, what we'll do is, we're gonna   write order over here or there, and inside that  order, we're going to write the production.   We're going to pass this function over  here inside here, okay, bro. duction,   like this. Okay, so Ctrl F, clear the console,  save it, run it. Let's see what happens.   Now, you can see that we have order placed, please  call production. And then we got order received,   start production. I hope you understand how the  system works, or forming relationship between   functions using a callback. Now let's understand  one more thing, the relationship between the   front end and the back end. The front end is  our kitchen where we will make the ice cream   and the back end is where we'll store ingredients  like fruits, liquid stuffs, missionaries,   raw materials, chocolate, etc. You know what raw  materials means, right? The stocks, our stocks,   the stocks is a back end kitchen is the front end,  okay? So we're going to store our stocks inside a   variable, okay, so come over to code pen over here  at the very top, okay. Keep some space over here.   And we're going to write let Okay, net stocks.  So this variable will hold all of our stocks,   like fruits, liquids, holders, toppings like  chocolate, peanuts, etc. Okay, and that's equal   to we're going to create a object over here  like this object, okay? And inside the object,   we're going to write arrays like this look,  f are you IDs Okay, then colon over here,   we're going to store all our foods  inside what an array Okay, like this.   Then we're going to write the name of our  fruits. As I have defined them over here,   I'm going to copy it over here. Okay. Ctrl C, and  then Ctrl V over here. Now pause the video, take a   moment to write these foods. Okay. Now how do we  access a single stock from this variable? Okay,   we comment everything from here from top to bottom  like this, comment this like this. And in order to   select one stock, we'll do it like this. First  of all, we write the name of the variable What   is the name of the variable stocks Okay, sto ck s  then dot y dot because it is an object in order to   access the object we need to form a dot and then  the name of the object is which is fruits, okay,   capital letter F r u IDs. And then what is this,  this is an array. So how does the array works is   it is arranged in the order of 012 and three,  okay? So you know, x is that you right,   square bracket, okay, and then if we want to  access the banana, let's look at the order 012,   we write two over here. Okay, and now let's print  on the console. In order to do that you write   console, dot log, then bracket at the end bracket,  close it, Ctrl S, clear it, and then run it.   Look, we got the banana. In the same way we have  more stocks, we have the holders, the cups, cone   sticks, and the toppings as chocolate sprinkles.  So this is the variable that I have created. Okay,   I'm going to copy it from here Ctrl C. And  then over here, I'm going to paste it Ctrl V.   Now pause the video, take a moment and  write this talk on your code editor.   So once that's done, you clear this from  here. Okay, clear the console and you bring   all of this back, okay, like this. There we go.  Okay, now we're going to clean our console from   here remove this and we're going to remove this  Okay, and keep everything else and then you come   in this form here, okay? Now Now the first thing  is the order right customer places the order   the order is changeable, which means how many  options do we have? Look at our menu, we have the   strawberry, grapes, banana, and Apple which means  that the customer can pick anything he wishes,   which means that for this we need a variable.  So over here we're going to write fruit, name   f Are you it? Okay, underscore and me  like this 10th place Come over here.   So we have two arguments, the fruit name and the  call production, the Customer Picks the fruit,   it gets over here. And then we get to  know that what the customer picked.   And then we're going to start the production.  This is how we're forming a relationship between   our functions. Okay. And over here, you uncomment  this, and we need to keep it blank for now. Okay,   you give double quotes over here, then comma,  okay, it's Ctrl S, if you remember, this is   our steps along with a time. So in order to ensure  the time function, we're going to use set timeout.   And we're going to print the steps on our console.  Okay, so follow along with me. First of all,   we're going to place the order by picking a fruit  name, Okay, come back to VS code over here. And,   and in order to select the fruit and place the  order, it takes two seconds, how many seconds,   two seconds. So come back to VS code over here  and inside this order function. Okay, come   here and write console or before granting  console dot log, you have to use a set   timeout function because it takes how many  seconds, two seconds, set timeout like this.   And inside over here, we're going to use an arrow  function. You can also use an anonymous function   like this look, function bracket curly braces  like this, but we're going to keep it simple.   We remove this, remove this function from here,  and you're going to give that arrow sign like   this, okay? And at the end, we're going to place  the time function, okay, how many seconds, two   seconds. So we're gonna write 2000 milliseconds,  okay. 2123, like this. And inside over here,   we're going to write console dot log, because  we're going to, because we're going to print the   result on our console. Okay, and use a backtick.  We're not going to use double quote, no, no,   we're not using double quotes, we're going to use  a backtick. What backtick if you want to access   the backtick, look at my keyboard over here. This  is the exit key. And this is the key to write   backticks. Okay, so you click this just once, and  it is going to print us two backticks like this.   Now, we're going to pause this fruit name inside  this console dot log. So how do we do this? First   of all, we're going to write $1 sign, okay, what  $1 sign, dollar sign and then curly braces like   this. And then we're going to place this inside  here, but before that, we need to write something.   We need to write the stocks. Okay? There's because  we're picking it for stocks, right? So stocks,   then the name of our fruits, okay,  so dot F r q IDs, and then what?   square brackets right square brackets over  here, and then we're going to pass this   inside there, okay? Ctrl C, Ctrl, C, and  then write Control V over here. Okay,   now we're going to save it. Let me show you  how the system works. Okay, so over here,   we're going to write zero Ctrl F to the console,  run it, let's see, what do we get on the result?   We got strawberry, you can see that the first  fruit on our stock is a strawberry right? I   explained this to you right, if you can recall how  to access the stocks, we do it like this stocks   dot F r u it s then square brackets and then the  name of our food, I mean the order of I mean the   order of the food 0123 right. So I have placed  this inside over here. And then inside the array,   I have placed this and over here I have placed  zero which means that this zero is coming over   here, which eventually means that we are going to  get the strawberry, I hope you understood this.   Nothing complicated. Okay, stocks dot fruits,  then this and over here you write was selected   like this, then Ctrl F, clear the console, run it.  Let's see what we get. Strawberry was selected,   you can see that you're gonna notice that we got  the result after two seconds. Why is that? That's   because we are using a set timeout function  over here, which takes two seconds. I mean   it I mean it prints a result after two seconds.  Okay, let's start writing inside our production   function. Okay, so come over here, we're going  to use another set timeout function which   runs in zero seconds. How do you do it? We do it  like this right set timeout, bracket and plus a   function over here like this arrow function, okay.  And that is going to run in zero seconds, how many   seconds? zero seconds. So right 0000. Instead,  over here, we're going to write console dot log. And write production has started. And that is  because we got the order right production have   started Ctrl S to clear the console. Let's run  it. So we're going to get the result after two   seconds, one, two. There we go, we have the  production has started and then strawberry was   selected. Now we are seeing a or behavior over  here. Why is that we were supposed to get this   one first and the production has started at the  last. That's because if you focus over here,   you can see that look at the order, okay,  JavaScript runs from the top to the bottom. Okay,   so it is saying that this is a set timeout  function, which means that it's going to take   two seconds and this one, this is going to take  how many seconds, zero seconds, Okay, this one   will be stopped, this is over here. And this coal  production will start immediately. So this is   the coal production, which is production has  started over here, and strawberry was selected,   this is over here. That's why we're getting  this order. But if you want to fix that,   what you have to do is you're going to cut it  from here Ctrl x, and you're going to place   it where inside that set timeout function.  Okay, like this look Ctrl V over here, okay.   Now what will happen is, it's not going to start  the production unless the fruit was selected.   Now let's save it, clear the console  and run it and let's see what happens.   One, two. So you can see that after two seconds,  strawberry was selected, and immediately we got   the result production has started there is because  we have said two seconds for which one strawberry   was selected and zero seconds for which one  production has started like this. I hope you   understood so far. Now let's look at our second  step, which is we're going to cut the fruit and   it will take two seconds. So come inside the  production function, we are done with our order   function, okay, you can minimize it like this. We  don't need it anymore. And don't make that mistake   again. Otherwise, you're going to get the reverse  order, which we watch previously, which is we got   the production first and the strawberry at the  last. Don't write it outside, okay. Don't write   it over here. You're going to write it inside this  set timeout function. Okay. So you come over here,   and we're going to write another set timeout.  Okay, it's gonna be two seconds, how many   two seconds, set timeout, okay, brackets, and then  pass a arrow function like this. Okay, arrow sign,   curly braces, and then the time function, okay,  how many seconds, two seconds. 2123, like this.   And inside over here, we're going to write the  food has been chopped console, the log. Das fruit   has been shot Ctrl F, the let's clear the console.  Save it. Let's run it and see what happens. One,   two. Again, one, two. So we're getting the  strawberry after two seconds. We have got   the production immediately. And then we have got  the fruit has been shoved after another additional   two seconds. Now our system is running perfectly  fine. Now let's follow the steps and complete our   ice cream production so that we can buy ourselves  a Lambo because why not? Now the third step is   to add water and it takes one second how many one  seconds. So inside the production function, where   will we write, we're going to write it inside  this set timeout function. So this is the parent   children, it will be the grandchildren.  Okay, so the food has been chopped over here.   Enter to give some spacings and you're gonna  write set timeout like this, okay, brackets,   then pause the arrow function like this equal to  Okay, clearly basis. Don't worry, I know where   we're going. We're going to a callback hell,  his collar callback hell, and I'm coming to   the point don't wait, don't, don't panic, okay.  And over here, you write the time function, okay?   1000 seconds over here like this. Okay, and  inside over here, console dot log like this.   Okay, inside over here, we're not going to write  double quotes, we're going to write backticks.   That's because we have to add water and ice and  the water and ice inside our stocks over here,   which is the liquid and then water ice zero and  one in order to pick them. Pay close attention   to what I write over here. Okay? Don't focus on  anything else. 123 This is the third step. Okay,   inside over here. backticks What backticks like  this dollar sign, and then curly braces, okay,   curly braces like this, any right end over here,  okay, and then curly braces, again like this.   Along with the dollar sign. Okay, you're  going to, you're going to write was added. So, if you translate, it sounds like this dash  and dash was added. So we're going to write   So we're going to pick the water and ice. So first  of all, you're going to write stocks. Okay? stocks   dot liquid, okay? As because it is the  name of that object, liquid and then   square brackets like this. Over here  you're going to write zero. Okay,   that's because it will select the water. The  first thing is the water and then we have the ice   in order to pick that ice over here, okay,  we're going to write stocks, dot liquid.   Okay, then square brackets, we're gonna write one  and it will pick the ice like this, okay? Ctrl F.   And then we have also set it to one second.  Okay, so we're going to get it after one second,   clear the console. Save it right, let's count one,  two, again, 121. Now we can see that we got this   after two seconds, we got this immediately, we got  it after two seconds, and an additional one second   later, we got water and ice was added, which  means that our function is running properly.   Now we're gonna start the machine, it will take  one second, okay? Inside this, okay, stocks,   dot liquid, I mean, where we have selected  the water and ice, okay, so inside over here,   we're going to write set timeout. Okay, good.  Then the arrow function over here, curly braces.   And over here we're going to write what the  time function okay? 1000 seconds like this.   And inside here, we're going to write console dot  log. And then we're going to write the machine   was started. Let's write the machine  has been started. Made the machine has   been, let's write the machine was started.  Okay, Ctrl S, let's complete all of our   steps and then run it together. Okay. The next  step is we need to select the container. Okay.   Now, if we come over to the stocks,  you can see that on the holder object,   we have a lot of options. We have the cone,  the cup and the stick. Let's pick the cup.   No, I changed my mind. Let's pick the cone. Okay.  In order to do that, you can go here, okay, where   the machine was started, okay. And at the bottom  over here, we're going to write the set timeout.   So the cup takes two seconds, okay. So you're  going to write set, timeout like this, okay?   Give some space. Otherwise, you're going to  get confused by yourself. Okay, set timeout,   and then brackets. Then over here, you're  going to give that arrow sign, I mean,   the arrow function and then you're going to set it  up. Sorry, the time over here. Okay, two seconds.   And then you said over here, I'm going to  write console dot log, we have pick which   one? The code right, let's see that where is the  code? holder? Okay. Stocks dot holder dot zero.   Okay, let's write it over here. Okay, don't get  confused. It is over here below the machine. Okay,   we're going to give what backticks that's  because we're trying to get something   outside the function. Okay, so dollar sign  curly braces, stocks strc Ks stocks dot which   one was that holder? It's your LD. That's  because this is the holder over here. Okay.   Stocks dot holder and then zero. Let's come  back over here. Then we're going to give   square brackets like this and then we're going  to write zero over here and then we're done.   What's the next step? The next step is we're  going to select the topping ah my favorite   I love chocolates whatever you comment down  below Do you like waffles chocolates or peanuts?   Okay then um where was I? Oh yes, we're going to  select what chocolates okay as the toppings look   stocks dot toppings we have that so don't forget  that Okay, and then we're going to pick the zero   You can also pick peanuts also as well. In order  to pick that peanut you're going to write one okay   stocks dot toppings dot one okay. Over here okay.  This is the holder Oh, I forgot to write okay.   Which means that the cup was I mean  the cone was selected. Again selected.   Or you can also write ice cream was placed on the  cone. Okay, come over here and write ice cream was placed on what the ice cream was placed on  this one which means on the cold ice cream was   placed on go. Alright, so inside over here,  give some spacings and we're going to pick   what the topping it takes three seconds because  we need some time to make The chocolate right?   So we're here right? set timeout, okay, exact  date and arrow function like this and then it's   going to take three or sorry, three seconds. Okay.  So what are we going to do? We're going to pick   toppings. So console, log like this  and backticks Okay, don't forget that   backticks like this. dollar sign, curly braces  and what we're going to write stocks, stocks dot   toppings, we have the S at the last toppings and  then this square brackets, then write 01 through   s. And what's the last step? We're going to serve  the ice cream okay. So in order to serve the ice   cream come over here, okay, where we have written  this Oh, this is just plain chocolate. I forgot   to write more text okay. So stocks dot toppings,  which is a chocolate was added okay? As toppings   like this, okay. And over here, give some spacing,  right, another set timeout function. Okay,   set timeout. And over here. We're going  to place an arrow function like this.   And then we're going to set the time which takes  how many seconds to serve two seconds, okay. 2123   console dot log. Then double  quotes. Serve. Ice cream   Ctrl S, okay, now clear the console over here.  Now run the code. Let's see what happens. Okay,   strawberry was selected production has started  fruit has been chopped water and ice added the   machine was started, ice cream was placed on cone  chocolate was added as toppings. Then we're gonna   serve the ice cream. Then we're going to take the  money and buy ourselves a Lambo. Yay, party. Okay,   now we have completed our process, the callbacks.  But look at look at this, what have we created?   Let me expand this and let me show you what  we have created. It is called a callback hell. Look at here Look. Look at this format of how it  is going. Okay, look, look look look like this.   And then it is indeed like this. This is called a  callback hell, what is it called? callback hell.   Let me show you the format. The callback hell  looks something like this. Look at this format   over here. And look at our code over here.  It looks similar. It looks like this. Look,   it looks like a Christmas tree. You can also call  it the Christmas tree of hell. Because why not?   I know I know. I know that callbacks  are very confusing. And it is a hell.   So what's the solution of callbacks, we have  promises and promises looks like this. Look.   This is the promises It looks very clean. Very  neat. So let's compare again, this is our callback   hell. And this is our promises. Look how clean it  looks. The thing works like this callbacks make   relationships, parent children, grandchildren,  grand grandchildren, grand grand grandchildren,   grand grand grand grandchildren, it was  relationship like this. So what what what   promises do is it takes instructions like this,  first do this, then this, then this, then this,   then then then then then it works like this. Which  means that you can keep your code very neat and   clean. So far, so good. Let's start discussing  our promises. In order to understand the promise,   first of all, you need to understand the promise  cycle. So this is the diagram I made about   the promise cycle. First of all, a promise is  made, what promise do we make to our customers,   sir, we promise that we're gonna serve you  ice cream, what ice cream, we promise we're   going to serve you ice cream. So there are two  parts of this promise, either a truly fulfilled   or it will get rejected. Okay, so here, first of  all, it comes to this stage, the pending stage,   every customer when they come into our shop, we  promise we're gonna serve you ice cream. So our   customer interests, our shop sits on the table  looks at the menu, and he or she didn't order   anything. He's there sitting over there. This  stage is called the painting stage. He didn't   order anything just sitting over there. So this  is the pending stage, nothing is happening.   We then take the order, we didn't start the  production. Okay. And now let's say that   the customer has placed an order he wants mango  ice cream. If we have the mango on our stock,   then we can go to the next stage, which is we can  resolve the promise, which means that we can serve   ice cream to our customer. But if we don't have  the mango, then what will happen is we have to   reject him by saying Sir, we don't have mango at  our stocks. We're very sorry. So let's say that   we have mango on our stocks, what will happen  is, is going to get resolved, first of all,   and then after that, what will happen is we have  seven steps to make ice cream, right? Yes or No,   we have seven steps to make ice cream, and it  will follow like this, first of all do this,   then this, then this, then this, like this  intro, there are seven dents or six dents,   depending on the circumstances, depending on the  situation, don't worry, we're gonna write code   and see how this thing works. Once that's  done, we can serve ice cream to our customers.   But let's say that we didn't  have mango, what will happen is,   we have to pass through this reject stage. And  then over here on this catch, we're gonna write a   sorry, note, we're gonna say, sir, we're  very sorry, we don't have this on our stock.   We sincerely apologize for the inconvenience.  And once either we get resolved,   either our promise gets resolved or rejected, this  finally will always run, let's say that we serve   zero customers. At the end of the day, we have to  close our shutters. I mean, we have to close our   shop. But let's say that at the end of the  day, we serve 100 customers, 100 customers,   we still have to close our shop, right? Because  the employees has to leave, we have to leave.   This is the finally handler, don't worry,  we're going to discuss all of them in details.   Once you have understood this promise cycle, we  need to understand for more things, don't worry,   this is very short. First of all, we need to  understand the relationship between two things,   time and work, what time and work. Because  we have this list over here, you can see   that first of all, we have the work and then  the time. That's why those two relationships.   The next thing is the promise chaining. What  promise chaining is, if you come over here,   you can see that we are doing all the steps  through then then then then this is the   promise chaining. Okay, so first of all, we get  resolved, okay, and then it comes over here,   then we return it First of all, resolve, then  return, return, return return like that, don't   worry, we're gonna write code and explain, and I'm  gonna explain that to you. All right. So this is   a promise chaining, the error handling part is  this one. Look, this catch handler is the error   handling part when we have a reject. All right,  and the final handler I told you earlier, right,   this is the final handler handler is gonna  run whether we serve zero or 100 customers,   I mean, whether our promise gets resolved or  rejected, or I then come to your code editor   over here, delete everything except your stocks.  Variable over here, and you clear the console over   here. Okay. Now, the first thing is the absolute  first thing is we're going to create a variable   named is shop open, follow me. Let is underscore  shop underscore open, okay, equal to true.   So what this is holding is, we're asking  the question is our shop open or closed? If   it is true, we are serving ice cream. If it is  closed, we're sorry, sir, we are closed. Okay.   Now we're going to create a function, an arrow  function with the name order like this, let   order equal to brackets over here, then equal to  arrow function. Now what we're going to do is,   remember the relationship between time and  work that I told you earlier, we're going   to write time and work over here, okay, time  over here, and work over here. You can also   shift the positions you can write work first and  then time, it totally depends on you. And the next   thing is we're going to make a promise. First, we  made the order then we made the promise sir, we're   going to serve you a stream like this. Follow  me. First of all, you're going to write return,   okay, new, then capital letter P, what capital  letter p, p, r o m i s e promise like this look,   then brackets, you a little bit of space so that  you can understand what we are writing. Okay,   over here, we're going to give brackets over here  again, we're going to create a arrow function   look like this, okay? Like this. We've made  a arrow function over here. Now, press Enter. Now, inside this bracket, we're gonna  pass two arguments resolve reject,   which means that we have how many stage  three stages, pending resolve, reject,   we're gonna write resolve, reject, we don't  need the pending. Okay? Now, right resolve,   like this resolve like this. And over here, you're  gonna write, reject, reject like this. Okay, so we   made a promise. Now it's time to run that promise.  Okay, now we have two stages, resolve and reject.   Let's write an if else statement. So right. If  is shop open, which means If a shop is open,   then we're gonna resolve it like this resolve,  which means that we're gonna serve ice cream   that our shop is open. Welcome, sir, we're gonna  serve you ice cream, how are we gonna serve our   ice cream, we're going to write this work. You  see this work over here, we're gonna write this   work over here, like this. Look, we pass the work  over here, which means that when the shop is open,   when our customer came, we're gonna say sir,  we promise that we're gonna serve ice cream.   As long as we have all the stocks and the raw  materials, then we're going to start working.   Alright, now if our shop is closed, then what will  happen we're going to write an L statement over   here, okay, curly braces. And over here, we're  going to write one reject, reject like this. And   you close it like this, I mean, the brackets  and over here, you write console of sorry,   console dot log, like this, okay. And over  here, we're going to write our, sorry, our   shop is closed, okay? Like this. So far, so good.  Now, you can see that we have formed relationship   between with just work Look, this work is over  here. But we also need to form relationship   between time also along with work. So what will  we use, we're going to use a set timeout function,   so that we can form the relationship between our  time and work. Follow along with me, okay, so   below this if statement, right, set timeout,  okay. And then brackets over here form a   arrow function like this look, okay, arrow  function like this. And then what you're   going to do is you're going to put a comma  over here, comma, we're going to pause this   time function, I mean, the time word over here,  which means that every time we need to write   the order function, we're going to place  the time and the work. Don't worry, we're   gonna write it. And then what you're gonna do is  you're going to cut this result from here, Ctrl x,   okay? And then you're going to paste it inside  this arrow function. Now what will happen is,   is going to form a seal after 1234567 we have got  seven steps. Now save this code. Let's test it.   Okay, so what is the name of our function? It's  order, okay? So come on at the very bottom over   here, right order. Okay, now brackets. Now look  at the first thing, what is it? First thing is   the time and then the work. So how you are going  to define this follow along with me. The first   thing is time. Okay, so let's look at the chart.  So this is our chart, which carries all the steps.   First thing is we need to place the order Okay,  it's gonna take two seconds, in order to write   that first of all, we're going to give the time  Okay, you're gonna write two seconds, like this to   123 2000 milliseconds and then a comma, comma like  this. And now we're going to create a small arrow   function, look at this. Okay? And then the arrow  sign. If you write the statement in a single line,   you don't have to put these curly braces, you can  just use directly like this console dot log. Okay,   first of all, we're going to select the fruit  in order to select the foot. What do you need?   backticks? What backticks like this, okay,  then dollar sign curly braces like this. So   what's the name of our stocks? There's one  Okay, stocks dot fruit. Let me check fruits,   yes, stocks, dot fruits like this. And then  we're going to pick the strawberry, okay, zero. This has square brackets and then zero like  this. Now let's test it Ctrl S and then   the console, save it and run it like this. After  two seconds, we're going to get the result One,   two. There we go. We have struggled over here.  Now let's complete this by saying that strawberry   was selected, okay. Ctrl S, let the  console run it. One, two. There we go.   We have our strawberry was selected. I hope you  understood the relationship between the time   and work function. This was pretty simple. Now  let's start discussing about the promise chaining   which is this one over here. That then then then  then part first you have to do this, then this   then this, etc. Let's come back to the VS code  over here and at the very bottom, if we want to   work with the promise chaining you cannot have  anything between the first call of the order   and then your then handler  like this. If you want to   do promise chaining you have to do  this dot then Okay, then dot then   dot, then so on and so forth of me a spelling  mistake My bad, then you cannot have this   semicolon over here, okay, so just remove the  semicolon from there. Okay, now it's going to work   perfectly fine, you can have 100 lines of spaces  like this. And it's still going to work like this.   But for this tutorial, I'm going to have just two  spaces so that it can look very good and tidy.   Okay? So, like this, look at that. It looks  quite good. And now in order to write, I mean,   in order to given instructions said that then,  let's look at our chart. So this is the chart,   which carries the steps. What is the  next step, we need to cut the fruit,   and it's going to take two seconds. Okay,  now come back to code pen and over here,   before cutting the fruit. Let's give a call  to start the production. How do we do this,   first of all, write an arrow function like this  looked, okay, arrow sign, you can also write it   in a single line, but I'm gonna give curly braces  over here, and then you're gonna return it,   you have to return it otherwise it's not  gonna work. The first part is resolve, then   return, return, return, return, return, so on  and so forth. If you don't write the return over   there, then it's not gonna work. Okay, follow  along with me, right return over here. Okay?   Then order. What was that order the name of our  function, okay, like this look, and then you're   going to place what time first, in order to start  the production, it takes zero second 0000, comma,   and then you're going to write a function  over here, okay? arrow function like this.   Console dot log, like this. And then we're  going to write over here, production has started   production has, sorry, started. Okay, save it, and  then we're gonna clear the console. Let's run it.   So we're going to get this one after two seconds.  And this one immediately One, two. There is our   strawberry was selected and production has started  it will took two seconds, and this one took just   zero seconds. Okay, now let's write the next  step. What was the next step we need to chop   the foot? It takes two seconds, I'm in cut the  foot. Okay, let's follow the same process. Okay,   over here, you're going to write an arrow  function like this equal to then this arrow   sign curly braces right over here. What return  what was it return? Return like this. Okay, order.   We're going to write 2000 over here, which  means two seconds. Okay, it goes to like   this then console dot log. What was it? We're  gonna cut the fruit okay? The fruit was chop   sorry Ctrl S Okay. There we go. Following  this chart, let's complete our process. Okay,   next is we have to add water and  ice let's go and do it. So over here   we're going to follow the same process.  Let's actually copy this code from here Okay, no let's not copy the code Okay, let's just  do it manually so that you can learn it   okay follow along with me arrow function  over here okay. We there we turn   order is going to take how many seconds one  second okay 1123 Okay. Then this sign which is   the error function given curly braces over here  okay. And inside of a hearing right console   dot log. What was it backticks Okay, then dollar  sign curly braces that is because we need to   select what our liquid which is water and ice  okay stocks dot liquid come at the very bottom   over here right stocks dot liquid like this  and then zero in order to select what the water   okay and over here right and again you  write dollar sign curly basis stocks   dot liquid. And then what was it one? Okay. So  water and ice was selected like this. There we go.   And remember this this is very crucial. You  cannot have semicolons between dens okay? Remove   this semicolon from here I mistakenly wrote it  okay. space and over here we're going to write   then. brackets, arrow sign like this. curly  braces. What's the next step? Let's see. We start   the machine in one second. Okay. So right read  terror, sorry, return border square bracket. Then   first of all need to write That time,  okay, one seconds, like this arrow sign,   like this. Console dot log.  Start the machine, like this.   Next step is we need to select the  container, we're gonna select the cone,   okay? In order to do that, come here,  then. Okay, then arrow function like this   return order. It takes how many seconds? Two  seconds to select a comb. Okay. Sorry, my bag of   then the arrow function over here. curly  braces inside you're gonna write console.   log. What was it? backticks Okay, then dollar  sign curly braces over here the right stocks   dot which was it? Let's see. Top n a holder holder  and then zero because the cone is over here. Okay.   At the very bottom, holder issue LD  are like this. square bracket, zero.   Okay, then you're going to write was ice cream was  placed on this holder. Okay, so ice cream placed   on it translates to ice cream  placed on comb. Okay, next step is   select toppings. We're going to pick chocolate dot  then Okay, then this side, I mean arrow function,   return. Return order. Three seconds because  chocolate takes time to melt right? So equal to   arrow function, then console dot log. Then  inside over here backticks. Okay, when   backticks Okay, don't forget. dollar sign,  curly braces. And we're here you write stocks   dot toppings, d o p i n g s, don't forget the last  s droppings and then square brackets over here   we're gonna write zero. Chocolate was selected  like this. So we're almost done. Then we're   going to serve the ice cream serve ice cream  we're going to write dot 10. Okay, like this.   Return order, right how many seconds is gonna  take is gonna take two seconds Okay, equal to   three races. We don't need curly braces Actually,  we can write it directly ok 123 like this. Like   this equal to this sign the arrow function and  then console dot log. Okay, double quotes icecream was served Ctrl S There we go. completed our  process now let's run our code before that   clear this console. Run it let's go strawberry  your selected production has started the food   was chopped water and ice added start the machine  ice cream place and co then where is the chocolate   there is our chocolate chocolate was selected  ice cream was served. He was the money and let   us buys the Lambo Yay. Now is now it's time  to understand the error handling part, okay,   which is this one over here the catch handler  in order to understand the catch handler,   comment a variable bottom over here, okay,  and he right? Or don't forget to remove   this technical form here. Otherwise, it's not  going to work, right dot catch like this, okay,   like this, then write an arrow  function like this, okay,   equal to curly braces like this. And over  here, right console, the log customer left   like this Ctrl S and then cleared  the console. Now this catch will   only work when our promise is rejected. I mean,  when we cannot serve ice cream to our customers,   then this sketch, then this sketch will work.  Let me show you. Okay, if you can read if you   can remember this variable at the very top over  here below the stock, which is his shop open.   It is true, let's convert it to false and let's  see what will happen theoretically theoretically,   then we're going to run this code Okay. Let's  see. We have this if statement over here.   It will run when the variable is true,  but it is false which means our shop is   closed it look at here else reject our  shop is closed. So false and then this this code will be run first and then  at the very bottom we have the sketch,   then this line of code will run and these things  will not run this All then then then it will not   run. Let's do a test run it and let's see  what happens okay so our shop is closed   the first thing we're going to get is our  shop is closed look at this message over   here inside this reject statement look our shop  is closed and then on the way bottom look at this   is catch handler customer left We're very sorry  this left the left us look the customer left.   We're not going to make the money we can't  buy the Lambo We're very sorry. Alright then   I hope you understood this catch I mean the  error handling part with the catch handler   let's now understand this finally handler I told  you earlier that is this will run whether our   promises resolved or rejected it will run anyways.  Okay, now let's look at this example. But first,   remove this semicolon otherwise it's not gonna  work okay then dot finally like this. And inside   over here we're going to write what Tell me  arrow function take like this equal to this sign   curly braces like this. We're gonna write console  dot log like this and inside over here we're gonna   write our shop is closed. Now let's write day  ended shop is closed Okay, dead end dead shop   is closed like this Okay, let's say we remember  what state is it in our shop is closed which is   false. Okay, let's run it in this way. You can  also run it in through let's look at our shop is   closed This message is coming from this rejects  statement over here customer left is coming from   this statement over here this catch handler okay  and this day ended shop is closed it's coming   from this finally handler let's set it to true  and let's see what will actually happen without   finally handle okay Ctrl S run it to  the console and let's see what happens   okay we got this statement then this then water  nice edit then this is completion code then my   favorite part is the chocolate Yay. And then ice  cream was served day ended shop is close look   at this look look at the various day ended  shop is closed is coming from this finally   handler so what did you understand? It will  run whether our promises resolved or rejected.   And with that we finished our discussion with  promises everyone please welcome async await Yay.   So this is actually proclaim to be a better way to  write promises. Let's go and dissect async await   but first you take a break because it really  deserves a break in order to understand the async   await first of all learn to know the difference  between the promises and async await let's look   at an example. Come back to VS code I mean code  pen delete everything except our this part okay?   Keep the shop and stocks okay now in the promises  part How did we make a promise like this look?   function Let's name it order okay order like this.  Okay, no, we actually didn't write it like this My   bad we wrote it in the airway function I mean the  arrow function to let order equal to this equal to   arrow sign curly braces like this and in order to  make the promise we wrote what return new promise   return new my brand new capital letter P r o m  i s he promises like this and then inside these   brackets we wrote another arrow function like  this okay and inside here we wrote resolve reject   like this Okay. And then he said over here what we  wrote if statement Okay, then this one and inside   over here. What did we rewrite? What did we write?  We wrote the result like this, okay. Look at this   and over the else statement. What did we write?  Okay, they wrote the reject over here. Oh, my bad.   JACK like this. Okay. We wrote it like this.  This was the promise. What how do we write the   async await? Look at this blog look, right first  of all the async keyword what the async keyword is sink. Okay, you write the function order.  Okay, this and then the curly braces. And there   we go. We made ourselves a promise. How simple  is that? But wait, the story doesn't end here.   We need to understand two more things, the try  catch handler and how to use the await keyword.   So this is the async keyword, we need to  understand the await keyword. Let's dive   in. Now let's come back to our code pen and  understand the difference between the promise   And our async await only then we're gonna  understand the try catch. Okay? Come over here and   see this if an else statement, what did we write?  How did we make the promise we made this promise   like this first of all, we load the function over  here, and then return new promise, then resolve   reject. And then we wrote The if statement, which  is if this is true, we wrote this tr, e true,   okay? Then it's going to resolve it. If it is not  true, then it is going to reject it like this.   This is how we make the promise. And then what  did we do? Okay, we comment this is like this.   Let me actually finish with the promise part. Then  we're going to come to the async JavaScript part.   I'm an async await part. This is the order right?  How did we write it? order? Okay, order. This is   our first start. And then what did you write?  dot then? Okay, dot, then dot, then. Oh, sorry,   my bad. And then what did you write? And then we  wrote dot catch, catch. TC CIT, C of I forgot my   bad ca tch catch handler and then the dot finally  handler, okay, so this will work when, what,   if our promise was resolved, this will work  when it is rejected, this will work anyways,   is still going to work even if it was resolved or  rejected. But in terms of this async await, let's   actually test it with this how this works, okay.  Don't worry about this one. Let's comment this.   We're gonna return over here. Okay, don't worry.  Comment this like this and come over here. So   first thing is if we want to declare, I mean, if  we want to work with promises in the async await.   World, then what we have to do is we have to  declare this async word before the function   I showed you a little while ago, right? And then  inside over here, you have three options. I mean,   three things to write, try, get. And finally,  what do we try to get final over here we wrote   what the if else statement, and over here  we're going to write try, catch Finally,   following the right cry over here.  Okay. Go your braces like this.   And then you're going to write the catch, okay.  And brackets over here. You write error. Okay.   curly braces. And over here you write.  Finally like this. Okay, then curly braces.   So what does this finally does it? It runs  code anyways, okay, let's write it. Okay. Don't   worry. We're going to test it. Okay. Console dot  log, runs code any way. Okay. Inside this catch   handler. I mean, let's start with the try. Okay,  let's create a fake problem. What problem fake   problem over here we're going to right away, don't  worry about a word keyword I'm going to discuss   in detail about this await keyword. Okay,  it's coming. Wait, you're right. Anyway, ABC.   So this ABC is actually pointing out to a function  which doesn't exist. I still wrote it because it's   a fake function. What function fake function  okay? So in fact, this catch handler, what we're   going to write is console, the log like this and  over here, we're gonna write ABC doesn't exist.   exist, okay? And this error is actually  written like this coma arrow. Okay.   For now, we don't need this error part, but we're  just keeping it over here as it is, we just want   to work with our try catch this console log and  this Finally, in this Finally, handler in order to   understand the main theory of the async await,  okay, so you clear the console here. As I told   you earlier, this aways ABC I mean, this ABC  part doesn't exist look at the entire code   field. Nothing exists which is named ABC right?  So in order to run this first of all you need to   provoke it like by saying order at the  very bottom over here right order okay?   My bad sorry, like this Ctrl S and let's run it  and let's see what happens there we go. We got   the message. First of all, ABC doesn't exist  because we don't have anything named ABC. Then it then we have run scope. Anyways, look at this  the finally handler Do you remember this Finally,   from the promises, this is over here, it will  run code anyways. By the way, do you remember   this handlers this then catch finally handlers,  you can also use them inside I mean, outside the   async await system as well. Let me show you a  demo. Okay. You right at the bottom of the order   after removing that semicolon, but then like this,  okay brackets, then create a Arrow function like   this and over here you write console dot log then  write anything you wish I'm gonna write like this   My read I read I don't I cannot think anything of  good right now Ctrl F clear this run it like this.   There we go. We have got that then handler it  is pending over here. Okay? First of all we   got that error and then the final is going  to run anyways Okay, so that is over here   and then that then what will happen after our  promise is resolved is going to do this part over   here. And you can also use those then cat finally  etc. After here is the chaining part. Okay,   I hope you understood this far. Now let's do a  small test and understand that a weight keyword   let's say that I am the chef of the  restaurant, okay, just look at me.   I am the chef of the restaurant. Okay, I make ice  cream. I took the order from the customer and I'm   making ice cream okay tu tu tu tu tu my bed sorry.  Okay, so I'm making ice cream over here but I then   realized that my customer didn't tell me which  topping would he like so I have to go outside the   kitchen ask the customer sir which stuffing  topping would you like chocolate or peanut?   There he is going to give me the order. Give me  chocolate and then I have to return to the kitchen   and start working. Look how the process  is working. I am going outside which means   that the kitchen is being stopped completely  without the chef the kitchen doesn't work.   But realize this that there are other employees at  the restaurant who is working who is cleaning the   tables, cleaning the dishes, taking orders, etc.  Everything else except the kitchen is working.   This is where we use the await keyword. Let's do  a C test and understand about this await keyword   in details. Let's start now come back to corporate  Now come back to code pen and remove everything   except the stocks and the East shop open. Okay,  remove everything like this. Goodbye forever.   Okay, now what we're going to do is  we're going to create a function what   a function which run arrow function. Okay,  let, let's write toppings choice, okay.   Which will add to the customer. So which topic  would you love? Okay, it was blue my bed equal to   bracket. This sign is the arrow sign and instead  we're here we're going to make a new promise what   new promise. Okay, so return new promise like  this. And we're here we're going to write,   resolve, reject, don't worry, I'm coming on the  async await part. Okay. So equal to arrow sign   curly braces and over here what we are going to  write come on to me resolve reject. Resolving   My bad. We check like this. Okay. Now over here,  what are we going to do? We're going to create   a set timeout. Let's say that the asking  process takes how many seconds three seconds,   how many? Three seconds. Okay, in order to do  that, we're going to write set timeout, okay,   for three seconds. So write set timeout like this,  okay? And then what we have to write is Come on,   tell me arrow function. Okay, like  this. And then we're gonna set the   time, how many seconds, three seconds.  3123. All right, now inside over here,   we're going to write console dot log console. dot  log. We're here right? Which stop being you love   of my read. Like this. Remove this console. From  here. Clear. Okay, Ctrl S. Now we made a small   promise that we have to go outside the kitchen  x our customer, what would you love to have   as a topping. Now at the very bottom, what we're  going to create is function a sync function is   sync function. We're going to write what brackets  are. We also have to give it a name. We're gonna   name it kitchen. kitc HTN kitchen over here, and  then curly braces over here like this. Now follow   along with me. We're gonna write console dot  log five times A, B, C, D, E, like this, okay? console dot log. Okay, like this.  Ctrl C, one of my red 2345. Okay, now,   we'll get right over here. Ah, don't worry. I'm  going to explain that why I wrote ABCD My bad. T.   Hey, okay. Now what we're going to do is, let me  actually explain why I wrote this ABC and all the   spots. Okay, the thing is, these are the steps  we're walking into. I mean, we're working at the   kitchen. Okay, we're making ice cream. We're  following the steps 1234 and the very mill,   we just realized which topping would our customer  love. Okay, so we have to go outside the kitchen.   What? Outside the kitchen, ask him. So what  did you love to have? So this is our kitchen,   we're inside over here, where where we're inside  this kitchen, we're working. Now we need to go   outside and come to this toppings choice, which  is the where the customer is sitting asked him.   So what would you love to have. And then once  we have got the data, we're going to come back   to our kitchen, start working and then serve  Him. In the meantime, what will happen, others   other works like cleaning the dishes, cleaning  the table, taking other customers orders will   keep running. Don't worry, I'm coming to that  part. Okay. Now what you're going to write is at   the very middle over here, you're going to write  a wait, then what the name of this function What   is this toppings choice Ctrl C, that one Ctrl  V, and then brackets, close it on. And then   what we're going to do is in order to provoke  this function, we're going to come over at the   very bottom over here, you're going to write  kitchen, what kitchen it's like this, okay?   And then we're gonna define other task, which is  happening except myself. I'm the work on the chef.   Okay, other words? What cooking? I mean, sorry,  cleaning the dishes. Cleaning the table. The other   quarters? Let's write them. Okay. Console, the  log? cleaning my bag. sealing the dishes console,   the log like this conference. I mean, this one  Ctrl C Ctrl. V, then what? Cleaning the tables?   Actually, you right doing the dishes? It  sounds good. I guess. doing dishes dishes,   cleaning the table. And then at the bottom,  we're going to write taking others order   like this. Okay. Ctrl S. Now, let me  theoretically explain you before running the Run   button that what is actually happening. Okay,  so I'm working over here. Okay, I'm making the   ice cream. And then I realized that I didn't  have the necessary direction which topping   would my customer love. So I'm physically  going outside the kitchen to ask the customer   what would you love to have, which means that this  entire process is stopped, my kitchen is stopped,   nothing is happening because the chef is outside.  And in the meantime, other work like this one   will still happen like doing the dishes, cleaning  the table, taking others orders. And once a return   to the kitchen, this to work D and E will work.  Let's run it and let's test what will happen.   Okay, look, a B, C, doing the dishes cleaning the  table taking others orders. Which topic would you   love? Oh, we didn't actually get the D and D.  That's because I actually forgot something.   I forgot to write the resolve over here. And  without reading the resolve, it's not going to   return our other tasks. Okay, so come over here on  the toppings choice Okay, or and inside over here,   you're going to write V zoolz. Like this bracket.  And inside the brackets, we're going to place this   console over here. Okay. Ctrl x, my apologies.  I actually forgot to write that part and Ctrl S   Okay, now clear this and run the code and let's  see what actually happens. Okay. Oh, I actually   have an error. I don't know why but let's check  it out. Okay, console log. Which dropping my bad.   Like go like this Ctrl S. Let's see what happens  right now if you had a console like this.   Now you can see that we have fixed our error  over here we have written the result over here   and we have replaced the console log inside this   line over here now it's gonna work perfectly  fine. Let's run the code and see what happens. There we go. We have ABC doing the dishes,  cleaning the tables taking other orders which   dropping Do you like and then we have other works.  What is happening Let me explain again. So what is   happening look here in the kitchen, I am working  in the kitchen, where am I working in the kitchen.   So these three tasks are done. Then I remember  what topping does my customer likes. So I'm going   outside and asking him in the meantime others are  working look, other people are working over here.   If there was 100 tasks, they would have worked.  They would have been working On those tasks,   okay. So once these tasks are done in the  meantime what I have done is I have gone to   the customer action to the data returned to the  kitchen and I started working then D and E is   completed on this bottom over here you can see  that, I hope you understood the await keyword.   I hope you understood the resolve keyword.  Let's reopen our shop and welcome customers.   Okay, now come back to code and delete everything  except this one. And this one, okay, like this,   follow along with me delete goodbye. And  over here, what we're going to write is   first of all a time function because we need to  set the relationship between time and work right?   So you write a function, okay, time, and right  over here, MS, which is milliseconds, okay.   curly braces like this, we're going to  create a new promise. Okay, return, Neil.   Tom is don't worry about the async await I'm  coming to that part. Okay, capital letter P,   not small letter p, r, O, and my se. And  then you said over here we're going to write   the resolve and reject part resolve. And the  reject part, the check like this, and arrow   function, my bad arrow function over here like  this. And then the if else statement like this,   if our shop is open, is shop open look at this  is shop open, and then we're going to write what   we're going to create set timeout. Remember  this set timeout like this, and over here,   we're forming a relationship between our time and  work okay, so inside here, we're going to write   the result we are passing this result over here,  which means that we're setting the relationship   between the time and work okay. So resolve over  here and then that Ms part should be over here,   m s like this, at on the L statement, e  l s statement. So what this will do is   it will notify us when our shop is closed, I mean  when is shop open, set to false, okay, like that.   So we're gonna write reject, like this. Instead,  over here, we're gonna write console. Console,   dot log, like this. And we're going to  write, shop, my bag is closed Ctrl S. Now   we're going to write an async function named  kitchen to start our production inside there.   Okay, come at the very bottom of before that you  clean the console because it looks quite dirty.   Okay, so now you're going to write a sync, like  this function create the kitchen, okay? Okay,   it CH, E and kitchen like this curly braces, like  this over here. And then we're going to write cry,   okay, like this, then catch, like this. And  if you want, you can also write the Finally,   that's completely up to you, but I'm gonna write  it because a lot of you don't really understand   how to work with the try, catch. And finally,  I'm going to explain everything in details.   Don't worry about it. Okay. And over here, I  actually forgot to write brackets and arrow,   like this. All right. And now in order to run  this, what we have to write is at the very bottom,   we are right the kitchen, which is the trigger  kitchen, like this, okay, Ctrl S. Now let's   actually test a function to check whether if it's  working or not, so come on in this catch handler,   and we're going to write console dot log like  this. We're going to write customer left, okay,   customer, left like this and over here and  right arrow like this. And inside over here,   what we're going to write is shop is closed. Okay?  console. log. de endet. shop is closed. Okay. Now,   what are we going to write inside this  fry handler? Let's see. Okay, one by one. If you remember this chart, the first thing  that we need to pick is the order I mean,   the fruit name. Okay, so come back  to our code pen over here. And   we're going to write console, log log,  and then backticks. Don't forget that   dollar sign curly braces like this.  And then we're going to write stocks,   like the stocks dot fruit, f r u, it s, and  then we're going to pick the strawberry zero,   or you can pick anything you wish from this list  of stocks, okay? You can pick grapes, banana, etc.   Alright, now what we're going to do is,  remember this, we have two seconds of time,   how are we gonna define the two seconds over  here? In order to define the two seconds? Do   you remember this function over here, the time  function? We're gonna utilize this look at here,   look Write a wait. And then what the  name of this function time, okay,   time over here. And then we're going to  set it to how many seconds, two seconds   to 123 2000 milliseconds means two seconds. Now  let's test that code. Okay, as our shop is open,   now it's gonna give us what resolve you can this  is going to get resolved. Okay, let's run the code   and see what happens. So after two seconds, we're  going to get this property over here. That's   because we have set it to two seconds, and they  ended shop clothes will be printed immediately   because we didn't assign any time over here. So it  is assured that that function works and there is   no problem in our function. Let's complete our  ice cream production business, following these   steps over here, okay, now what you're going to do  is come over here, you press Enter, Enter. I will   keep some space between your code so that it looks  neat and clean. And then we're gonna write console   dot log. Start the production, okay? Start the  production, it's not gonna take any time. Okay,   we're going to keep it blank for now, what if  you want to learn, but if you want, you can keep   a wait. Time. 0000 is completely up to you. But  for making you understand how the system works,   we're going to keep it 0000 so that you can know  that this thing takes zero seconds to start. Okay,   now we're gonna start, we're gonna cut the fruit,  okay, so console dot log. Got the fruit like this   is gonna take how many seconds? Two seconds?  Every time to 123 I mean two seconds. Okay,   then we have the add water and ice is going  to take one second. Let's go boys and girls.   Oh, my bad, I will do the wrong thing. Anyway, Tom  is going to take 123 like this console dot log.   And we're gonna write what water and ice backticks  dollar sign curly braces and dollar sign curly   braces was added like this and over here we're  gonna write big the water stocks dot liquid   square bracket zero. Okay, stocks dot liquid.  Then we're going to write one. There we go.   And over here, we're going to start the machine  in one second. Select the container to second.   So how do we do this? We can also copy this No  worries. Like this okay Ctrl V. First we need   what one second to start the machine and then  two seconds to select the container. So one   second is over here. And the two second part  is over here. Okay, the second part is here   and let's actually complete altogether the  toppings parse takes three seconds to serve ice   cream which takes two seconds Okay, so let's do it  like this. So these are three seconds over here. This is our serving over here Okay,  two seconds now we're going to write stuff start the mission okay. So console  log. Start deep machine like this.   And then console dot log. It will be our select  the container okay. backticks dollar sign curly   braces. Stops got holder? Zero it will pick  the cone. Okay. Ice cream placed on cone   ice cream placed on cone like this.  Okay, now configured log console dot log   like this. Do we need backticks? Yes, because  we need to pick that toppings. Chocolate   backticks dollar sign curly braces, stocks dot  toppings DOB imgs then zero which will pick the   chocolate was selected as the very last what we  are going to write Yes, we can serve ice cream   take the money and buy ourselves a Lambo because  why not? Come on boys and girls console a dot log. Okay sir, ice cream.   Let's save our code clear our console like this.  And let's run a run it and see what happens.   Maintaining time everything will run strawberry.  Oh actually forgot right strawberry was selected.   My bag was selected. Okay, clear this console.  Save it, run it again. Sequential Maintaining   time it will run look straightaway to a selected  start the production cut the fruit then this start   the machine I simulation code then after three  seconds we will have chocolate was selected   service day and shop is closed but what will  happen if we have false over here let's see okay   false which means that is going to reject it look  at here reject on the block shop is closed which   means that this else this reject this thing will  come. I mean this thing will be painted first and   then look at this catch over here. Get a better  customer left and then the final day ended shop   is closed. Let's test it. We're gonna shop is  closed customer left they ended shop is closed.   This is coming from where let me show you this is  coming from this else this reject from the time   function customer left it is coming from where  look at this is fun coming from the catch and they   ended shop is closed. This will run anyways  it is coming from this finally handler   so we successfully made ice cream today. And  along with that we have completed our tutorial.   If you liked the video, give a like share  it with a friend and feel free to subscribe   Till then Take care and I'll  see in the next video. Bye bye

Channel: freeCodeCamp.org

Views: 509,384

Keywords:

Id: ZYb_ZU8LNxs

Length: 96min 23sec (5783 seconds)

Published: Tue Jun 22 2021