If you are learning web development then for sure you have come across terms such as Asynchronous, synchronous, event loop, blocking operation, and so on. Well today, let’s start understanding these terms.
Synchronous means that something is happening at the same time whereas asynchronous is quite the opposite not happening at the same time. You may have heard that JavaScript is a single-threaded language. The term, “single-threaded” means exactly as its name says. It means that the whole process is being run in a single thread or you could say one a single path. Yes, every line of code in your javascript file is being run on the same line one after the other. So, you must be wondering, everything is well our code is running fine, so why are we learning about this? Okay, so let’s take an example, you have a simple app where users can register and can load their information. Let’s imagine your application currently has 5 users using it simultaneously, suppose user 1 requests the data. So, if our program is not written well enough to handle the request properly then the following error might occur.
Suppose the user1 requests the data and it takes X amount of time for the request to be returned with a response by the server. And let’s imagine user 4 also requests for the data followed by user 5. So now our user 4 has to wait for X amount of time to add his request and user5 has to wait till X + whatever the amount of time user4 requests takes. Now if our application were to race against a tortoise, the tortoise would be sleeping because he surely would be leading by a lot. Not only in this scenario but in dozens of scenarios these types of blocking operations create an error. So what do we do?
Now here comes the hero to save the day! Yes, you guessed it is here, “Asynchronous function is here!!”. Asynchronous function as the name suggests gives us the option of escaping this synchronous path that we were forced to follow. To say it simply, it gives the program a jump or a skip over the codes that take a long time to give a response and skips over to the rest of the program, and returns when the response is finally there. I may have made it sound a little simple but in reality, it is much more complex than this. What the hell is the event loop anyway? is a YouTube video that goes into further detail about the things I have talked about briefly here.
Finally, let’s give an example of a simple asynchronous function:
async function sayHello(){
data = await fetch('https://poudelrishav.com.np')
console.log(`Hello luffy`)
}
sayHello()
console.log(`Luffy says HI!`)
Okay in this code, we have defined the asynchronous function sayHello()
This function is called and below that, a console log is called. Can you guess which console log, the one in the function or the one at the end will get printed first? If you guessed the one in the function, then you are wrong! Here our function sayHello() is an async function a async function always has a keyword called “await”. This keyword holds the function in place as the fetch() takes some time to return a response and continues running other statements, from outside of the function and finally after the fetch returns the response the code after the fetch in the function sayHello() runs.
So in this code block, sayHello() is called inside the async function await is used in fetch() which will give us a response object containing information on the URL provided which takes X amount of time. So the function is kept on hold. Then the rest of the code is run. And finally, after the fetch has a response the console.log below runs.
I hope this gave you somewhat of an understanding of the flow of a program that used synchronous and Asynchronous functions. And also some ideas on real-world scenarios where this might be used and also one a general understanding of the flow of a program.