Asynchronous JavaScript Tutorial #1 - What is Async JavaScript?

Key Takeaways

hey there gang and welcome to this asynchronous javascript tutorial now i do already have an asynchronous js course on youtube but that's now about four years old so i'm putting up a more up-to-date series which is straight from my udemy modern javascript course and it's going to cover things like the fetch api promises async and weight as well as all of the basics and building blocks of what asynchronous code is so i hope you enjoy it and if you want to take the full udemy course the link is going to be down below in the description [Music] 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 two or three 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 stalls 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 two or three 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 five to six seconds or six to seven 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 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 our 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 this 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 of 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 okay then so hopefully now you understand at least the basic principle of asynchronous code and how javascript has a single thread and runs through one function at a time or one statement at a time so i want to do a quick demo of this in action a very quick simple one so the first thing i'm gonna do is paste in four console logs so if i save this we know now that javascript is gonna execute these one at a time from top to bottom and in the console we get one two three four as expected now what i'm gonna do in the middle is i'm gonna do a set timeout and we've seen this before it's where we're passing a function and that function fires after a certain amount of time that we specify so let's do the function first of all and inside here we'll console.log and we'll say the callback function fired okay and we want to fire this after well let's just say 2 000 milliseconds so that's two seconds so this right here this is meant to emulate some kind of network request that takes time to do so imagine this is going out to get data and it takes two seconds to do then when it comes back it's gonna fire a callback function it's the same kind of thing in this case we're not getting data we're just waiting two seconds to emulate that request and then we're firing this so this right here this is a synchronous code in action it's gonna start when the file runs it's gonna wait two seconds and then it's gonna finish later by firing this callback function now is this gonna block the rest of the code will it go one two then wait two seconds and fire this then 3 4 or will it not block the code well i just said that this is asynchronous so it doesn't block the code and i'll show you that if i save it we see one two three four then after two seconds we get this so if you imagine that image of a thread i showed you before and these things are on it it fires this then this then this and then it waits two seconds over here and passes the callback function somewhere else and then it fires this then this and after two seconds the callback function is added to the bottom over here and this is where it fires at the end after one two three four so this does not block the code so in the future instead of using set timeout we'll be using real http network requests for data but this kind of sets the scene of how it all works it will be the same principle so now we know the general principle behind it of asynchronous code i'm going to show you how to actually make network requests