Commentator: After learning exactly how
asynchronous JavaScript works behind the scenes,
over the next couple of lectures, we're gonna learn
how it can be used in practice in our code.
So in this lecture, we're gonna take a close look
at asynchronous JavaScript with call backs,
which is the more traditional way
of dealing with asynchronous code.
So let's get rid of this code here, but instead of
deleting it, I will simply comment it out.
Okay?
So let me keep it here, for future reference.
Okay?
And you can do the same, or you can delete it.
You can do it however you feel like.
Okay?
Now, in order to learn about asynchronous JavaScript
with call backs, we're gonna build a
very very small fake recipe reader.
Okay?
And here, we're gonna simulate ajex calls to get some
fake recipes using set timeouts.
So basically, we're gonna simulate loading a data
from a remote web server.
Which of course would be asynchronous, using some timers.
Like we did in the last lecture.
Okay?
So let's create a function here called "get recipe".
And then down here, we call that function.
Now the way this is gonna work is that we simulate
first that we get a bunch of recipe IDs from a server.
And then based on that, we select a recipe and then
get that recipe from a server after that.
Okay?
So first, we get a couple of IDs, and then we get a recipe.
So again we're gonna use the set timeout function here, as I
mentioned before, basically to simulate the ajex call.
So the call to get the data from the server.
So our call back function here.
And then let's say this is going to take 1500 milliseconds.
So 1.5 seconds.
Then in here, let's simply create an array of recipe IDs.
And then some numbers.
It doesn't really matter here.
Okay?
And then let's just console log these.
And just to see if everything is working,
we are reloading it here.
And yeah.
So after one and a half second, then this code here
appears on the screen.
Okay?
And again the set timeout here is just to
simulate that this data here comes back from a server.
Now once the data comes back from the server,
we then want to get the recipe for one of these IDs.
Okay?
And so, in here we now need another set timeout.
Right?
Okay?
So basically after we receive this data here
from the server, then we need a new set timeout
where then the data comes from the server for the recipe.
Okay?
And once more, this doesn't really come
from the server of course.
All of this is just to simulate the asynchronous behavior.
And don't worry, in one of the future lectures, of course,
we're going to use a real API and real ajex calls.
But for now, we don't want to mess with all that, and so
we just use the set timeouts to simulate that behavior.
Okay?
Here let's just put one second.
And actually into the set timeout function,
we can pass a third argument.
Which can be an argument to the call back function.
So let's say we want an ID argument
in this call back function here.
So ID.
And then we can pass a value here as the third argument.
And that will then be passed into the call back function.
Okay?
So let's then use the recipe IDs that we got from
the server in the beginning.
Okay?
And so now, basically, this recipe ID too,
which will be 432, which will then be passed into
this call back function here as ID.
Alright?
So let's create a fake recipe here
in this call back function.
And we're going to use an object.
So this recipe will be fresh tomato pasta.
And then let's also add a publisher.
And that will be Jonas.
Okay.
So that's a fake recipe.
Now let's just log it to the console.
Console dot log.
And now in here I actually also want to use this ID.
So just to know that everything's working.
And so let's use a template string here.
So one of the new ES6 features here as well.
And remember, if you want to use one of the variables,
then we use the dollar sign and curly brackets, ID,
and close the curly brackets.
And then we can just write our code.
So we say the ID, and then there's the title of the recipe.
So recipe dot title.
And that's it.
And now let's check out if it works.
So after one and a half second, this one here comes,
and then after one seconds, we get the recipe.
And so basically we chained these two timers,
one after another, by putting this one here
inside of the first one.
So we have the first set timeout and then in there,
we have a new set timeout.
And like this, the first one runs, and then after
1.5 second we get this data.
And then after yet another second,
we then get this fake recipe.
And you also see that the 432 here is actually being
passed in, into this call back function here,
just like I said.
Because we passed it here as a third argument
into the set timeout function.
Okay?
Just to see again if this works, here.
Maybe you didn't get the timing here.
Let's take a look at this here again.
So 1.5, and now one second, and here we go.
And now, just to make things a little bit more complex,
let's just add a third level.
And let's suppose that we want to get another recipe
from the same publisher.
So in this case here it's Jonas.
And so let's pretend that we want to get another recipe
which is also from the same publisher, automatically.
And so now we use another set timeout with
yet another call back function.
Okay?
So set timeout again, and now we also
want an argument here again.
And actually we don't even need these parentheses here.
Right?
Remember that with the arrow functions if we have
only one argument, then we don't need to use
the parentheses at all.
Okay?
So publisher and then just the function body.
And this one here maybe after 1500 again.
Maybe this one here as well.
I thought this was a bit too fast.
Let's get rid of the parentheses here as well.
So just ID.
Okay?
And then of course we also have to pass the publisher
into this call back function.
And just like before, we do it like this.
And this one is stored here in the recipe object.
Right?
So recipe dot publisher.
Okay?
And so let's now create here another recipe.
And this one is Italian pizza.
And of course the publisher is the same.
Alright.
Let's call this one here recipe two.
Okay.
So now we have three call backs nested inside one another.
Let's just check if this works.
So the IDs, then the first recipe,
and now the related recipe from the same publisher.
And here we go.
And so basically this now is like having
three chained ajex calls to get some data from the server.
But you see that this is getting here a bit out of hand.
Imagine that we had more and more and more chaining here,
like 10 levels.
Then we would have all of these call backs here
inside of one another.
And that is the so-called "call back hell" in JavaScript.
So this triangular shape here that you have here,
so this shape here, what I mean here,
this triangular shape that we have here,
that is a sign of the call back hell.
Which simply means that we have call back inside of
call back inside of call back, which after some time
gets really unmanageable.
Okay?
It gets really messy.
And so that's why in ES6,
something called "promises" were introduced.
And with promises, we can avoid all of this
call back hell here, and have a nicer and cleaner syntax
when using asynchronous JavaScript
like we have here in this example.
Okay?
And so in the next lecture, we are actually
going to look at promises.
Which is one of the ES6 features that we didn't really
talk about in the last section
where we talked about ES6 or ES2015.
Okay?
So make sure that you understand the logic behind this here,
and that you really understand what the
call back hell really means, because that's a term that
you're gonna find frequently when you're reading
about JavaScript on the web.
Okay?
So I had to show you what call back hell here is,
so that after that, it makes sense to you
why we use promises.