Asynchronous JavaScript Course (Async/Await, Promises, Callbacks)
Asynchronous JavaScript Course (Async/Await, Promises, Callbacks)
Learn how to use Async/Await, Promises, and Callbacks in JavaScript.
✏️ Course from Joy Shaheb. Check out his channel: / @joyshaheb
📄 Article version: https://www.freecodecamp.org/news/jav…
⌨️ (0:00:00) Intro
⌨️ (0:00:37) Asynchronous JS
⌨️ (0:01:48) Sync vs Async
⌨️ (0:04:55) Examples ☝️
⌨️ (0:08:40) setTimeout function
⌨️ (0:13:21) callbacks w/examples
⌨️ (0:18:09) ice cream w/ callbacks
⌨️ (0:42:02) Callback hell
⌨️ (0:43:32) Promises \u0026 promise cycle
⌨️ (0:54:22) Promise Chaining
⌨️ (1:03:27) error handling
⌨️ (1:05:37) finally handler
⌨️ (1:07:26) Async/ Await
⌨️ (1:09:42) try catch finally
⌨️ (1:15:46) Await keyword w/ example
⌨️ (1:25:22) ice cream w/ async/await
🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 Treehouse
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
Content
0.24 -> Joy is a great teacher who has
created many amazing courses
4.4 -> and written a bunch of helpful
technical articles. In this course,
8.08 -> He will teach you how a sink await
and promises work in JavaScript.
12.72 -> Hey guys, you're here in this video, we're gonna
make ice cream and learn Asynchronous JavaScript.
17.52 -> Yes, you heard me right, we're gonna
make ice cream today. And along the way,
21.04 -> we're going to discuss three topics, callbacks,
promises, async await along with examples,
26.72 -> the video will go like this over here, we're going
to make the main project, which is the ice cream
30.96 -> project. And over here, we're going to look at
some examples so that you can better understand
35.04 -> how the system works. But the first question
is, what is Asynchronous JavaScript? And why
40.16 -> should you even care? If you want to make bigger
projects more efficiently, then this is for you.
45.68 -> What Asynchronous JavaScript does is it allows you
to break down bigger projects into smaller tasks.
52.48 -> And then using any of these three methods over
here, either callbacks, promises or async await,
57.76 -> what you can do is you can form a
connection between these small steps
61.44 -> in a way that you can get the final result. So
here's an example of what I mean. So this is the
66.96 -> ice cream that we're gonna make today. Here's the
ice cream. Okay, so using Asynchronous JavaScript,
72 -> we can break it down into smaller steps. If we
do that, it looks something like this, you can
77.52 -> see that these are the seven steps to make ice
cream first, starting with the Place Order, then
82 -> we're going to cut the fruit, then we're going
to add water and ice, so on and so forth. And at
86.72 -> the very last, we're going to serve ice cream. To
make you understand this topic even better, I have
91.84 -> added some time function as well. You can see this
over here, it takes two seconds to place the order
97.6 -> two seconds to cut the fruit one second to add
water and ice, so on and so forth. And at the
102.8 -> very last we're gonna serve ice cream, take the
money and buy ourselves a Lambo, because why not?
108.16 -> If you want to learn Asynchronous JavaScript
better and know the difference between two things,
112.4 -> synchronous and asynchronous system, let's
start discussing with the synchronous system.
117.68 -> Let me explain this to you in clear words. Let's
say that I have given you 10 tasks and just one
123.2 -> hand 10 task one hand, so how will you do the
task? You are going to do one by one, right? Like
128.96 -> this look, 123. So we are in tax number three,
right? You cannot jump to the tax number seven
136.88 -> unless you do 456. And then seven. Right. So what
are you doing? You're doing one by one, right.
145.28 -> But in the asynchronous system for 10 task,
you will be given 10 hands so that you can work
150.64 -> independently without depending on anyone. Look
at this image over here. This is a synchronous
156.96 -> system, they are loading one by one, the second
image doesn't load unless the first one does.
163.44 -> And the third image doesn't load unless the
second one does, which means that they're
167.68 -> following a order like this 123. And on the
asynchronous way, you can see that nobody
174.32 -> depends on anyone they are loading on their own
pace independently. By the way, I wrote an entire
180.16 -> article on the topic that we're going to discuss
today so that you can understand it better.
184.48 -> At the same time, you can revise it from
here more easily, efficiently and quickly.
188.8 -> Link of this article will be given in the
description down below, go and check it out.
193.12 -> To summarize, let's say that we're setting up
a marathon for three persons, how many person
198 -> three person, if you are doing it in the
synchronous way, what will happen is you just have
203.04 -> one single lane, and you have to place those three
persons on this single lane in this area of 123.
211.68 -> And the rule is nobody can overtake the other,
everyone has to finish the race one by one. Look
218.16 -> at this image over here. This is the synchronous
system. This is the finish line over here. Okay,
223.28 -> and the images, which is the person's One, two
and three are standing on the same lane, which
230 -> lane same lane and nobody can overtake the other,
everyone has to finish the race one by one. So the
238 -> person three or the image three will finish the
race first, then the second one and the first one
244.24 -> like this, the single lane, the synchronous
system. If anyone stops, the entire process stops.
250.48 -> If the image three stops over here that everyone
has to stop. And if we are setting the marathon in
256 -> an asynchronous way, for three persons, we will
have three lanes. If we have more participants,
262.08 -> then the number of lanes will also increase,
which means that nobody stops for anyone, they can
268 -> finish the race independently on their own pace.
If anyone stops, then the system still continues
274.32 -> to run. Look at this image over here. This is
the finish line and this is the participants
280 -> over here and these are the lanes Okay, lane
number one, two, and three, the image one, two,
286.4 -> and three. They're gonna finish the race on their
own pace. I hope you understand the difference
291.04 -> between the synchronous and asynchronous system.
Let's look at some examples right now. You can use
297.04 -> any code editor you want but for this tutorial,
I'm going to write Don't go pen because it has
301.28 -> a simple interface. So you can follow along
with me if you want. So open code pen.io. And
307.76 -> then you click this pen over here, then you're
going to click this small pen icon over here,
313.84 -> and you're going to name this project, anything
you want, I'm going to write it async j s.
321.28 -> Okay, and then you save it Ctrl F, like this Ctrl
S. And now you're going to drag it in the middle,
328.4 -> like this, and double click on the JavaScript
section like this, and it's going to expand.
334.08 -> And in order to open the console, you're
going to click this small icon over here,
337.92 -> you can see that like this, double click on here,
and it's going to expand like this, we need to
344.64 -> know we need to do one more setting, you come over
here, this small gear icon over here, click it,
349.76 -> click on behavior, and you enable everything
except this one, the auto updating preview. Okay,
356.32 -> turn it off, Save and Close. And then we're
going to manually get a run button over here.
361.12 -> Why is that? That's because every time we write
a single letter, corporate runs it automatically,
367.76 -> which means that every time we write a single
letter, we're going to get an error after error
372.88 -> after error. In order to avoid that I have turned
off this setting. Every time we finished writing
378.4 -> our code, we can manually run it like this. Okay,
now let's look at the synchronous system example.
384.16 -> So we're here we write synchronous si nc HRONOS
synchronous like this. And you comment this like
391.76 -> this. And over here, we're going to write console
dot log five times how many times five times like
397.84 -> this following console dot log, okay, brackets,
double quotes space over here, okay, you copy this
405.36 -> Ctrl C, and then Ctrl, v 510s. Okay, 345. It's
some gap over here as well, additional gaps,
416.08 -> like this. Alright, so over here, we're going
to write a full sentence. Okay, I eat ice cream
423.04 -> with a spoon. So again, divided by phrases, okay,
then follow me along. I eat ice cream. With sorry.
443.2 -> Spoon, okay, Ctrl S to save it. And then
you're going to click this run over here.
448.72 -> And then we're going to get the result,
there we go, you can see that our phrases
454.24 -> are printed one by one serial. That's because
JavaScript runs from the top to the bottom,
460.16 -> how does JavaScript run from the top to the bottom
serially? In this process, if anyone gets stuck,
467.84 -> then the entire process get stuck. This is the
synchronous system. If you change the sale,
474.16 -> let's say that I want to change the spoon from
here to here, okay, Ctrl x, and then you paste
481.2 -> it over here, Control V Control F, you clear this
console over here, and then you run it again,
487.2 -> let's see what Let's see the result. Now you can
see that I eat spoon ice cream with a you see
494.16 -> the JavaScript doesn't care about anything is
gonna run the code from the top to the bottom.
500.24 -> This is what the synchronous system. Now
let's look at the asynchronous system.
505.12 -> Now over here, right, asynchronous, okay, a
synchronous done, clear the console over here, you
512.16 -> change the CL Ctrl x. Okay. And we're here Ctrl
V Ctrl S. And now come over here at the bottom, I
521.76 -> need to make you understand a small function named
set timeout function, which is a built in function
527.12 -> of JavaScript. What this does is it allows you
to run a function after a specific amount of
534.32 -> time. So you write set timeout set, then capital
letter T, timeout, this one, okay, then brackets,
543.6 -> the first thing that we are going to
pass as an argument is a function. So
547.92 -> we're going to use the arrow function, don't
worry, I'm going to explain arrow function
552.48 -> and the regular function with the arrow function
like this, okay, equal to this sign curly braces.
559.68 -> Now let's look at the difference between function
the regular one and the arrow function. Okay,
564.64 -> in the regular way, we write a function like
this first, the function keyword, okay, then
569.52 -> we're going to name it like this A, B, C, D, E,
F, G, however you like, right? Then you put that
576.8 -> then you put that bracket like this, okay? And
then curly braces, this is the regular function,
582.16 -> but in the error function, how we write it is
we're going to write either late var or const.
589.36 -> Okay, like this. And then we're gonna put the name
over here. What was the name of this function? A,
594.56 -> B, C, D, D, right? So we're gonna write ABCDE
D, which is the name of that funk. Like this,
604.4 -> like this, and that equals, and then we're gonna
put brackets over here and then this sign over
611.04 -> here, the arrow sign, and then curly braces. On a
regular function, we used to put our arguments on
617.6 -> this bracket like a, b, c, d, etc. In the arrow
function, we place our arguments over here, A,
627.44 -> B, sorry, D, C, D, etc. I hope you understood the
difference between two for this project, I'm going
635.28 -> to use an arrow function. Okay, the latter one,
this one. So once we have entered the function
641.2 -> inside the set timeout as an argument, the next
thing that we're going to put is the time, okay,
648 -> so it is actually counted as milliseconds. If
we write 1000 is going to count as millisecond,
654.08 -> which means one second. So if we write, let's say,
3000, it means 3000 milliseconds, which is three
661.28 -> seconds. Okay? Now come over here. Let's say that
I want to cut this and place it inside this set
668.08 -> timeout function. How will you do it? We'll cut
it like this Ctrl x. And that insight over here,
674.64 -> this curly braces, we're going to place it over
here, okay. Ctrl V. And now let's change it to
679.52 -> four seconds. By the way, it said timeout is a
asynchronous function, okay. You got this from
685.6 -> here, Ctrl x, and you paste it over here. Ctrl
V, like this Ctrl S to save it. And then we're
693.04 -> going to press this run function. But before that,
do you remember what I told you? JavaScript runs
698.48 -> from the top to the bottom how from the top to
the bottom. And let's see how this works. Okay,
704.96 -> run it like this. And let's see the result.
Now you can see that we have got, I eat with
711.28 -> a spoon. And then after how many seconds after
four seconds, we got the ice cream over here.
717.76 -> Now how does this system work? This is an
asynchronous system. Okay, asynchronous system.
723.12 -> Look, the cereal is over here. Okay, I eat ice
cream with a spoon. The sale is over here as well,
729.68 -> you can see that I eat ice cream with it spoon.
The system is actually working like this Look,
735.12 -> I eat and then this ice cream over here it
has a set time of function, which means that
740.72 -> we're going to have another hand over here
is going to take this function at the side,
746.16 -> which is our second lane. Okay, this
is our main lane. I mean main road,
751.52 -> this is the secondary road, it is taking that
asynchronous call at this hand. And after four
757.76 -> seconds is going to release it on our main lane
like this. Until then what will happen Look, I
764.56 -> eat ice cream is an asynchronous call, which
means that is going to take it over here,
770.64 -> after four seconds is going to get released, then
with a spoon after four seconds is going to come
777.68 -> over here. So this is how the asynchronous
system works. I hope you understood it.
783.68 -> Now we're going to start our discussion with
callbacks. But before that, if you're new to
788.16 -> the channel, feel free to subscribe because I
post videos based on practical work projects
792.56 -> so that you can level up your coding skills. If
that sounds interesting, hit the subscribe button
797.52 -> and join my gang under the further ado, let's
get started. Let's talk about callbacks. What are
803.84 -> they? In simple terms, very simple terms. calling
a function inside another function is called a
810.8 -> callback. In even more simple terms, what it does
is it forms a connection between what functions.
818.4 -> Let's look at one example with callbacks. And
then we're going to start our ice cream business.
823.52 -> Again, back to code pen. you delete
everything okay? Ctrl A, then delete. Okay,
829.36 -> you clear the console over here as well. Ctrl
S. Okay. So what did they tell you before
835.68 -> callbacks means calling a function inside another
function. So we'll create two functions to form
841.2 -> the relationship. What relationship Okay, function
one, function two, like this. function, one, okay.
850.88 -> We're going to use a regular function. Nothing
complicated. No politics here. Okay. Function
856.8 -> two. Okay, now inside function one, what we're
going to write is console dot log, okay, console
865.04 -> dot log. Over here, we're going to write function
one, or let's write step one. Okay, step one,
873.28 -> of sorry, like this step one. In fact, we're here
we're going to write console dot log, step two,
888.4 -> like this, in order to run this
function, what do we do we write
892.96 -> the name of the function at the bottom like this
look. We call it like this one, then brackets over
899.12 -> here. Control As you run this button over
here, after you clear the console, okay,
904.32 -> run it like this. And we're going to see step one
on the console. Let's wait, there we go. This is
910.4 -> step one. Okay? And how do we call the function
two in the same process, we write it over here.
916.08 -> I mean, we call it over here like this, okay? Ctrl
F. Don't forget to clear the console over here,
921.6 -> create like this, and then you paste this run
button. Now you can see that we have step one,
926.72 -> step two, that's because we have an order, right?
JavaScript runs from the top to the bottom.
933.76 -> Look which one is first one is first,
and then to what if we reverse the order
940.4 -> before I do first and then one like this Ctrl x
Ctrl V like this. So first is two and then one.
947.04 -> So what will happen to will run first
and then one, clear the console. Save it,
954.08 -> run it, you can see that we have step two first.
And then step one, these are regular functions.
959.92 -> Now let's form a relationship between these
two using a callback what a callback. Okay?
965.92 -> Let's remove this. Okay. Now we're going
to make a connection of function to
970.96 -> inside function one. So how do we do it, we do
it easy a argument, we're gonna write over here
978 -> called to see a double L, hyphen, okay? This
is nothing, this is just an argument, okay?
985.44 -> Nothing else. And over here, we're going to write
step one complete. Okay? This is nothing special,
992.72 -> this is just gonna get printed on our console.
Okay? Please call step two, like this. Okay. Oh,
1003.6 -> like this. Now, in order to provoke function to
what we do is, we take this argument over here,
1011.6 -> called
1012.96 -> to, and then, as number two function is
a function, what we're going to write
1019.12 -> is we're going to give brackets over here
like this. And now it's going to call it
1024.48 -> every time. Once our console dot log is
printed like this, look, we don't have
1030.16 -> to call to anymore, we just call one, one.
And then inside over here, we're gonna pass
1036.4 -> function number two, which one function number
two, okay, to like this, look, how do they form
1042.16 -> a relationship between these two? If you clear the
console, save it, run it, let's see the result.
1048.64 -> Look what is happening, step one, complete, please
call step two. And then we have the step two.
1055.68 -> If you remember, JavaScript runs from the top
to the bottom, right. So our console dot log is
1061.76 -> at the first and then call to, but if you
reverse the order, what will happen? Let's see.
1068.4 -> Ctrl x, okay. Call it over here, Control V,
Control S. Okay, and now clear the console,
1077.04 -> run it and let's see what happens. Now you can see
that step two is first and then step one complete
1082.96 -> place called step two. Don't worry about this.
If you don't understand it, we're going to look
1087.04 -> at another example right now. For that we're
gonna start our ice cream business right now.
1092.56 -> For that we need to know the relationship
between our customers and us. You can see
1097.68 -> that this is the flow Okay, first we get the
order from the customers, then we're going to
1102.2 -> fish the ingredients. Then we're going to start
the production and then we're going to serve
1106.24 -> ice cream. Okay, so we're going to create two
functions, how many functions two functions, order
1111.52 -> function, production function, okay? If we don't
get the order, we cannot start the production.
1118.32 -> This is how we're forming a connection between
these two functions using what Tell me using
1123.68 -> a callback. Come on. Let's go to corporate and
see the example. Come over to copan over here,
1128.72 -> you delete everything. Okay, we're going to use
arrow function what function arrow function,
1134.16 -> right lead, first is order because without the
order, the production doesn't start okay. Order
1141.04 -> equal to brackets, then arrow
sign curly braces like this. Okay,
1146.96 -> now write the production function, but before
that clear this console, okay? Let production
1155.6 -> duction here we're going to make the ice
cream. Okay. So once we get the order, we're
1160.64 -> going to start the production of ice cream, okay.
Production equal to brackets, arrow sign curly
1167.6 -> braces like this. Okay? Now in order to form that
connection, that every time we get the order, the
1174.72 -> production will start. We do it like this. Okay,
you come over here. Okay, you pass an argument.
1181.52 -> We're going to name it call production,
okay. Call underscore, pro dot tion, okay.
1189.52 -> And inside these curly braces, we're going to
write the same thing. Okay, the exact same name
1194.56 -> Ctrl C Ctrl, V over here and then brackets
Okay, brackets like this. And look at there.
1202.48 -> We have formed a relationship between these two
functions is it what a callback now let's test
1207.36 -> it. Now we're going to write console dot
log, console dot log, okay? order placed,
1218 -> please call production like
this, okay. And inside over here,
1226.8 -> we're going to write console dot log console
dot log order received. Starting broad duction.
1240.96 -> Like this, okay. Now in order to run our
function, what we'll do is, we're gonna
1245.76 -> write order over here or there, and inside that
order, we're going to write the production.
1252.16 -> We're going to pass this function over
here inside here, okay, bro. duction,
1256.32 -> like this. Okay, so Ctrl F, clear the console,
save it, run it. Let's see what happens.
1262.96 -> Now, you can see that we have order placed, please
call production. And then we got order received,
1270.48 -> start production. I hope you understand how the
system works, or forming relationship between
1277.12 -> functions using a callback. Now let's understand
one more thing, the relationship between the
1282.56 -> front end and the back end. The front end is
our kitchen where we will make the ice cream
1287.36 -> and the back end is where we'll store ingredients
like fruits, liquid stuffs, missionaries,
1296.16 -> raw materials, chocolate, etc. You know what raw
materials means, right? The stocks, our stocks,
1304.4 -> the stocks is a back end kitchen is the front end,
okay? So we're going to store our stocks inside a
1310.4 -> variable, okay, so come over to code pen over here
at the very top, okay. Keep some space over here.
1316.8 -> And we're going to write let Okay, net stocks.
So this variable will hold all of our stocks,
1323.36 -> like fruits, liquids, holders, toppings like
chocolate, peanuts, etc. Okay, and that's equal
1331.52 -> to we're going to create a object over here
like this object, okay? And inside the object,
1337.84 -> we're going to write arrays like this look,
f are you IDs Okay, then colon over here,
1344.24 -> we're going to store all our foods
inside what an array Okay, like this.
1349.52 -> Then we're going to write the name of our
fruits. As I have defined them over here,
1354 -> I'm going to copy it over here. Okay. Ctrl C, and
then Ctrl V over here. Now pause the video, take a
1364 -> moment to write these foods. Okay. Now how do we
access a single stock from this variable? Okay,
1370.96 -> we comment everything from here from top to bottom
like this, comment this like this. And in order to
1377.12 -> select one stock, we'll do it like this. First
of all, we write the name of the variable What
1383.76 -> is the name of the variable stocks Okay, sto ck s
then dot y dot because it is an object in order to
1391.68 -> access the object we need to form a dot and then
the name of the object is which is fruits, okay,
1397.44 -> capital letter F r u IDs. And then what is this,
this is an array. So how does the array works is
1405.04 -> it is arranged in the order of 012 and three,
okay? So you know, x is that you right,
1413.44 -> square bracket, okay, and then if we want to
access the banana, let's look at the order 012,
1420.48 -> we write two over here. Okay, and now let's print
on the console. In order to do that you write
1426.32 -> console, dot log, then bracket at the end bracket,
close it, Ctrl S, clear it, and then run it.
1436.08 -> Look, we got the banana. In the same way we have
more stocks, we have the holders, the cups, cone
1442.16 -> sticks, and the toppings as chocolate sprinkles.
So this is the variable that I have created. Okay,
1447.36 -> I'm going to copy it from here Ctrl C. And
then over here, I'm going to paste it Ctrl V.
1452.88 -> Now pause the video, take a moment and
write this talk on your code editor.
1456.96 -> So once that's done, you clear this from
here. Okay, clear the console and you bring
1463.92 -> all of this back, okay, like this. There we go.
Okay, now we're going to clean our console from
1470.4 -> here remove this and we're going to remove this
Okay, and keep everything else and then you come
1476.32 -> in this form here, okay? Now Now the first thing
is the order right customer places the order
1482.96 -> the order is changeable, which means how many
options do we have? Look at our menu, we have the
1487.68 -> strawberry, grapes, banana, and Apple which means
that the customer can pick anything he wishes,
1493.68 -> which means that for this we need a variable.
So over here we're going to write fruit, name
1499.6 -> f Are you it? Okay, underscore and me
like this 10th place Come over here.
1506.8 -> So we have two arguments, the fruit name and the
call production, the Customer Picks the fruit,
1513.04 -> it gets over here. And then we get to
know that what the customer picked.
1518.56 -> And then we're going to start the production.
This is how we're forming a relationship between
1522.88 -> our functions. Okay. And over here, you uncomment
this, and we need to keep it blank for now. Okay,
1530.16 -> you give double quotes over here, then comma,
okay, it's Ctrl S, if you remember, this is
1536.24 -> our steps along with a time. So in order to ensure
the time function, we're going to use set timeout.
1542.72 -> And we're going to print the steps on our console.
Okay, so follow along with me. First of all,
1547.6 -> we're going to place the order by picking a fruit
name, Okay, come back to VS code over here. And,
1555.28 -> and in order to select the fruit and place the
order, it takes two seconds, how many seconds,
1559.76 -> two seconds. So come back to VS code over here
and inside this order function. Okay, come
1566.56 -> here and write console or before granting
console dot log, you have to use a set
1571.68 -> timeout function because it takes how many
seconds, two seconds, set timeout like this.
1578.56 -> And inside over here, we're going to use an arrow
function. You can also use an anonymous function
1583.68 -> like this look, function bracket curly braces
like this, but we're going to keep it simple.
1590.64 -> We remove this, remove this function from here,
and you're going to give that arrow sign like
1596.48 -> this, okay? And at the end, we're going to place
the time function, okay, how many seconds, two
1602.24 -> seconds. So we're gonna write 2000 milliseconds,
okay. 2123, like this. And inside over here,
1608.4 -> we're going to write console dot log, because
we're going to, because we're going to print the
1613.6 -> result on our console. Okay, and use a backtick.
We're not going to use double quote, no, no,
1620.72 -> we're not using double quotes, we're going to use
a backtick. What backtick if you want to access
1625.76 -> the backtick, look at my keyboard over here. This
is the exit key. And this is the key to write
1632 -> backticks. Okay, so you click this just once, and
it is going to print us two backticks like this.
1638.16 -> Now, we're going to pause this fruit name inside
this console dot log. So how do we do this? First
1643.68 -> of all, we're going to write $1 sign, okay, what
$1 sign, dollar sign and then curly braces like
1649.84 -> this. And then we're going to place this inside
here, but before that, we need to write something.
1654.96 -> We need to write the stocks. Okay? There's because
we're picking it for stocks, right? So stocks,
1662.16 -> then the name of our fruits, okay,
so dot F r q IDs, and then what?
1670.16 -> square brackets right square brackets over
here, and then we're going to pass this
1674.4 -> inside there, okay? Ctrl C, Ctrl, C, and
then write Control V over here. Okay,
1680.72 -> now we're going to save it. Let me show you
how the system works. Okay, so over here,
1685.44 -> we're going to write zero Ctrl F to the console,
run it, let's see, what do we get on the result?
1693.36 -> We got strawberry, you can see that the first
fruit on our stock is a strawberry right? I
1699.2 -> explained this to you right, if you can recall how
to access the stocks, we do it like this stocks
1706.56 -> dot F r u it s then square brackets and then the
name of our food, I mean the order of I mean the
1714.72 -> order of the food 0123 right. So I have placed
this inside over here. And then inside the array,
1723.6 -> I have placed this and over here I have placed
zero which means that this zero is coming over
1728.96 -> here, which eventually means that we are going to
get the strawberry, I hope you understood this.
1733.76 -> Nothing complicated. Okay, stocks dot fruits,
then this and over here you write was selected
1742.72 -> like this, then Ctrl F, clear the console, run it.
Let's see what we get. Strawberry was selected,
1751.84 -> you can see that you're gonna notice that we got
the result after two seconds. Why is that? That's
1756.16 -> because we are using a set timeout function
over here, which takes two seconds. I mean
1760.88 -> it I mean it prints a result after two seconds.
Okay, let's start writing inside our production
1767.04 -> function. Okay, so come over here, we're going
to use another set timeout function which
1771.6 -> runs in zero seconds. How do you do it? We do it
like this right set timeout, bracket and plus a
1778.48 -> function over here like this arrow function, okay.
And that is going to run in zero seconds, how many
1783.6 -> seconds? zero seconds. So right 0000. Instead,
over here, we're going to write console dot log.
1792.8 -> And write production has started. And that is
because we got the order right production have
1800.64 -> started Ctrl S to clear the console. Let's run
it. So we're going to get the result after two
1808.16 -> seconds, one, two. There we go, we have the
production has started and then strawberry was
1814.72 -> selected. Now we are seeing a or behavior over
here. Why is that we were supposed to get this
1821.2 -> one first and the production has started at the
last. That's because if you focus over here,
1826.88 -> you can see that look at the order, okay,
JavaScript runs from the top to the bottom. Okay,
1831.68 -> so it is saying that this is a set timeout
function, which means that it's going to take
1836.16 -> two seconds and this one, this is going to take
how many seconds, zero seconds, Okay, this one
1841.68 -> will be stopped, this is over here. And this coal
production will start immediately. So this is
1848.56 -> the coal production, which is production has
started over here, and strawberry was selected,
1853.6 -> this is over here. That's why we're getting
this order. But if you want to fix that,
1857.68 -> what you have to do is you're going to cut it
from here Ctrl x, and you're going to place
1862.56 -> it where inside that set timeout function.
Okay, like this look Ctrl V over here, okay.
1870.32 -> Now what will happen is, it's not going to start
the production unless the fruit was selected.
1877.2 -> Now let's save it, clear the console
and run it and let's see what happens.
1882.4 -> One, two. So you can see that after two seconds,
strawberry was selected, and immediately we got
1889.76 -> the result production has started there is because
we have said two seconds for which one strawberry
1895.04 -> was selected and zero seconds for which one
production has started like this. I hope you
1900.48 -> understood so far. Now let's look at our second
step, which is we're going to cut the fruit and
1904.96 -> it will take two seconds. So come inside the
production function, we are done with our order
1910.32 -> function, okay, you can minimize it like this. We
don't need it anymore. And don't make that mistake
1915.44 -> again. Otherwise, you're going to get the reverse
order, which we watch previously, which is we got
1921.52 -> the production first and the strawberry at the
last. Don't write it outside, okay. Don't write
1926.96 -> it over here. You're going to write it inside this
set timeout function. Okay. So you come over here,
1932.96 -> and we're going to write another set timeout.
Okay, it's gonna be two seconds, how many
1937.36 -> two seconds, set timeout, okay, brackets, and then
pass a arrow function like this. Okay, arrow sign,
1945.76 -> curly braces, and then the time function, okay,
how many seconds, two seconds. 2123, like this.
1951.84 -> And inside over here, we're going to write the
food has been chopped console, the log. Das fruit
1961.76 -> has been shot Ctrl F, the let's clear the console.
Save it. Let's run it and see what happens. One,
1971.2 -> two. Again, one, two. So we're getting the
strawberry after two seconds. We have got
1979.44 -> the production immediately. And then we have got
the fruit has been shoved after another additional
1984.88 -> two seconds. Now our system is running perfectly
fine. Now let's follow the steps and complete our
1991.36 -> ice cream production so that we can buy ourselves
a Lambo because why not? Now the third step is
1997.04 -> to add water and it takes one second how many one
seconds. So inside the production function, where
2003.12 -> will we write, we're going to write it inside
this set timeout function. So this is the parent
2008 -> children, it will be the grandchildren.
Okay, so the food has been chopped over here.
2014 -> Enter to give some spacings and you're gonna
write set timeout like this, okay, brackets,
2020.16 -> then pause the arrow function like this equal to
Okay, clearly basis. Don't worry, I know where
2026.24 -> we're going. We're going to a callback hell,
his collar callback hell, and I'm coming to
2031.36 -> the point don't wait, don't, don't panic, okay.
And over here, you write the time function, okay?
2037.44 -> 1000 seconds over here like this. Okay, and
inside over here, console dot log like this.
2045.12 -> Okay, inside over here, we're not going to write
double quotes, we're going to write backticks.
2051.12 -> That's because we have to add water and ice and
the water and ice inside our stocks over here,
2056.64 -> which is the liquid and then water ice zero and
one in order to pick them. Pay close attention
2063.6 -> to what I write over here. Okay? Don't focus on
anything else. 123 This is the third step. Okay,
2070.56 -> inside over here. backticks What backticks like
this dollar sign, and then curly braces, okay,
2078.24 -> curly braces like this, any right end over here,
okay, and then curly braces, again like this.
2085.68 -> Along with the dollar sign. Okay, you're
going to, you're going to write was added.
2092.88 -> So, if you translate, it sounds like this dash
and dash was added. So we're going to write
2100.16 -> So we're going to pick the water and ice. So first
of all, you're going to write stocks. Okay? stocks
2107.12 -> dot liquid, okay? As because it is the
name of that object, liquid and then
2113.6 -> square brackets like this. Over here
you're going to write zero. Okay,
2118.32 -> that's because it will select the water. The
first thing is the water and then we have the ice
2124.24 -> in order to pick that ice over here, okay,
we're going to write stocks, dot liquid.
2131.36 -> Okay, then square brackets, we're gonna write one
and it will pick the ice like this, okay? Ctrl F.
2138.08 -> And then we have also set it to one second.
Okay, so we're going to get it after one second,
2143.84 -> clear the console. Save it right, let's count one,
two, again, 121. Now we can see that we got this
2155.92 -> after two seconds, we got this immediately, we got
it after two seconds, and an additional one second
2162.48 -> later, we got water and ice was added, which
means that our function is running properly.
2169.28 -> Now we're gonna start the machine, it will take
one second, okay? Inside this, okay, stocks,
2176.88 -> dot liquid, I mean, where we have selected
the water and ice, okay, so inside over here,
2183.6 -> we're going to write set timeout. Okay, good.
Then the arrow function over here, curly braces.
2190 -> And over here we're going to write what the
time function okay? 1000 seconds like this.
2194.8 -> And inside here, we're going to write console dot
log. And then we're going to write the machine
2202.4 -> was started. Let's write the machine
has been started. Made the machine has
2210.4 -> been, let's write the machine was started.
Okay, Ctrl S, let's complete all of our
2218.4 -> steps and then run it together. Okay. The next
step is we need to select the container. Okay.
2224.32 -> Now, if we come over to the stocks,
you can see that on the holder object,
2228.64 -> we have a lot of options. We have the cone,
the cup and the stick. Let's pick the cup.
2233.92 -> No, I changed my mind. Let's pick the cone. Okay.
In order to do that, you can go here, okay, where
2239.44 -> the machine was started, okay. And at the bottom
over here, we're going to write the set timeout.
2244.88 -> So the cup takes two seconds, okay. So you're
going to write set, timeout like this, okay?
2251.6 -> Give some space. Otherwise, you're going to
get confused by yourself. Okay, set timeout,
2257.2 -> and then brackets. Then over here, you're
going to give that arrow sign, I mean,
2263.84 -> the arrow function and then you're going to set it
up. Sorry, the time over here. Okay, two seconds.
2270.8 -> And then you said over here, I'm going to
write console dot log, we have pick which
2276.24 -> one? The code right, let's see that where is the
code? holder? Okay. Stocks dot holder dot zero.
2286.8 -> Okay, let's write it over here. Okay, don't get
confused. It is over here below the machine. Okay,
2293.28 -> we're going to give what backticks that's
because we're trying to get something
2298.4 -> outside the function. Okay, so dollar sign
curly braces, stocks strc Ks stocks dot which
2306.4 -> one was that holder? It's your LD. That's
because this is the holder over here. Okay.
2312.4 -> Stocks dot holder and then zero. Let's come
back over here. Then we're going to give
2320.64 -> square brackets like this and then we're going
to write zero over here and then we're done.
2325.04 -> What's the next step? The next step is we're
going to select the topping ah my favorite
2328.96 -> I love chocolates whatever you comment down
below Do you like waffles chocolates or peanuts?
2335.6 -> Okay then um where was I? Oh yes, we're going to
select what chocolates okay as the toppings look
2341.04 -> stocks dot toppings we have that so don't forget
that Okay, and then we're going to pick the zero
2347.12 -> You can also pick peanuts also as well. In order
to pick that peanut you're going to write one okay
2353.04 -> stocks dot toppings dot one okay. Over here okay.
This is the holder Oh, I forgot to write okay.
2362.72 -> Which means that the cup was I mean
the cone was selected. Again selected.
2369.84 -> Or you can also write ice cream was placed on the
cone. Okay, come over here and write ice cream
2381.12 -> was placed on what the ice cream was placed on
this one which means on the cold ice cream was
2389.28 -> placed on go. Alright, so inside over here,
give some spacings and we're going to pick
2396.16 -> what the topping it takes three seconds because
we need some time to make The chocolate right?
2402.48 -> So we're here right? set timeout, okay, exact
date and arrow function like this and then it's
2410.08 -> going to take three or sorry, three seconds. Okay.
So what are we going to do? We're going to pick
2415.44 -> toppings. So console, log like this
and backticks Okay, don't forget that
2422.32 -> backticks like this. dollar sign, curly braces
and what we're going to write stocks, stocks dot
2431.04 -> toppings, we have the S at the last toppings and
then this square brackets, then write 01 through
2440.32 -> s. And what's the last step? We're going to serve
the ice cream okay. So in order to serve the ice
2445.92 -> cream come over here, okay, where we have written
this Oh, this is just plain chocolate. I forgot
2452.16 -> to write more text okay. So stocks dot toppings,
which is a chocolate was added okay? As toppings
2462.24 -> like this, okay. And over here, give some spacing,
right, another set timeout function. Okay,
2467.28 -> set timeout. And over here. We're going
to place an arrow function like this.
2474.8 -> And then we're going to set the time which takes
how many seconds to serve two seconds, okay. 2123
2482.56 -> console dot log. Then double
quotes. Serve. Ice cream
2493.28 -> Ctrl S, okay, now clear the console over here.
Now run the code. Let's see what happens. Okay,
2501.36 -> strawberry was selected production has started
fruit has been chopped water and ice added the
2506.88 -> machine was started, ice cream was placed on cone
chocolate was added as toppings. Then we're gonna
2512.8 -> serve the ice cream. Then we're going to take the
money and buy ourselves a Lambo. Yay, party. Okay,
2518.64 -> now we have completed our process, the callbacks.
But look at look at this, what have we created?
2525.2 -> Let me expand this and let me show you what
we have created. It is called a callback hell.
2532 -> Look at here Look. Look at this format of how it
is going. Okay, look, look look look like this.
2538.08 -> And then it is indeed like this. This is called a
callback hell, what is it called? callback hell.
2543.92 -> Let me show you the format. The callback hell
looks something like this. Look at this format
2548.56 -> over here. And look at our code over here.
It looks similar. It looks like this. Look,
2553.6 -> it looks like a Christmas tree. You can also call
it the Christmas tree of hell. Because why not?
2561.28 -> I know I know. I know that callbacks
are very confusing. And it is a hell.
2566.8 -> So what's the solution of callbacks, we have
promises and promises looks like this. Look.
2573.2 -> This is the promises It looks very clean. Very
neat. So let's compare again, this is our callback
2580.64 -> hell. And this is our promises. Look how clean it
looks. The thing works like this callbacks make
2588.4 -> relationships, parent children, grandchildren,
grand grandchildren, grand grand grandchildren,
2594.56 -> grand grand grand grandchildren, it was
relationship like this. So what what what
2599.68 -> promises do is it takes instructions like this,
first do this, then this, then this, then this,
2605.52 -> then then then then then it works like this. Which
means that you can keep your code very neat and
2611.04 -> clean. So far, so good. Let's start discussing
our promises. In order to understand the promise,
2617.44 -> first of all, you need to understand the promise
cycle. So this is the diagram I made about
2622.88 -> the promise cycle. First of all, a promise is
made, what promise do we make to our customers,
2629.52 -> sir, we promise that we're gonna serve you
ice cream, what ice cream, we promise we're
2635.28 -> going to serve you ice cream. So there are two
parts of this promise, either a truly fulfilled
2641.04 -> or it will get rejected. Okay, so here, first of
all, it comes to this stage, the pending stage,
2648.72 -> every customer when they come into our shop, we
promise we're gonna serve you ice cream. So our
2653.92 -> customer interests, our shop sits on the table
looks at the menu, and he or she didn't order
2659.92 -> anything. He's there sitting over there. This
stage is called the painting stage. He didn't
2665.2 -> order anything just sitting over there. So this
is the pending stage, nothing is happening.
2669.6 -> We then take the order, we didn't start the
production. Okay. And now let's say that
2676.4 -> the customer has placed an order he wants mango
ice cream. If we have the mango on our stock,
2683.36 -> then we can go to the next stage, which is we can
resolve the promise, which means that we can serve
2689.84 -> ice cream to our customer. But if we don't have
the mango, then what will happen is we have to
2694.4 -> reject him by saying Sir, we don't have mango at
our stocks. We're very sorry. So let's say that
2700.64 -> we have mango on our stocks, what will happen
is, is going to get resolved, first of all,
2705.36 -> and then after that, what will happen is we have
seven steps to make ice cream, right? Yes or No,
2710.72 -> we have seven steps to make ice cream, and it
will follow like this, first of all do this,
2716.56 -> then this, then this, then this, like this
intro, there are seven dents or six dents,
2723.52 -> depending on the circumstances, depending on the
situation, don't worry, we're gonna write code
2728.56 -> and see how this thing works. Once that's
done, we can serve ice cream to our customers.
2733.36 -> But let's say that we didn't
have mango, what will happen is,
2736 -> we have to pass through this reject stage. And
then over here on this catch, we're gonna write a
2742.24 -> sorry, note, we're gonna say, sir, we're
very sorry, we don't have this on our stock.
2746.88 -> We sincerely apologize for the inconvenience.
And once either we get resolved,
2753.6 -> either our promise gets resolved or rejected, this
finally will always run, let's say that we serve
2760.64 -> zero customers. At the end of the day, we have to
close our shutters. I mean, we have to close our
2766.24 -> shop. But let's say that at the end of the
day, we serve 100 customers, 100 customers,
2772.72 -> we still have to close our shop, right? Because
the employees has to leave, we have to leave.
2777.6 -> This is the finally handler, don't worry,
we're going to discuss all of them in details.
2781.84 -> Once you have understood this promise cycle, we
need to understand for more things, don't worry,
2786.4 -> this is very short. First of all, we need to
understand the relationship between two things,
2790.8 -> time and work, what time and work. Because
we have this list over here, you can see
2796.56 -> that first of all, we have the work and then
the time. That's why those two relationships.
2802.56 -> The next thing is the promise chaining. What
promise chaining is, if you come over here,
2807.92 -> you can see that we are doing all the steps
through then then then then this is the
2812.24 -> promise chaining. Okay, so first of all, we get
resolved, okay, and then it comes over here,
2818 -> then we return it First of all, resolve, then
return, return, return return like that, don't
2824.48 -> worry, we're gonna write code and explain, and I'm
gonna explain that to you. All right. So this is
2829.2 -> a promise chaining, the error handling part is
this one. Look, this catch handler is the error
2835.12 -> handling part when we have a reject. All right,
and the final handler I told you earlier, right,
2841.6 -> this is the final handler handler is gonna
run whether we serve zero or 100 customers,
2847.92 -> I mean, whether our promise gets resolved or
rejected, or I then come to your code editor
2853.28 -> over here, delete everything except your stocks.
Variable over here, and you clear the console over
2860.08 -> here. Okay. Now, the first thing is the absolute
first thing is we're going to create a variable
2865.92 -> named is shop open, follow me. Let is underscore
shop underscore open, okay, equal to true.
2876.4 -> So what this is holding is, we're asking
the question is our shop open or closed? If
2882.48 -> it is true, we are serving ice cream. If it is
closed, we're sorry, sir, we are closed. Okay.
2889.04 -> Now we're going to create a function, an arrow
function with the name order like this, let
2896 -> order equal to brackets over here, then equal to
arrow function. Now what we're going to do is,
2904.24 -> remember the relationship between time and
work that I told you earlier, we're going
2908.16 -> to write time and work over here, okay, time
over here, and work over here. You can also
2914.56 -> shift the positions you can write work first and
then time, it totally depends on you. And the next
2920.72 -> thing is we're going to make a promise. First, we
made the order then we made the promise sir, we're
2926 -> going to serve you a stream like this. Follow
me. First of all, you're going to write return,
2932 -> okay, new, then capital letter P, what capital
letter p, p, r o m i s e promise like this look,
2941.28 -> then brackets, you a little bit of space so that
you can understand what we are writing. Okay,
2946.4 -> over here, we're going to give brackets over here
again, we're going to create a arrow function
2951.76 -> look like this, okay? Like this. We've made
a arrow function over here. Now, press Enter.
2959.68 -> Now, inside this bracket, we're gonna
pass two arguments resolve reject,
2965.92 -> which means that we have how many stage
three stages, pending resolve, reject,
2971.36 -> we're gonna write resolve, reject, we don't
need the pending. Okay? Now, right resolve,
2978.8 -> like this resolve like this. And over here, you're
gonna write, reject, reject like this. Okay, so we
2984.96 -> made a promise. Now it's time to run that promise.
Okay, now we have two stages, resolve and reject.
2991.84 -> Let's write an if else statement. So right. If
is shop open, which means If a shop is open,
3002.08 -> then we're gonna resolve it like this resolve,
which means that we're gonna serve ice cream
3009.6 -> that our shop is open. Welcome, sir, we're gonna
serve you ice cream, how are we gonna serve our
3015.92 -> ice cream, we're going to write this work. You
see this work over here, we're gonna write this
3020.48 -> work over here, like this. Look, we pass the work
over here, which means that when the shop is open,
3028 -> when our customer came, we're gonna say sir,
we promise that we're gonna serve ice cream.
3032.32 -> As long as we have all the stocks and the raw
materials, then we're going to start working.
3038.24 -> Alright, now if our shop is closed, then what will
happen we're going to write an L statement over
3043.28 -> here, okay, curly braces. And over here, we're
going to write one reject, reject like this. And
3049.44 -> you close it like this, I mean, the brackets
and over here, you write console of sorry,
3056.4 -> console dot log, like this, okay. And over
here, we're going to write our, sorry, our
3064.32 -> shop is closed, okay? Like this. So far, so good.
Now, you can see that we have formed relationship
3072.08 -> between with just work Look, this work is over
here. But we also need to form relationship
3077.84 -> between time also along with work. So what will
we use, we're going to use a set timeout function,
3084.08 -> so that we can form the relationship between our
time and work. Follow along with me, okay, so
3090.32 -> below this if statement, right, set timeout,
okay. And then brackets over here form a
3097.68 -> arrow function like this look, okay, arrow
function like this. And then what you're
3103.68 -> going to do is you're going to put a comma
over here, comma, we're going to pause this
3108.08 -> time function, I mean, the time word over here,
which means that every time we need to write
3114.4 -> the order function, we're going to place
the time and the work. Don't worry, we're
3118.48 -> gonna write it. And then what you're gonna do is
you're going to cut this result from here, Ctrl x,
3124.64 -> okay? And then you're going to paste it inside
this arrow function. Now what will happen is,
3130.8 -> is going to form a seal after 1234567 we have got
seven steps. Now save this code. Let's test it.
3141.2 -> Okay, so what is the name of our function? It's
order, okay? So come on at the very bottom over
3146.72 -> here, right order. Okay, now brackets. Now look
at the first thing, what is it? First thing is
3154.16 -> the time and then the work. So how you are going
to define this follow along with me. The first
3160.4 -> thing is time. Okay, so let's look at the chart.
So this is our chart, which carries all the steps.
3167.04 -> First thing is we need to place the order Okay,
it's gonna take two seconds, in order to write
3171.36 -> that first of all, we're going to give the time
Okay, you're gonna write two seconds, like this to
3175.76 -> 123 2000 milliseconds and then a comma, comma like
this. And now we're going to create a small arrow
3181.92 -> function, look at this. Okay? And then the arrow
sign. If you write the statement in a single line,
3188.88 -> you don't have to put these curly braces, you can
just use directly like this console dot log. Okay,
3196.4 -> first of all, we're going to select the fruit
in order to select the foot. What do you need?
3200.32 -> backticks? What backticks like this, okay,
then dollar sign curly braces like this. So
3206.88 -> what's the name of our stocks? There's one
Okay, stocks dot fruit. Let me check fruits,
3214.16 -> yes, stocks, dot fruits like this. And then
we're going to pick the strawberry, okay, zero.
3223.84 -> This has square brackets and then zero like
this. Now let's test it Ctrl S and then
3232.24 -> the console, save it and run it like this. After
two seconds, we're going to get the result One,
3239.36 -> two. There we go. We have struggled over here.
Now let's complete this by saying that strawberry
3246.4 -> was selected, okay. Ctrl S, let the
console run it. One, two. There we go.
3256.4 -> We have our strawberry was selected. I hope you
understood the relationship between the time
3260.8 -> and work function. This was pretty simple. Now
let's start discussing about the promise chaining
3266.16 -> which is this one over here. That then then then
then part first you have to do this, then this
3273.04 -> then this, etc. Let's come back to the VS code
over here and at the very bottom, if we want to
3278.56 -> work with the promise chaining you cannot have
anything between the first call of the order
3285.04 -> and then your then handler
like this. If you want to
3288.8 -> do promise chaining you have to do
this dot then Okay, then dot then
3296.08 -> dot, then so on and so forth of me a spelling
mistake My bad, then you cannot have this
3302.64 -> semicolon over here, okay, so just remove the
semicolon from there. Okay, now it's going to work
3307.36 -> perfectly fine, you can have 100 lines of spaces
like this. And it's still going to work like this.
3314 -> But for this tutorial, I'm going to have just two
spaces so that it can look very good and tidy.
3321.28 -> Okay? So, like this, look at that. It looks
quite good. And now in order to write, I mean,
3328.08 -> in order to given instructions said that then,
let's look at our chart. So this is the chart,
3334.16 -> which carries the steps. What is the
next step, we need to cut the fruit,
3338.16 -> and it's going to take two seconds. Okay,
now come back to code pen and over here,
3342.64 -> before cutting the fruit. Let's give a call
to start the production. How do we do this,
3346.88 -> first of all, write an arrow function like this
looked, okay, arrow sign, you can also write it
3352.88 -> in a single line, but I'm gonna give curly braces
over here, and then you're gonna return it,
3359.36 -> you have to return it otherwise it's not
gonna work. The first part is resolve, then
3365.28 -> return, return, return, return, return, so on
and so forth. If you don't write the return over
3371.36 -> there, then it's not gonna work. Okay, follow
along with me, right return over here. Okay?
3376.16 -> Then order. What was that order the name of our
function, okay, like this look, and then you're
3382.16 -> going to place what time first, in order to start
the production, it takes zero second 0000, comma,
3392 -> and then you're going to write a function
over here, okay? arrow function like this.
3397.52 -> Console dot log, like this. And then we're
going to write over here, production has started
3404.24 -> production has, sorry, started. Okay, save it, and
then we're gonna clear the console. Let's run it.
3415.28 -> So we're going to get this one after two seconds.
And this one immediately One, two. There is our
3421.84 -> strawberry was selected and production has started
it will took two seconds, and this one took just
3427.84 -> zero seconds. Okay, now let's write the next
step. What was the next step we need to chop
3432 -> the foot? It takes two seconds, I'm in cut the
foot. Okay, let's follow the same process. Okay,
3438.16 -> over here, you're going to write an arrow
function like this equal to then this arrow
3443.92 -> sign curly braces right over here. What return
what was it return? Return like this. Okay, order.
3453.44 -> We're going to write 2000 over here, which
means two seconds. Okay, it goes to like
3458.72 -> this then console dot log. What was it? We're
gonna cut the fruit okay? The fruit was chop
3471.12 -> sorry Ctrl S Okay. There we go. Following
this chart, let's complete our process. Okay,
3480.56 -> next is we have to add water and
ice let's go and do it. So over here
3484.88 -> we're going to follow the same process.
Let's actually copy this code from here Okay,
3490.72 -> no
3492.8 -> let's not copy the code Okay, let's just
do it manually so that you can learn it
3496.64 -> okay follow along with me arrow function
over here okay. We there we turn
3504.64 -> order is going to take how many seconds one
second okay 1123 Okay. Then this sign which is
3515.6 -> the error function given curly braces over here
okay. And inside of a hearing right console
3522.4 -> dot log. What was it backticks Okay, then dollar
sign curly braces that is because we need to
3529.2 -> select what our liquid which is water and ice
okay stocks dot liquid come at the very bottom
3535.84 -> over here right stocks dot liquid like this
and then zero in order to select what the water
3544.64 -> okay and over here right and again you
write dollar sign curly basis stocks
3551.52 -> dot liquid. And then what was it one? Okay. So
water and ice was selected like this. There we go.
3562.88 -> And remember this this is very crucial. You
cannot have semicolons between dens okay? Remove
3569.28 -> this semicolon from here I mistakenly wrote it
okay. space and over here we're going to write
3575.68 -> then. brackets, arrow sign like this. curly
braces. What's the next step? Let's see. We start
3584.16 -> the machine in one second. Okay. So right read
terror, sorry, return border square bracket. Then
3598.64 -> first of all need to write That time,
okay, one seconds, like this arrow sign,
3605.36 -> like this. Console dot log.
Start the machine, like this.
3617.68 -> Next step is we need to select the
container, we're gonna select the cone,
3621.04 -> okay? In order to do that, come here,
then. Okay, then arrow function like this
3628.4 -> return order. It takes how many seconds? Two
seconds to select a comb. Okay. Sorry, my bag of
3638.72 -> then the arrow function over here. curly
braces inside you're gonna write console.
3644.64 -> log. What was it? backticks Okay, then dollar
sign curly braces over here the right stocks
3653.6 -> dot which was it? Let's see. Top n a holder holder
and then zero because the cone is over here. Okay.
3661.6 -> At the very bottom, holder issue LD
are like this. square bracket, zero.
3669.2 -> Okay, then you're going to write was ice cream was
placed on this holder. Okay, so ice cream placed
3680.24 -> on it translates to ice cream
placed on comb. Okay, next step is
3686.64 -> select toppings. We're going to pick chocolate dot
then Okay, then this side, I mean arrow function,
3696.48 -> return. Return order. Three seconds because
chocolate takes time to melt right? So equal to
3708.32 -> arrow function, then console dot log. Then
inside over here backticks. Okay, when
3715.76 -> backticks Okay, don't forget. dollar sign,
curly braces. And we're here you write stocks
3723.36 -> dot toppings, d o p i n g s, don't forget the last
s droppings and then square brackets over here
3732 -> we're gonna write zero. Chocolate was selected
like this. So we're almost done. Then we're
3739.2 -> going to serve the ice cream serve ice cream
we're going to write dot 10. Okay, like this.
3748.16 -> Return order, right how many seconds is gonna
take is gonna take two seconds Okay, equal to
3756.88 -> three races. We don't need curly braces Actually,
we can write it directly ok 123 like this. Like
3766.72 -> this equal to this sign the arrow function and
then console dot log. Okay, double quotes icecream
3778.4 -> was served Ctrl S There we go. completed our
process now let's run our code before that
3785.76 -> clear this console. Run it let's go strawberry
your selected production has started the food
3792.64 -> was chopped water and ice added start the machine
ice cream place and co then where is the chocolate
3799.28 -> there is our chocolate chocolate was selected
ice cream was served. He was the money and let
3804.64 -> us buys the Lambo Yay. Now is now it's time
to understand the error handling part, okay,
3812 -> which is this one over here the catch handler
in order to understand the catch handler,
3816.56 -> comment a variable bottom over here, okay,
and he right? Or don't forget to remove
3821.76 -> this technical form here. Otherwise, it's not
going to work, right dot catch like this, okay,
3828.32 -> like this, then write an arrow
function like this, okay,
3832.08 -> equal to curly braces like this. And over
here, right console, the log customer left
3842.56 -> like this Ctrl S and then cleared
the console. Now this catch will
3846.72 -> only work when our promise is rejected. I mean,
when we cannot serve ice cream to our customers,
3853.28 -> then this sketch, then this sketch will work.
Let me show you. Okay, if you can read if you
3857.68 -> can remember this variable at the very top over
here below the stock, which is his shop open.
3864.08 -> It is true, let's convert it to false and let's
see what will happen theoretically theoretically,
3870.24 -> then we're going to run this code Okay. Let's
see. We have this if statement over here.
3875.6 -> It will run when the variable is true,
but it is false which means our shop is
3880.88 -> closed it look at here else reject our
shop is closed. So false and then this
3889.6 -> this code will be run first and then
at the very bottom we have the sketch,
3895.36 -> then this line of code will run and these things
will not run this All then then then it will not
3901.76 -> run. Let's do a test run it and let's see
what happens okay so our shop is closed
3907.76 -> the first thing we're going to get is our
shop is closed look at this message over
3912.24 -> here inside this reject statement look our shop
is closed and then on the way bottom look at this
3918.48 -> is catch handler customer left We're very sorry
this left the left us look the customer left.
3926.08 -> We're not going to make the money we can't
buy the Lambo We're very sorry. Alright then
3931.6 -> I hope you understood this catch I mean the
error handling part with the catch handler
3937.12 -> let's now understand this finally handler I told
you earlier that is this will run whether our
3942.56 -> promises resolved or rejected it will run anyways.
Okay, now let's look at this example. But first,
3950.16 -> remove this semicolon otherwise it's not gonna
work okay then dot finally like this. And inside
3956.72 -> over here we're going to write what Tell me
arrow function take like this equal to this sign
3962.16 -> curly braces like this. We're gonna write console
dot log like this and inside over here we're gonna
3968.08 -> write our shop is closed. Now let's write day
ended shop is closed Okay, dead end dead shop
3979.04 -> is closed like this Okay, let's say we remember
what state is it in our shop is closed which is
3986.08 -> false. Okay, let's run it in this way. You can
also run it in through let's look at our shop is
3993.92 -> closed This message is coming from this rejects
statement over here customer left is coming from
4000.56 -> this statement over here this catch handler okay
and this day ended shop is closed it's coming
4006.56 -> from this finally handler let's set it to true
and let's see what will actually happen without
4012.72 -> finally handle okay Ctrl S run it to
the console and let's see what happens
4018.96 -> okay we got this statement then this then water
nice edit then this is completion code then my
4026.72 -> favorite part is the chocolate Yay. And then ice
cream was served day ended shop is close look
4032.4 -> at this look look at the various day ended
shop is closed is coming from this finally
4037.12 -> handler so what did you understand? It will
run whether our promises resolved or rejected.
4042.88 -> And with that we finished our discussion with
promises everyone please welcome async await Yay.
4050.72 -> So this is actually proclaim to be a better way to
write promises. Let's go and dissect async await
4057.76 -> but first you take a break because it really
deserves a break in order to understand the async
4063.2 -> await first of all learn to know the difference
between the promises and async await let's look
4068.4 -> at an example. Come back to VS code I mean code
pen delete everything except our this part okay?
4077.92 -> Keep the shop and stocks okay now in the promises
part How did we make a promise like this look?
4086 -> function Let's name it order okay order like this.
Okay, no, we actually didn't write it like this My
4094.56 -> bad we wrote it in the airway function I mean the
arrow function to let order equal to this equal to
4104.72 -> arrow sign curly braces like this and in order to
make the promise we wrote what return new promise
4111.28 -> return new my brand new capital letter P r o m
i s he promises like this and then inside these
4119.6 -> brackets we wrote another arrow function like
this okay and inside here we wrote resolve reject
4130 -> like this Okay. And then he said over here what we
wrote if statement Okay, then this one and inside
4136.72 -> over here. What did we rewrite? What did we write?
We wrote the result like this, okay. Look at this
4143.28 -> and over the else statement. What did we write?
Okay, they wrote the reject over here. Oh, my bad.
4151.44 -> JACK like this. Okay. We wrote it like this.
This was the promise. What how do we write the
4158.72 -> async await? Look at this blog look, right first
of all the async keyword what the async keyword
4167.84 -> is sink. Okay, you write the function order.
Okay, this and then the curly braces. And there
4176.24 -> we go. We made ourselves a promise. How simple
is that? But wait, the story doesn't end here.
4182.08 -> We need to understand two more things, the try
catch handler and how to use the await keyword.
4188.56 -> So this is the async keyword, we need to
understand the await keyword. Let's dive
4192.88 -> in. Now let's come back to our code pen and
understand the difference between the promise
4200.56 -> And our async await only then we're gonna
understand the try catch. Okay? Come over here and
4206.56 -> see this if an else statement, what did we write?
How did we make the promise we made this promise
4212.96 -> like this first of all, we load the function over
here, and then return new promise, then resolve
4218.96 -> reject. And then we wrote The if statement, which
is if this is true, we wrote this tr, e true,
4225.28 -> okay? Then it's going to resolve it. If it is not
true, then it is going to reject it like this.
4230.88 -> This is how we make the promise. And then what
did we do? Okay, we comment this is like this.
4237.12 -> Let me actually finish with the promise part. Then
we're going to come to the async JavaScript part.
4241.84 -> I'm an async await part. This is the order right?
How did we write it? order? Okay, order. This is
4248.4 -> our first start. And then what did you write?
dot then? Okay, dot, then dot, then. Oh, sorry,
4259.76 -> my bad. And then what did you write? And then we
wrote dot catch, catch. TC CIT, C of I forgot my
4269.2 -> bad ca tch catch handler and then the dot finally
handler, okay, so this will work when, what,
4279.2 -> if our promise was resolved, this will work
when it is rejected, this will work anyways,
4286 -> is still going to work even if it was resolved or
rejected. But in terms of this async await, let's
4293.92 -> actually test it with this how this works, okay.
Don't worry about this one. Let's comment this.
4299.44 -> We're gonna return over here. Okay, don't worry.
Comment this like this and come over here. So
4304.32 -> first thing is if we want to declare, I mean, if
we want to work with promises in the async await.
4311.36 -> World, then what we have to do is we have to
declare this async word before the function
4316.16 -> I showed you a little while ago, right? And then
inside over here, you have three options. I mean,
4322.32 -> three things to write, try, get. And finally,
what do we try to get final over here we wrote
4330.96 -> what the if else statement, and over here
we're going to write try, catch Finally,
4336.32 -> following the right cry over here.
Okay. Go your braces like this.
4340.64 -> And then you're going to write the catch, okay.
And brackets over here. You write error. Okay.
4347.36 -> curly braces. And over here you write.
Finally like this. Okay, then curly braces.
4353.2 -> So what does this finally does it? It runs
code anyways, okay, let's write it. Okay. Don't
4357.68 -> worry. We're going to test it. Okay. Console dot
log, runs code any way. Okay. Inside this catch
4366.8 -> handler. I mean, let's start with the try. Okay,
let's create a fake problem. What problem fake
4372.24 -> problem over here we're going to right away, don't
worry about a word keyword I'm going to discuss
4377.44 -> in detail about this await keyword. Okay,
it's coming. Wait, you're right. Anyway, ABC.
4383.84 -> So this ABC is actually pointing out to a function
which doesn't exist. I still wrote it because it's
4391.28 -> a fake function. What function fake function
okay? So in fact, this catch handler, what we're
4397.68 -> going to write is console, the log like this and
over here, we're gonna write ABC doesn't exist.
4406.72 -> exist, okay? And this error is actually
written like this coma arrow. Okay.
4414.48 -> For now, we don't need this error part, but we're
just keeping it over here as it is, we just want
4419.68 -> to work with our try catch this console log and
this Finally, in this Finally, handler in order to
4428.08 -> understand the main theory of the async await,
okay, so you clear the console here. As I told
4434.48 -> you earlier, this aways ABC I mean, this ABC
part doesn't exist look at the entire code
4440.4 -> field. Nothing exists which is named ABC right?
So in order to run this first of all you need to
4446.72 -> provoke it like by saying order at the
very bottom over here right order okay?
4452.56 -> My bad sorry, like this Ctrl S and let's run it
and let's see what happens there we go. We got
4460.16 -> the message. First of all, ABC doesn't exist
because we don't have anything named ABC. Then
4468.24 -> it then we have run scope. Anyways, look at this
the finally handler Do you remember this Finally,
4475.52 -> from the promises, this is over here, it will
run code anyways. By the way, do you remember
4481.52 -> this handlers this then catch finally handlers,
you can also use them inside I mean, outside the
4488.48 -> async await system as well. Let me show you a
demo. Okay. You right at the bottom of the order
4494.56 -> after removing that semicolon, but then like this,
okay brackets, then create a Arrow function like
4502.24 -> this and over here you write console dot log then
write anything you wish I'm gonna write like this
4510.56 -> My read I read I don't I cannot think anything of
good right now Ctrl F clear this run it like this.
4519.04 -> There we go. We have got that then handler it
is pending over here. Okay? First of all we
4525.76 -> got that error and then the final is going
to run anyways Okay, so that is over here
4531.44 -> and then that then what will happen after our
promise is resolved is going to do this part over
4537.6 -> here. And you can also use those then cat finally
etc. After here is the chaining part. Okay,
4545.36 -> I hope you understood this far. Now let's do a
small test and understand that a weight keyword
4550.4 -> let's say that I am the chef of the
restaurant, okay, just look at me.
4554.24 -> I am the chef of the restaurant. Okay, I make ice
cream. I took the order from the customer and I'm
4559.84 -> making ice cream okay tu tu tu tu tu my bed sorry.
Okay, so I'm making ice cream over here but I then
4565.76 -> realized that my customer didn't tell me which
topping would he like so I have to go outside the
4571.52 -> kitchen ask the customer sir which stuffing
topping would you like chocolate or peanut?
4577.68 -> There he is going to give me the order. Give me
chocolate and then I have to return to the kitchen
4584.56 -> and start working. Look how the process
is working. I am going outside which means
4589.36 -> that the kitchen is being stopped completely
without the chef the kitchen doesn't work.
4594.64 -> But realize this that there are other employees at
the restaurant who is working who is cleaning the
4601.52 -> tables, cleaning the dishes, taking orders, etc.
Everything else except the kitchen is working.
4610 -> This is where we use the await keyword. Let's do
a C test and understand about this await keyword
4616.64 -> in details. Let's start now come back to corporate
Now come back to code pen and remove everything
4622.88 -> except the stocks and the East shop open. Okay,
remove everything like this. Goodbye forever.
4629.76 -> Okay, now what we're going to do is
we're going to create a function what
4633.44 -> a function which run arrow function. Okay,
let, let's write toppings choice, okay.
4643.84 -> Which will add to the customer. So which topic
would you love? Okay, it was blue my bed equal to
4650.16 -> bracket. This sign is the arrow sign and instead
we're here we're going to make a new promise what
4655.12 -> new promise. Okay, so return new promise like
this. And we're here we're going to write,
4664.16 -> resolve, reject, don't worry, I'm coming on the
async await part. Okay. So equal to arrow sign
4671.76 -> curly braces and over here what we are going to
write come on to me resolve reject. Resolving
4678 -> My bad. We check like this. Okay. Now over here,
what are we going to do? We're going to create
4684.72 -> a set timeout. Let's say that the asking
process takes how many seconds three seconds,
4689.92 -> how many? Three seconds. Okay, in order to do
that, we're going to write set timeout, okay,
4694 -> for three seconds. So write set timeout like this,
okay? And then what we have to write is Come on,
4700.56 -> tell me arrow function. Okay, like
this. And then we're gonna set the
4705.76 -> time, how many seconds, three seconds.
3123. All right, now inside over here,
4711.12 -> we're going to write console dot log console. dot
log. We're here right? Which stop being you love
4722.48 -> of my read. Like this. Remove this console. From
here. Clear. Okay, Ctrl S. Now we made a small
4730.08 -> promise that we have to go outside the kitchen
x our customer, what would you love to have
4735.52 -> as a topping. Now at the very bottom, what we're
going to create is function a sync function is
4743.96 -> sync function. We're going to write what brackets
are. We also have to give it a name. We're gonna
4748.88 -> name it kitchen. kitc HTN kitchen over here, and
then curly braces over here like this. Now follow
4757.2 -> along with me. We're gonna write console dot
log five times A, B, C, D, E, like this, okay?
4764.16 -> console dot log. Okay, like this.
Ctrl C, one of my red 2345. Okay, now,
4777.28 -> we'll get right over here. Ah, don't worry. I'm
going to explain that why I wrote ABCD My bad. T.
4793.28 -> Hey, okay. Now what we're going to do is, let me
actually explain why I wrote this ABC and all the
4799.76 -> spots. Okay, the thing is, these are the steps
we're walking into. I mean, we're working at the
4804.24 -> kitchen. Okay, we're making ice cream. We're
following the steps 1234 and the very mill,
4809.68 -> we just realized which topping would our customer
love. Okay, so we have to go outside the kitchen.
4814.56 -> What? Outside the kitchen, ask him. So what
did you love to have? So this is our kitchen,
4820.16 -> we're inside over here, where where we're inside
this kitchen, we're working. Now we need to go
4826.08 -> outside and come to this toppings choice, which
is the where the customer is sitting asked him.
4832.8 -> So what would you love to have. And then once
we have got the data, we're going to come back
4838.24 -> to our kitchen, start working and then serve
Him. In the meantime, what will happen, others
4843.84 -> other works like cleaning the dishes, cleaning
the table, taking other customers orders will
4849.76 -> keep running. Don't worry, I'm coming to that
part. Okay. Now what you're going to write is at
4854.56 -> the very middle over here, you're going to write
a wait, then what the name of this function What
4860.24 -> is this toppings choice Ctrl C, that one Ctrl
V, and then brackets, close it on. And then
4867.76 -> what we're going to do is in order to provoke
this function, we're going to come over at the
4871.6 -> very bottom over here, you're going to write
kitchen, what kitchen it's like this, okay?
4878.96 -> And then we're gonna define other task, which is
happening except myself. I'm the work on the chef.
4885.12 -> Okay, other words? What cooking? I mean, sorry,
cleaning the dishes. Cleaning the table. The other
4892.64 -> quarters? Let's write them. Okay. Console, the
log? cleaning my bag. sealing the dishes console,
4905.2 -> the log like this conference. I mean, this one
Ctrl C Ctrl. V, then what? Cleaning the tables?
4917.12 -> Actually, you right doing the dishes? It
sounds good. I guess. doing dishes dishes,
4924.96 -> cleaning the table. And then at the bottom,
we're going to write taking others order
4933.28 -> like this. Okay. Ctrl S. Now, let me
theoretically explain you before running the Run
4939.6 -> button that what is actually happening. Okay,
so I'm working over here. Okay, I'm making the
4945.2 -> ice cream. And then I realized that I didn't
have the necessary direction which topping
4950.56 -> would my customer love. So I'm physically
going outside the kitchen to ask the customer
4956.88 -> what would you love to have, which means that this
entire process is stopped, my kitchen is stopped,
4962.48 -> nothing is happening because the chef is outside.
And in the meantime, other work like this one
4969.52 -> will still happen like doing the dishes, cleaning
the table, taking others orders. And once a return
4976 -> to the kitchen, this to work D and E will work.
Let's run it and let's test what will happen.
4984.32 -> Okay, look, a B, C, doing the dishes cleaning the
table taking others orders. Which topic would you
4992.72 -> love? Oh, we didn't actually get the D and D.
That's because I actually forgot something.
4998.64 -> I forgot to write the resolve over here. And
without reading the resolve, it's not going to
5003.44 -> return our other tasks. Okay, so come over here on
the toppings choice Okay, or and inside over here,
5009.92 -> you're going to write V zoolz. Like this bracket.
And inside the brackets, we're going to place this
5017.36 -> console over here. Okay. Ctrl x, my apologies.
I actually forgot to write that part and Ctrl S
5024.88 -> Okay, now clear this and run the code and let's
see what actually happens. Okay. Oh, I actually
5031.04 -> have an error. I don't know why but let's check
it out. Okay, console log. Which dropping my bad.
5046.8 -> Like go like this Ctrl S. Let's see what happens
right now if you had a console like this.
5053.04 -> Now you can see that we have fixed our error
over here we have written the result over here
5057.36 -> and we have replaced the console log inside this
5060.8 -> line over here now it's gonna work perfectly
fine. Let's run the code and see what happens.
5066.96 -> There we go. We have ABC doing the dishes,
cleaning the tables taking other orders which
5072.16 -> dropping Do you like and then we have other works.
What is happening Let me explain again. So what is
5078.24 -> happening look here in the kitchen, I am working
in the kitchen, where am I working in the kitchen.
5082.64 -> So these three tasks are done. Then I remember
what topping does my customer likes. So I'm going
5088.64 -> outside and asking him in the meantime others are
working look, other people are working over here.
5095.44 -> If there was 100 tasks, they would have worked.
They would have been working On those tasks,
5101.28 -> okay. So once these tasks are done in the
meantime what I have done is I have gone to
5107.12 -> the customer action to the data returned to the
kitchen and I started working then D and E is
5113.68 -> completed on this bottom over here you can see
that, I hope you understood the await keyword.
5120.4 -> I hope you understood the resolve keyword.
Let's reopen our shop and welcome customers.
5125.76 -> Okay, now come back to code and delete everything
except this one. And this one, okay, like this,
5132.4 -> follow along with me delete goodbye. And
over here, what we're going to write is
5137.36 -> first of all a time function because we need to
set the relationship between time and work right?
5144 -> So you write a function, okay, time, and right
over here, MS, which is milliseconds, okay.
5151.52 -> curly braces like this, we're going to
create a new promise. Okay, return, Neil.
5158 -> Tom is don't worry about the async await I'm
coming to that part. Okay, capital letter P,
5163.28 -> not small letter p, r, O, and my se. And
then you said over here we're going to write
5168.96 -> the resolve and reject part resolve. And the
reject part, the check like this, and arrow
5177.52 -> function, my bad arrow function over here like
this. And then the if else statement like this,
5184.56 -> if our shop is open, is shop open look at this
is shop open, and then we're going to write what
5192.24 -> we're going to create set timeout. Remember
this set timeout like this, and over here,
5199.36 -> we're forming a relationship between our time and
work okay, so inside here, we're going to write
5204.4 -> the result we are passing this result over here,
which means that we're setting the relationship
5209.52 -> between the time and work okay. So resolve over
here and then that Ms part should be over here,
5217.04 -> m s like this, at on the L statement, e
l s statement. So what this will do is
5224.72 -> it will notify us when our shop is closed, I mean
when is shop open, set to false, okay, like that.
5232.8 -> So we're gonna write reject, like this. Instead,
over here, we're gonna write console. Console,
5240.56 -> dot log, like this. And we're going to
write, shop, my bag is closed Ctrl S. Now
5250.88 -> we're going to write an async function named
kitchen to start our production inside there.
5256.48 -> Okay, come at the very bottom of before that you
clean the console because it looks quite dirty.
5261.52 -> Okay, so now you're going to write a sync, like
this function create the kitchen, okay? Okay,
5269.36 -> it CH, E and kitchen like this curly braces, like
this over here. And then we're going to write cry,
5278.16 -> okay, like this, then catch, like this. And
if you want, you can also write the Finally,
5285.12 -> that's completely up to you, but I'm gonna write
it because a lot of you don't really understand
5289.76 -> how to work with the try, catch. And finally,
I'm going to explain everything in details.
5293.76 -> Don't worry about it. Okay. And over here, I
actually forgot to write brackets and arrow,
5299.44 -> like this. All right. And now in order to run
this, what we have to write is at the very bottom,
5304.48 -> we are right the kitchen, which is the trigger
kitchen, like this, okay, Ctrl S. Now let's
5311.84 -> actually test a function to check whether if it's
working or not, so come on in this catch handler,
5318.08 -> and we're going to write console dot log like
this. We're going to write customer left, okay,
5326 -> customer, left like this and over here and
right arrow like this. And inside over here,
5333.44 -> what we're going to write is shop is closed. Okay?
console. log. de endet. shop is closed. Okay. Now,
5345.12 -> what are we going to write inside this
fry handler? Let's see. Okay, one by one.
5351.76 -> If you remember this chart, the first thing
that we need to pick is the order I mean,
5355.52 -> the fruit name. Okay, so come back
to our code pen over here. And
5359.84 -> we're going to write console, log log,
and then backticks. Don't forget that
5366.48 -> dollar sign curly braces like this.
And then we're going to write stocks,
5370.4 -> like the stocks dot fruit, f r u, it s, and
then we're going to pick the strawberry zero,
5377.04 -> or you can pick anything you wish from this list
of stocks, okay? You can pick grapes, banana, etc.
5384.4 -> Alright, now what we're going to do is,
remember this, we have two seconds of time,
5389.12 -> how are we gonna define the two seconds over
here? In order to define the two seconds? Do
5393.84 -> you remember this function over here, the time
function? We're gonna utilize this look at here,
5399.52 -> look Write a wait. And then what the
name of this function time, okay,
5406.08 -> time over here. And then we're going to
set it to how many seconds, two seconds
5410.8 -> to 123 2000 milliseconds means two seconds. Now
let's test that code. Okay, as our shop is open,
5418.32 -> now it's gonna give us what resolve you can this
is going to get resolved. Okay, let's run the code
5426 -> and see what happens. So after two seconds, we're
going to get this property over here. That's
5431.28 -> because we have set it to two seconds, and they
ended shop clothes will be printed immediately
5436.48 -> because we didn't assign any time over here. So it
is assured that that function works and there is
5442.48 -> no problem in our function. Let's complete our
ice cream production business, following these
5449.12 -> steps over here, okay, now what you're going to do
is come over here, you press Enter, Enter. I will
5455.84 -> keep some space between your code so that it looks
neat and clean. And then we're gonna write console
5463.6 -> dot log. Start the production, okay? Start the
production, it's not gonna take any time. Okay,
5472.16 -> we're going to keep it blank for now, what if
you want to learn, but if you want, you can keep
5478.72 -> a wait. Time. 0000 is completely up to you. But
for making you understand how the system works,
5487.2 -> we're going to keep it 0000 so that you can know
that this thing takes zero seconds to start. Okay,
5493.6 -> now we're gonna start, we're gonna cut the fruit,
okay, so console dot log. Got the fruit like this
5504.613 -> is gonna take how many seconds? Two seconds?
Every time to 123 I mean two seconds. Okay,
5511.84 -> then we have the add water and ice is going
to take one second. Let's go boys and girls.
5518.56 -> Oh, my bad, I will do the wrong thing. Anyway, Tom
is going to take 123 like this console dot log.
5529.76 -> And we're gonna write what water and ice backticks
dollar sign curly braces and dollar sign curly
5539.52 -> braces was added like this and over here we're
gonna write big the water stocks dot liquid
5550.48 -> square bracket zero. Okay, stocks dot liquid.
Then we're going to write one. There we go.
5561.28 -> And over here, we're going to start the machine
in one second. Select the container to second.
5565.84 -> So how do we do this? We can also copy this No
worries. Like this okay Ctrl V. First we need
5572.8 -> what one second to start the machine and then
two seconds to select the container. So one
5577.04 -> second is over here. And the two second part
is over here. Okay, the second part is here
5582.16 -> and let's actually complete altogether the
toppings parse takes three seconds to serve ice
5587.68 -> cream which takes two seconds Okay, so let's do it
like this. So these are three seconds over here.
5594 -> This is our serving over here Okay,
two seconds now we're going to write
5599.68 -> stuff start the mission okay. So console
log. Start deep machine like this.
5608.72 -> And then console dot log. It will be our select
the container okay. backticks dollar sign curly
5618.96 -> braces. Stops got holder? Zero it will pick
the cone. Okay. Ice cream placed on cone
5627.84 -> ice cream placed on cone like this.
Okay, now configured log console dot log
5635.68 -> like this. Do we need backticks? Yes, because
we need to pick that toppings. Chocolate
5642.96 -> backticks dollar sign curly braces, stocks dot
toppings DOB imgs then zero which will pick the
5654.32 -> chocolate was selected as the very last what we
are going to write Yes, we can serve ice cream
5661.04 -> take the money and buy ourselves a Lambo because
why not? Come on boys and girls console a dot log.
5668.32 -> Okay
5670.96 -> sir, ice cream.
5677.12 -> Let's save our code clear our console like this.
And let's run a run it and see what happens.
5684.96 -> Maintaining time everything will run strawberry.
Oh actually forgot right strawberry was selected.
5690.64 -> My bag was selected. Okay, clear this console.
Save it, run it again. Sequential Maintaining
5701.04 -> time it will run look straightaway to a selected
start the production cut the fruit then this start
5706.96 -> the machine I simulation code then after three
seconds we will have chocolate was selected
5713.28 -> service day and shop is closed but what will
happen if we have false over here let's see okay
5720.64 -> false which means that is going to reject it look
at here reject on the block shop is closed which
5726.24 -> means that this else this reject this thing will
come. I mean this thing will be painted first and
5733.28 -> then look at this catch over here. Get a better
customer left and then the final day ended shop
5740.56 -> is closed. Let's test it. We're gonna shop is
closed customer left they ended shop is closed.
5750.08 -> This is coming from where let me show you this is
coming from this else this reject from the time
5755.52 -> function customer left it is coming from where
look at this is fun coming from the catch and they
5762.08 -> ended shop is closed. This will run anyways
it is coming from this finally handler
5767.76 -> so we successfully made ice cream today. And
along with that we have completed our tutorial.
5773.36 -> If you liked the video, give a like share
it with a friend and feel free to subscribe
5777.12 -> Till then Take care and I'll
see in the next video. Bye bye
Source: https://www.youtube.com/watch?v=ZYb_ZU8LNxs