In this guide, we're going to get into how to work with asynchronous behavior in JavaScript.
And we're specifically going to talk about the concept of higher order functions and callbacks.
And both of these are integral parts of how to create that asynchronous behavior that we've talked about
in the very beginning of the guide.
So for this, I'm going to start off by creating a method, and this method is going to be considered
a callback method.
Now, a very important thing to know about callbacks is that they are just methods.
There's nothing special about them.
So they're callbacks in the fact that we look at them like they're a callback, and after we run through
this code, I'll walk through exactly what a callback is in detail.
So I'm going to say var DB query and it's going to be an anonymous function and this function is going
to return void.
And inside of it, I'm going to use our set timeout again because I want to actually delay this code
from running.
So what I'm creating or I'm trying to mimic here is a database query.
So we talked about in the introduction how asynchronous behavior is the ability to run multiple things
at the same time, or had to have one item run in the background and not block the other items.
So here I'm mimicking a database query call and this query is going to take it or it's going to be timed
out for three seconds.
So I'm inside of these brackets of set timeout.
I'm going to use our fat arrow method and this is going to create a function inside of it.
So for set timeout, the process we're going to do is just a console log and I'm going to say query
results.
And then remember, because this is set time out, it takes a second argument.
So right here, this is going to take an argument.
And here I'm going to say three seconds and we say that in milliseconds.
So it's 3000 and this is everything that we need for our mock database query.
So it's going to be something that runs.
It's going to print out query results after three seconds.
Now I'm going to create a function called Load Page, and this is going to mimic loading a page.
And this function is going to take one argument and the argument is going to be a method.
So this is the convention for working with callbacks and and higher order functions.
So when we have a method that actually takes a method like our load page method, this is considered
and it's called a higher order function.
And there's nothing special about it except that it simply takes a method.
That's the only thing.
There's no higher order name or anything like that.
It just means that this is a method or this is a function that takes another function as its argument.
So inside of this load page, we're going to use the arrow and we're also going to say that we want
this to return void.
So that's all we have to do in our method or in our function declaration is say load page.
We want the method to return void.
And then inside of it we're going to have some console log statements.
So I'm going to say console log and let's pretend that we're importing the header.
And right after that we're going to import the sidebar and the footer.
Sidebar and footer.
Okay.
But we want our database query to run.
And the cool thing about this is we can actually slide our query right in the middle of this code.
And because of JavaScript's non-blocking nature, this code is going to run, but it's not going to
hold up the other things.
If you're coming from a language like Ruby or like Python, if we had these kinds of consecutive code
calls, we would have console log header.
And if we had something like this, like this database query that ran for three seconds, this would
run for three seconds and then our sidebar would load and then our footer would load.
However, because this is JavaScript, the way it's going to work is the header is going to load, then
the sidebar, then the footer, and then only after the database query is run will this code run and
let's test this out and say load page.
And remember it takes load.
Page takes in a function as an argument.
So we're going to actually be able to paste in this database query function here and this is going to
perform the query for us.
So I'm going to come to the terminal run.
TSC And that worked.
So now let's run Node.
This was number 28, so number 28.
And look at that, everything printed out.
And three seconds later our query results printed out.
So you can kind of envision what this would look like on a website where the header loads, then the
sidebar loads, then the footer, and then only after everything else is there, does do the query results
come in.
If you are on a lot of websites on a regular basis, you've probably seen this behavior all over the
place where the entire site will load.
But the content in the center or certain components on different parts of the page won't actually load,
but they don't stop the rest of the page from loading.
And that's the way that JavaScript works, and that's specifically the way JavaScript works with a callback
kind of structure and with its non-blocking nature.
So I said this guide was going to be about higher order function and callbacks, but I haven't really
gotten into those.
I've walked through how to build an asynchronous function so now that we have all this code there,
and now that you see the behavior, let's go through what this actually does from a component level.
So right here, this database query, this is considered a callback.
Like you can see there's nothing special about it.
It's just a function.
Usually callback functions are anonymous methods.
And part of the reason for that is because you want the ability to pass them as variables, just like
we did right here.
So we can pass this database query as an argument into load page.
But besides for that, as you can see, there's nothing special about it.
The set time out here, don't let this part kind of trick you into thinking that it's special at all.
I just did that so we could mimic having a database query if we wanted to get rid of this and run just
like this.
You can see that it all works.
But here, because it was instant query results showed up right under header.
So that's something that's very important to know.
The set timeout did nothing to make it a callback.
I don't want you to kind of get confused by that part of it.
Set timeout was just there to mimic a database query behavior and then that's really it.
That's all that you need to know from a callback perspective or in order to create a callback.
And then from there you pass it into the higher order function.
And now to review a higher order function is a function that takes a callback as a argument.
So we're going to get into later on how higher order functions usually take a few different arguments.
It'll take a success message and then they'll take a failure and they'll be able to work with things
like in case they say, this database query ran but it didn't return it or returned an error or something
like that.
You'd want your load page to be able to handle that properly.
But I don't want to confuse you with a ton of things that are kind of a waste of time right now because
we'll get to those eventually and we'll specifically get to them when we start to cover promises in
the next guide.
Right now, I just want you to focus on what a callback is.
And remember, a callback is just a function and it's a function that's passed inside of another function.
Those functions that it's passed inside as an argument too, are considered higher order functions.
If you have finished this guide and you know those two terms and what they do at a high level, and
you've been able to see the behavior of what it looks like when you run through these, then you are
in great shape and you have you're in a really good position to work with asynchronous behavior in JavaScript.