Welcome back, ladies and gentlemen, to another awesome lecture today we're going to talk about callbacks,
asynchronous JavaScript callback hell or Pyramid of Doom.
No callbacks are replaced in year six with promises.
So somebody will say, OK, well, I'm learning then callbacks.
Well, you need to have a background information how what was before promises.
And that's why we are doing this that we are doing today.
So the definition is of the callbacks is I will call you back later.
Very interesting definition, right.
So a callback is a function past as an argument to another function.
Very good.
This technique allows a function to call another function.
A callback function can run after another function has finished.
Nice out.
I, I think that you probably half of you didn't understand what this definition means.
Right.
So let's do a couple of examples.
But before I'm just going to create two functions and I'm going to run then to see run them to see their
function are a sequence of execution.
OK, so this is nothing with the callbacks.
Still no memory, but it's function sequence.
If I can spell it right, not sure.
OK, so what were we having here?
I'm going to create a function called first function.
It's not going to take any parameters.
And I'm going to a log.
Hello?
The second function will be second function, and again, another comes along, we'll say Hidir or just.
But.
Bye bye now.
I got.
That's pretty much it.
Let's call the first function first what's happening here, frame 11, who called you this first function?
OK, second function.
So make sure that you re-elect your three and link it back to your index, OK?
I hope you understand how those things are working so far.
So I have.
Hello and bye bye.
Why is this?
Well, I call the first function first and after that I call the second function.
So these are e call function sequence.
So what do you what will happen if I change this too?
So if I put a second first.
In first as a second, now I have bye bye and hello, nice, so javascript functions are executed in
a sequence in the sequence they're called.
Right.
They're called here and they're executed in that sequence.
Not then.
I want to do something else.
I want to see the sequence control.
Let's do sequence control.
Now, sometimes you would like to have a better control over what function you want to execute.
OK, so let's create a function called message and the message will take a result.
One parameter.
Don't worry about this result.
You just cancel it.
Log now do this with template literals.
The sum is because it's very easy to use template literals result.
Very good.
Says, you guessed it, probably now we're going to have a function that will create this result, so
function some and some will take two parameters, A and B and let some B, A plus B bear with me, type
the the content.
Don't worry about it too much at this stage.
Now, from here, I want to call the message function and pass to some.
What some.
Here, the result of this some some calling the message function from here, so you can call the message
function from inside another function.
Right.
And the last word that we need is to some.
Five and six, that should give us back a result of 11.
So the sum is actually 11.
Very good.
Now, one problem here is happening.
So the problem with this example is that you cannot prevent the same function to call this function.
You cannot prevent for example, this result is not already there, but we are just calling the function.
And there and then that's why, dear, and then I just mixed it up, so that's why we use callbacks
now let's use callbacks for first time, I know it will be a little bit tricky callbacks.
So.
I call back again is a function passed as an argument to another function using the callback you could
call a sum function.
This right.
With a callback.
Now, this is interesting and let the sum function run the callback after the function is finished,
the calculations are finished.
Now, we're going to redo this part a little bit.
So what I want you to do is just to comment out this part first copy and then coming out and paste it
here.
Now, now the definition will start making sense and let's put it here, not here, sorry, just let's
put here the same is before the some would say callback, callback.
Some is very good now.
As I told you, that callback function passed as an argument to another function, so using a callback
issue, you could call the same function with a callback.
So let's put the call back here.
You can put any name I'm just stating that should be Carmac.
Now let's some we will finish this.
But here, instead of calling the message, we can say call back.
So callbacks allow us to call the message function.
We're going to call the message function to this.
And this, by the way, is going to working now.
Now, the definition again, if we read the definition, then you will get it.
A callback function is a function passed as an argument to another function, a very good.
Using a callback, you can call the some function with a callback, right, this function with inside
a callback and let the same function run the callback after the calculation is done.
So we're going to run this callback after the calculation, this calculation is done.
So let's save it and see if it's going to work.
Callback is not a function.
Very good.
So what's happening here?
We have a problem.
Callback some.
Message, yeah, one more thing we just forget here to pass the message, that's why callback sum is
11.
So in the example above, the message is the name of the function.
Right.
So I'm going to get through all of these steps now.
It is best to sum as an argument.
So it is passed here in a some as an argument.
When you pass a function as an argument, you're not going to use parentheses here.
So this is wrong.
So I'm just going to copy it.
I'm going to say you're wrong, so you when you pass a function as an argument, remember not to include
what the parentheses cuz actually is not going to work now.
C callback is not function again.
Save it.
Oops.
Now it's working very good.
So that is pretty much it.
Now, maybe this is a little bit confusing at this stage, but you don't worry, we're going to go through
this again.
So why do you need callback functions?
Well, JavaScript runs code sequentially from top to down.
So JavaScript how it runs.
The code is started from here.
Ignore the comments.
So it's going to start from here.
Is going to go down, down, down.
Right.
That is called sequentially in top down order.
However, there are some cases that codes run or must run after something else happens and also not
sequentially.
So this is called asynchronously.
Sometimes we don't want that to happen from top to bottom, right?
We want code to run after something else happens that because that is our logic and that is called asynchronous
programming.
Now, callbacks, make sure that the function is not going to run before a task is complete.
So this function will not be called here until this one is complete.
That's why they call backs and they make sure that a function is not going to run before a task is completed,
but will run after the task has completed.
So it will run, right.
That helps us developer to create asynchronous JavaScript code that keeps us from problems in error.
So, Ehsani, asynchronous JavaScript code is also known as non blocking code.
Right.
So do you think finished with this then?
I'm going to call it so it's not going to stop here.
It's not going to block anything.
It lets in the background to run now in JavaScript, the way we create callback function is to pass.
That is a parameter to another function and then call it back right after something else has happened.
Right now, one scenario where we use asynchronous callbacks is with setup out function.
So callbacks are most use used with asynchronous function.
So the typical example here is timeout function, time out.
Function.
And it's called Said Time out, by the way.
Yeah, so this function is typical example of JavaScript callback.
Now let me just write it down for you.
So I'm going to create a function again.
And we do have the message here, just make sure that you comment this one function message.
I don't want to invent names because I'm going to confuse confuse them later.
That's why.
So here I'm going to say Konza lot.
OK, let's copy some of this here.
Comes a lock, this is this tax.
Will be seen after.
Three seconds.
Very good.
So this function going to display, this text will be seen after three seconds.
Now set them up function.
Here it is.
It takes two parameters.
The function in.
The milliseconds, so these three thousands are actually three seconds, one thousand milliseconds is
equal to one second.
OK, now let me just show you this.
Go back here, let's make this working.
Nice.
So what's happening?
Very good.
Now I'm going to save it again.
Bye bye.
Hello from a previous.
This tax will be seen, not seem seen after three seconds, very good.
So one, two, three days ago, so said Time Out is inbuilt method in JavaScript, which calls up functions
or evaluates an expression after a given period of time.
So this time is in milliseconds.
Right.
So here the message function.
Will be called three seconds after three seconds have passed, because these three thousand milliseconds
is actually three seconds, one second equals one thousand milliseconds.
In other words, the message function is being called after something happened.
Right.
So the message function is example of a callback function.
Right.
We can do this a little bit differently so we can define a function directly inside another function
instead of calling it like here.
So I'm just going to copy this entire thing, just going to comment out and.
So this is called anonymous function.
And why it's anonymous.
Well, we will see in a second.
So instead of creating this message function on top here, what I can do, I can say here function oops
without caps, lock function call.
And now.
I can just grab this console lock here, and I don't need this function, so this is called anonymous
function because there is no name associated.
So one, two, three.
There you go.
The text will be seen after three seconds, right.
So this is alternative way we can define function directly inside another function because Satima is
a function and we are defining another function inside.
But make sure that you have a comma here to separate that with the milliseconds.
OK.
So the callback function, there is no name.
That's why the functions without no name are known in JavaScript as anonymous functions.
But this does exactly the same as this one.
The result is exactly the same.
Now.
What we can do is we can just use callback as a narrative function.
Function, right?
So how we can do this, so let me just comment about this one again.
Oops, let uncommented save it first.
Coming back now set time out here.
What I can do, I can delete this function.
And I can just simply put, an error function here, error will indicate this is an error function.
Save it.
One, two, three.
I was too fast, right?
So it's three seconds good.
Now, if you prefer, you can write callback functions as an as six error functions, which is a newer
type of function in JavaScript.
It was it was there with the S6 features.
So let me explain it again about asynchronous JavaScript, so with asynchronous JavaScript, it's a
JavaScript which use callbacks, promises, async, await, we will do promises and async await in future.
So the asynchronous JavaScript is something that used callbacks.
Right.
And we use this because it helps the function to take time to return some value or to produce a result.
Now we need a callback function because we want to use the result from that function and that result
to give to pass to another function, but not before we have the actual data.
Right.
So that's the whole thing behind.
So while one function is executing and waiting to get results back, and when we have that result back,
we're going to give it to another function.
So without this, we will have a very big problems and errors.
Now, I'm going to give you another example.
I hope this example will clear all of your doubts.
And I'm super, super happy that you are still with me.
So callbacks are not very easy to understand because, yeah, they will back us later.
Now, another example.
I'm just going to create const first function expression, right?
It will be an error function here.
So I'm going to say console log.
The first function was called very good.
Now, from here, I will call a second function oops, not this one second function and I'm going to
say Conjola, just bear with me.
The code did not stopped.
On the second function.
And still.
Runs very good now after this council comes along, I will call the third function for here, just put
it here, her now consed second function.
Make sure it's a narrow function there so it gives us time to practice the error functions, right.
So on the second function, I'm going to put a set time out here and I'm going to say download complete
and I'm going to put here six.
Six thousand.
That is six seconds.
Wow, that's a lot.
But we have time right now.
Consed third and we are done probably.
So Konza.
Third function was called, now you will see what is the sequence of execution and finally, we need
to say consed this, we need to define this download complete run down, load complete again.
It will not take any parameters.
And I will say that log is a template literals.
I don't have enough space just like this, I should put it in teplin literals.
The second function took six seconds to complete the file because.
The file was big for downloading.
If I misspell it, don't worry.
So finally, we need to call the first.
Function like this.
All right, so are going to call it inside again now inside we have a console lot, then we have the
second function.
The second function has a set time out function right in this time out function will run after six seconds,
which is making this a callback function right now.
Mark, this is a callback function.
And the third is just a simple comes a lot.
And the message of this function here, OK, save it and see what's happening.
The first function was called.
The court did not stop there, the third function was called.
The text this one was coming from.
Let me just come out this part here, I don't want to confuse you.
Let's come in our everything here that we do have, the first function was called the code did not stop
in the second function and still runs third function was called and finally download complete was called.
Right.
So this is the power of async functions.
So the powers of async functions are very big, so it allows other function to run in the background
there also they are called when a function finishes its work and they're not blocking.
So they did not block the code and let the other functions do its job.
Right.
So that's why I want to show you this example, because this line was there then.
Hear it call because but there is because it's a Satima Septime function that is call back it it can
continue working here because we say here, OK, this one should run after six seconds.
Now it come back here.
Deko did not stop.
That's why you see this.
Deko did not stop.
Then the third function was called and it printed out immediately.
And while doing this it waited exactly six minutes, six seconds to pass in just to call this download
complete.
So the async functions allow the code to run in the background smoothly without blocking.
Without Knoblock, it will not block the other code.
Right.
So there you go now.
Because everyone sorry, not because the callback functions are like this, there can sometimes be a
very huge problem in that these are these two here.
Let me just show you a callback Hell and Pyramid of Doom.
Now, imagine if we have multiple callbacks function inside.
Dysfunction, so inside here, we have another callback function, another callback function, so that
is creating the Pyramid of Doom and there is a one page called Callback Hell.
So I want you to check.
It's not my page.
Look at this code.
This is exactly what I'm talking about.
So it creates a pyramid is going cascading one, right?
It's creating a pyramid.
So if you see from left to right, it's indented.
It's a pyramid.
So it's like an arrow here.
So this is called callback hell.
And there is a very big problem because the code can get very messy.
So what's the solution to this?
Well, the solution of this pyramid of do more callback hell is to use promises and we will talk about
promises and how this can be.
Don, much more readable because here it's very confusing.
Well, what it will do and please, if you if you have time, just read it here.
You don't need to understand the example.
Just read it, because it will tell you that there are problems that can occur with this callback of
how.
Right.
So that was the Web page I think I've included somewhere here.
No, I don't.
But, you know, callback hell dot com.
That's it.
There you go.
Now, you know what callback functions are.
We create a sequence, control the callbacks, you have the definition anonymous function callback as
a narrative function, and this is the last thing we did.
So this was the last example where we call one by one of the function just to tell you that the asynchronous
function will not block the code.
So it will if it was synchronous execution, it will stop here, get after six seconds.
It will print out this, then it will go to this and to this line.
But the asynchronous are there because they don't want to block the code.
We they want us to continue with our lives, to continue with our work, to continue with the next line,
what's next and when they have the result.
They're going to call us back, and that is pretty much it.
So I hope you understand this one.
If not, please watch it again and I will see you in the next lecture.