In the previous video, we saw how callback works.
So in this particular video, let's see how we can make use of callback to write a sync code.
Before we get into that.
Let's see how callback can be used in a function.
So here we go.
Let's go through this particular function, step by step.
You can see that we have a function keyword and a function name, which is say hello and I pass in one
element which is called callback, and then inside a function is just console.log and hello to the console
and on line number three we call the function as that.
So what is the difference between any argument we passing to the function and the callback function?
This agreement can be anything but this one is a callback simply because we are calling it down here.
Meaning it's a callback function.
Perfect.
So the name of this one can be anything, but not always as callback as we see.
So why do we need this callback inside this particular function?
So let's assume that getting hello is going to take some time.
So we don't know when the response of hello will be back.
So by the time you call this function, say hello, there'll be no value.
But let's say that after some scans we get the response, which is Hello.
Then the callback will take the response or the value and then call the function again.
In that case, you're going to see the response coming from this particular function.
That is all what callback is doing.
So in short, callback is a function that is passed in as an argument to a function.
As you see here, we pass in an argument to this function.
So when calling it, it means that we are going to pass in a function.
So let's see how we're going to write this with read code.
To better understand, go back.
Let's see what we want to achieve.
Let's say that we want to create posts and save it into database.
And then after creating, we also want to fetch all the posts that we have created.
So let's have the outline here.
That is our logic.
Step number one is we want to create a post.
And then secondly, we want to fetch, fetch or post.
So for this particular logic, we are assuming that we are going to save the post that we want to create
into a database sitting somewhere.
So for us, we have database in the maze.
It means that we need to write a sync code because we don't know when, after creating whether it should
be saved within as part or going to take some time.
That is why we need async code in this context.
So we are assuming that we are going to save all the posts into database and somewhere perfect.
So now let's remove this one and now let's get going.
So let's assume that we have this data already in our database called Post.
Data.
And for this one, I'm going to take some few arrays of posts.
Let's say we have these existing posts.
Title is going to be as my title one and then let's say description of this is going to be as the description.
Description one and I can copy these posts, let's say two times when I have three posts.
So I would change this one from Title one to Title two and description to like why this I would change
this 1 to 33 and description three.
So this is our database we have, this is our existing post that we have.
So our what we are going to do is we want to create a post and save any post into this particular array.
Perfect.
Now let's start with fetching post.
So function goes like this.
Fetch.
Or post spelling mistake is not like this, but instead it's like.
This.
Okay.
Fetch Opal.
So here we go.
So a function.
Fetch.
Post's going to be as that and this function just console.log, just the post we have that is inside
our database.
So for the meantime, let's say post is fetching.
And then after that we can come down here and then console.log post data.
Perfect.
So if I call this function down here as post data here.
Now have a look.
If you check our terminal, you can see that where I have some error.
Sorry.
Called the post rather, but not the data.
Sorry, guys.
Now we see that we have three posts.
So let me add some three dots to show that yes.
Is loading or is virtual so that we have first fashion and now indeed we have fetching, which is three
posts.
You can see that we have three record in this particular array.
So at this point there is no callback.
This is normal flow how JavaScript works.
So after fetching, then let's go ahead and also create a post.
So down here going to be my create posts as that.
So here we go function.
Create.
Posts and this function going to take in the post that we want to create.
So here we will say that push the new posts into the existing.
Post IRA or post data.
That is it.
So here we go.
You're going to take the post data because it's an array.
We have array, method or net push on this particular array.
So here we go.
So come down here on the post data here.
I'll make use of push and then I'll push the new post our pass into this function.
Now let's come down here and invoke this particular function.
So here we go.
Create post and remember I need pass in the post I want to create.
I'm going to pass in an object because this record are arrays of objects.
So I need to map the same semantic or syntax how my object is created so it inside my create post.
Here I'll pass in an object.
Then the title of my post I want to create is going to be as title for.
And then the description of this post description is going to be my description for.
Now, when I serve this function, what is going to happen?
Well, are we going to have the newly added post or not?
So look at the flow here.
Remember how JavaScript works.
It's read from top to bottom.
So it means that by the time the first post is being called, we haven't added the new post down here.
So if I.
SERVAIS Now let's check the console.
If I refresh it, we see that I still see three posts in the mix.
This means that by the time we add a new post, this function has been called again.
Until this point there is no callback.
But if we see the problem that we are facing here because after function then we also create a post.
What we want to do is that, well, let's assume that this function is going to take some time to create.
For the meantime, we can come here and then console.log the post that we have.
And let me show you something.
All right.
So this function now, let me comment this once.
Right now there is no fetch post, but instead inside the crate.
That's where I'm console.log in the post.
I want to show you something here.
Now you see that I have for post here?
Because right now, after creating after pushing them, you console.log.
This is a normal flow.
But let's assume that we are going to mimic this saving or post.
Let's say that we're going to take some time.
Right?
So we're going to use set timeout to implement this particular logic.
So here you go.
Perfect.
So I'm going to make use of set timeout.
And remember, we've talked about this before and this function takes in a callback as a first element.
And second is the time this function needed to execute.
I'm going to use 5 seconds, which is 5000 milliseconds.
So inside my function body of my callback, I'm going to paste that.
Perfect.
Now, if I save it, have a look.
You can see that by the time create function called, it just prints out the existing post, which is
this three posts here.
That is why we have three posts when called the function.
So after 5 seconds where 5 seconds has elapsed but we don't see the post that we have created.
Do you remember?
Have a look here.
That is why callback comes into play.
Because this particular function needs some time before it can achieve what it needs.
So how are we going to do it for the meantime, let's remove this one.
So what we want to do is that now let me refresh it.
And now let me call my function here, which is fetch post here, up here, bring it back and that.
So let me save it and let's check in the console.
You can see that we have the first function call of fetch post and that is about fetching.
Post is fetching in see three posts in that.
Perfect.
So how are we going to make use of callback to call the function again?
So what we want to do is that we want to call the fetch post function again after we create a post that
is after 5 seconds.
So here you go.
So if you look at the function that needs some time to execute and for this one, it is this particular
function that needs some time to execute.
So in that case, we are going to pass in another element called callback.
We can name in whatever you want.
Call back or man call back or.
CB But conventionally we normally use what is called CB perfect.
Now it means that this function needs to activate when we call it.
But when invoking down here for the meantime, you see that we pass in only one argument.
That is a post that I want to create, but this function needs to augment my post and then callback
function here.
So here because a function I can pass in any function, whether it was function or a function with the
name.
So here I'm going to use a normal function here and now as a second argument to my function as that.
So here I can console.log.
Let's say that I.
A callback and I will be called after 5 seconds.
So when I serve it, have a look.
When I save this function, let's check.
Let's count from 1 to 5.
One, two, three, four, five, six, seven, eight.
You can see we can count and count and count.
This function is being called y.
The problem is that we are not making use of the function we pass in here as an argument because it's
a function unless you call it inside this function.
So here we are going to call the function inside set time timeline because you want to call this function
after 5 seconds.
So here invoke.
Invoke callback.
So here we go.
Callback as a function as that.
So when I save it, let's count one, two, three, four and five.
We see that.
Yes.
Now we have our callback being called, which means that we can call our fetch post again inside this
particular function when called.
And so for this one, you could see that we are not calling this function, but instead it is this particular
function which is calling our callback here.
So one key note about callback is that we don't need to call the function by ourself, but instead the
main function will call the callback for you because we don't know when is going to be ready.
So with this particular in mind now we can remove this one and then call our.
Our fetch puts them up here.
So here we're going to be fetch post again.
Don't call it buy or sell, but instead let the main function call it for us.
So when I save it.
Now have a look.
After 5 seconds, you're going to see four posts in the array list.
Count one, two, three, four.
And indeed you see that we have four posts in the midst.
It's because of callback.
You see how callback is really important and awesome.
So after 5 seconds we got back our newly added post, which is This one's very good.
So that's how callback is really important.
In the upcoming videos, I'm going to use different logic or promise to improve this particular syntax.
So let's see what we can do in the next video.