Instructor: In this lecture, we will take a look
at a very simple example of asynchronous JavaScript.
So, this is a completely new concept
that we've never touched in the course up until this point.
And so I'm very excited to show you
what asynchronous JavaScript is all about.
Now, before we actually start,
you are maybe noticing that I'm using
a different code editor here.
And that's because this part of the course
was recorded shortly after the rest of the course.
And so now I've switched to a new editor called VS Code.
And if you're interested in that one,
you can simply go download it here from this website,
but of course, you can also simply follow along
using the code editor that you already have.
So let's close this one here,
and I already opened the file for this section here,
and also the browser here on the right side.
Now what's also different here is that before,
I used to have an external JavaScript file
called Script.JS, but right now I choose to
simply write the code here in a script tag
right into the HTML.
I find it easier to just do everything in one file
instead of having multiple files here.
Okay, so let's just write some code here
right into this script tag.
And we're gonna start with just some old-school
synchronous JavaScript code,
just the way we've been doing up until this point.
Okay, so let's write a function code first.
And you're noticing here, probably, already
that I'm using the new ES6 syntax, right?
So I'm using the const keyword here
to declare a function expression using
then here the arrow syntax, right?
So that's the new stuff that we learned in the last section,
where we talked about ES2015, or ES6.
And so from now on,
I'm going to start using this new syntax here,
in this section and also in the next one.
Okay, so let's just log something to the console here.
Hey there.
And then, we're going to call this function here as well.
Give it a save, reload it here,
and then open up our console.
And so now we know that everything's working here, right?
So our hey there text is actually being printed.
Let's now add a new function.
This one just call it second.
In this one, for now, I'm going to log
some other text, and I'm going to log second.
Then, in the first function, we call the second one,
so just second, and then a new console.log down here,
simply saying the end.
Okay, this will make more sense to you in a second,
when we start adding something different here
into the second function.
For now, we simply have hey there here as the result
which comes from here, then the second function is called
which logged second, as you'll see here,
and then, finally, the end.
Okay, so all of this is synchronous JavaScript
just the way we've been doing up until this point.
And with synchronous, I mean that all the instructions
are executed one after the other, line by line
just in the order that they appear in the code.
And so that's exactly what we have here.
But now let's actually add some asynchronous code here.
And in order to do that,
we're going to use the setTimeout function,
which is basically to set a timer in JavaScript.
And that will then allow us to write code
that should be executed later, okay?
So that is asynchronous JavaScript.
So let's get rid of this one here.
And now I can call the setTimeout function.
So, setTimeout function is a function
that we can pass a callback and also the time.
So, first is the callback,
and again I'm going to use the arrow syntax.
So no arguments here.
And then the content of the function in here.
And then the second argument we pass
into the setTimeout function is for how long
we want the timer to run in milliseconds.
Okay, so I'm going to put here 2,000 milliseconds
which means two seconds.
And after this two seconds have passed,
then this callback function that we passed in here will run.
And this callback function here will be very simple.
All I want to do is to actually log something to the console
let's say async hey there.
And let's get rid here of this side panel.
Okay, so let's review what we have here.
First off, we call the console log,
then we call the second function,
and then in the second function we call this timer here.
Which after two seconds, will then run this function here.
Okay, and then after that we run this console.log,
which will log the end to the console.
So what do you think the result of this code will be?
Can you guess that?
So let's take a look,
and you saw that appearing here after two seconds.
So first we had hey there, then the end,
and only after two seconds then appeared
the async hey there.
Let's try that again.
Let's wait for it, and here we go.
Now maybe you expected that first
only the hey there appeared,
then we called the second function
then this timer is run,
and then after two seconds
it would then print the async hey there
and only after that it would print the end.
Maybe that was what you expected,
but that's simply not how JavaScript works
with asynchronous code.
Okay, and I'm not going to go into a deep explanation here
with this point, because that's what I'm going to do
in the next lecture.
So the next lecture you will learn
exactly how asynchronous JavaScript works behind the scenes
with the event loop and the web APIs and some other parts
of the JavaScript engine.
For now I just want you to notice that all of this code here
run and that basically the timer run in the background
and then after it finishes, only then it printed
here the text to the console.
But that didn't stop this code here from running,
even before the timer had finished.
Okay, so this was just a very simple example
to show you what asynchronous JavaScript is,
and in the next lecture you will then,
as I mentioned before, learn all you need to know
in order to deeply understand how
asynchronous JavaScript works behind the scenes.