Transcript

          Okay then.

So now you're quite familiar with a lot of the JavaScript language.

Hopefully I think it's time to introduce the beast that is asynchronous JavaScript now heads up because

I think this chapter will probably be the hardest chapter to fully understand in this course.

So if you don't understand fully all the concepts I'm about to teach you in over the next ten or so

videos, that's completely normal.

When I first started to learn about asynchronous JavaScript, I felt like I was climbing a mountain

with no peak and I kept on slipping up along the way as well.

So please do not worry if you don't fully get it after one sit through, persevere, play around with

your own code using the tools that I show you, Rewatch some of the videos and eventually it will click

for you.

If you do fully understand after one sitting, then congratulations.

You're probably one of the lucky few.

Anyway, asynchronous JavaScript is one of the most important parts of the language because it governs

how we perform tasks that take some time to do, like requesting data from a database or from an API.

And chances are, if you're making a real JavaScript application, then you will be using asynchronous

code at some point to do these kinds of things.

So in a very simplistic nutshell, asynchronous code is code that can start now and then finish later.

But before we talk more about asynchronous code, let's first of all understand its counterpart synchronous

code.

So JavaScript by its very nature is a synchronous language, and that basically means that JavaScript

can execute only one statement at a time from top to bottom.

So for example, in a JavaScript file we could have three statements and each statement is run in turn.

Now line two cannot start before line one is finished and line three cannot start before line two is

finished.

So it executes these one at a time in order.

Now you might hear JavaScript being called a single threaded language and that essentially means the

same thing.

A thread is like an ordered sequence of statements, and only one of those statements can run at a time.

So this is the crux of synchronous code one statement being executed at a time after one another.

Now, with this image of synchronous code in mind, a single thread and only one statement executing

at a time, imagine this scenario.

We want to call a bunch of JavaScript functions in a file.

Some of these functions do quick little things like log something to a console, but one of them wants

to make a network request to a database on another server somewhere to get some data.

Now this could take 2 or 3 seconds to complete, maybe less, maybe more so in a synchronous programming

world, because only one statement can run at a time.

This fetching of data stores the program.

This is known as blocking code because it blocks the next line of code from running until it gets the

data back.

And this function is complete after those 2 or 3 seconds.

Now, in this case, you might think, well, okay, two seconds isn't that long to wait.

But what if you have multiple functions to get data?

Then that could soon be 5 to 6 seconds or 6 to 7 seconds and it would block the rest of the code underneath

from running until these things are complete.

So this is a downfall of synchronous code, and this is where asynchronous code comes into play to help

us out.

So we know that running our functions synchronously when it comes to task that takes some time to complete

is probably then not the best way to work, right?

So remember the definition I first gave you of asynchronous code to start something now and finish it

later.

This is the pattern we generally want to follow when running tasks that take some time to do, like

network requests for data to a database or an API.

So imagine we have the same kind of sequence of function calls or statements only this time, instead

of this being some kind of synchronous function to request data, we use an asynchronous function instead.

And this means the function can start now and then finish later.

Once the data has come back from wherever we get it from.

Now, since this function is finishing later, what we typically do is pass this function or this statement,

some kind of callback function as a parameter, and then that callback function is the thing that runs

and finishes later on.

Once the request is complete and the data comes back.

So how is this all working exactly?

Well, we have our queue of function calls in the code again, which are executed one at a time.

So first this one, then this one and so forth.

Now, remember, at all times JavaScript can only execute one thing at a time, but this time when we

get to the request function here we are using an asynchronous function to request that external data.

What this means is that the browser takes that request and it handles it outside of the scope of this

single thread in another part of the browser, it also takes a callback function and puts it to one

side too, so that it knows to execute this later on when the data comes back.

So because this network request has been taken out of.

A thread and is now running in a different part of the browser.

JavaScript can carry on down the queue and run the remaining functions.

All the while this is still going on the request for data.

So it continues through these functions and then when it receives the data back from the network request

and once the rest of the functions have been executed, then we're allowed to call this callback function

and finish this original function.

So this is the crux of asynchronous programming.

Starting something now, which can be finished later, and it makes our code non-blocking because the

rest of the functions here, they can run while the request is being made.

Now, this explanation is a very simplistic one, and there are other things at play, such as the event

loop and the call stack, which we've not discussed.

But I think to delve into that right now would be a bit overwhelming.

And I think this picture I've painted should be enough for now to understand the general idea of asynchronous

code.

So now we know a little about what that is and what asynchronous code does.

Let's have a look at an example.