Hey, everyone, welcome to a new section of the course, we are now going to start talking about a
little more advanced topics, but don't worry, it's not going to be too complicated because, as always,
we are going to see things step by step.
So let's get started with callback functions.
Callback functions are passed as arguments of other functions, and they are normally executed at the
end of the parent function.
So we know that JavaScript is an asynchronous language and there are times when this can be a bit problematic.
So let's see a very basic example to get started.
So I'm going to create a function.
Called Get.
User.
And inside here, I'm going to simulate as if I was getting this information from an external source,
I'm not doing this right now, but let's simulated.
So let's create a variable called you.
And let's say I got this from a database or an API or something like this, and I'm getting in return
an object, and one of the properties of this object is going to be the name property.
And then we have the name of the user, so what we are going to do now is just returning this user.
So this is just a simulation, so let's say we got this information from an external source and now
we are just returning it.
So now that we have this or we will have this, when we execute this function, let's try to do something
with this name.
So I'm going to create another function.
Called Grete.
User.
And this function is going to receive and user as an argument.
And what this is going to do is just sending a message to this user, but this is going to be a personalized
message with the user name.
So let's say the message is hi.
Then we concatenate with the name of the user, so user name.
And then we concatenate with.
A Colin.
And then the rest of the message, something like, how are you?
All right, so pretty basic stuff just so we can use as an example.
Now let's begin to write our code.
So I'm going to create a variable called user.
And I'm going to call this function.
So, again, this is a simulation, so let's say I'm retrieving this information from an external source,
this function is going to return this user and now we have it inside our user variable.
So now we are ready to call the great user function using that user.
As an argument.
All right, so doing this, let's go back to our page, let's refresh it, and as you can see, we successfully
got the user, which is an object that has a property called name.
And now we are using this object as an argument of another function.
And we were able to form this message.
So far, so good.
But the only reason why we didn't have any problem here is because this function was executed so fast
that when we ran this great user function, when we invoked it, we already had the user.
Inside this variable, but in a real life situation, if we were really getting it from an external
source, this wouldn't be that fast, we would have a delay.
So let's simulate a one second delay.
So here instead of returning it right away.
Let's simulate.
A one second delay here with a set time out.
So the time is going to be one thousand milliseconds and.
At the end of this time, then we are going to return that information, so this function is going to
take one second to return the username.
So let's see what happens now when we try to get it.
And then right away, call the great user function.
I'm going to save this.
Now refreshing the page, so as you can see now we have an error, it's saying, cannot read property
the name of undefined.
So what's going on here when we call this function?
This is not immediate.
This is taking one second, but as JavaScript is an asynchronous language, it doesn't wait until this
function finishes to go to the next line.
It just starts executing this one and then just jumps directly to the next line.
And this is a problem because when we try to use this variable as an argument for this function, we
don't have anything inside it yet because this operation is taking one second.
So this is what would happen in a real life situation if we were getting this information from an external
source.
So what can we do about it?
Well, instead of returning this user, we can do something here.
Let's pass an argument to this function.
Which we're going to name call back.
You don't have to name it this way, you can name it any way we want.
But just to make clear that this is a callback function.
I'm going to call it a callback and one I'm going to do with this.
Instead of returning the user here, I'm just going to call this function.
And I'm going to pass the user as an argument, so every time I invoke this function, it's going to
do everything that is doing and then at the end, it is going to execute this function with the user
name as an argument.
So this means that it's going to wait until this time passes before executing it.
All right, so now I'm just going to erase this line here and now, I'm not going to create any variable.
I'm just going to call this function, get user.
So when I call it as you can see, there's an argument now.
So what is this argument is a function that's going to be executed here, but which function is this?
He can be any function we want.
All we have to do is tell the name of the function we want to execute.
So when I invoke it.
I'm going to pass this great user as an argument.
So what it's going to do is getting inside here and when it reaches this point, it's just going to
do this, which is exactly what we want, and we could use this function with any other callback we
want, as I'm going to show in an example in a moment.
But before we go ahead, let's save this and let's see what happens.
So refreshing the page, there's a one second delay and now we have it being executed without any problem.
So now let's create another function just so we can see how useful this callback function can be.
So I'm going to create another one that's going to be called good by.
User.
So now this is pretty similar, but now I have a bye bye message.
And how do we use this one?
Well, we just called the get user again, but now.
As our callback function, instead of using the great user as a callback function, we can use any function
we want.
Now we are going to use the goodbye user function.
So when we hit this point, it's just going to use the name that we are passing as an argument.
So this is going to be executed, so let's try it out with just one get user function, we can pass
any other function we want as a callback.
And by doing this, we are making sure that this is only going to be executed when we actually have
the user.
So let's save this and let's see what happens.
Refresh the page.
First one worked correctly.
The second one worked correctly.
Now I'm going to show you another way of using callback functions.
This time we had created previously the two functions that we are using as a callback, but we don't
have to do this.
We can actually create a function by the time we are calling the parent function.
So now let's repeat this and.
Let's see if you are familiar with this structure, so instead of doing this, I'm just going to create
a function here.
With an argument.
And now I'm just going to write, hey.
User, not name.
This is another way of using a callback function, so as you can see, when we created the get user,
we are just calling it that here we are going to pass a function.
We are not defining which function it is yet.
We are just saying, OK, we have this argument and this argument is going to be called here as a function.
So by the time we are creating this, we don't know which function is going to be so.
In the previous two examples, we just called two different functions and now we are actually creating
a new function by the time we call this get user function, which is perfectly acceptable.
So let's see if this is going to work.
I'm going to save this.
Refreshing the page, and now, as you can see, this was another way of using it, and if you pay attention
to the structure we've just used, you will see that most Jake queries methods are actually using callback
functions.
If you take a look at the click method from Jake Query, as you can see, the function we pass inside
here is actually a callback function.
So probably inside the click method when it was defined, it is doing something like setting the event
for this element and at the end of everything is just going to execute a callback.
And what's going to be the callback?
Well.
We are creating the call back every time we use the click function, so it doesn't matter what function
it is because we can define any function we want every time we call this method.
And another example here is the SAT time out now we can see that the SAT time out also has a callback
function.
So when we use this method, as you can see, the first argument is a callback function in the second
argument is a time.
So every time we call it.
We need to specify a function that's going to be executed at the end.
So this is how callback functions work at first.
This might seem a bit complicated, but don't worry, it is only a matter of getting used to it, using
it a few times and you see, that's actually pretty simple.
In the next few lessons, we're going to have opportunities to work a little bit more with callback
functions.
I'm also going to include it in the next list of exercises.
So by the end of the next section, this is going to be very clear for you.
Don't worry, but if you have any questions, don't hesitate of leaving your question in the Q&A section.
So that was all for now.
I'll see you in the next video.