Jun 8, 2022
Here’s what Asynchronous means for JavaScript.
Use the Power of Async functions by using Async/Await in JavaScript and get the work done.
Many languages support an object-oriented approach. Every language has its take on functions and there are also many major scripting languages like Python, PHP, C#, etc.
It is the async nature of JavaScript that makes it different and difficult to handle since it is JavaScript exclusive. There are not many languages that do support asynchronous tasks.
I also wrote an article about JavaScript features that are needed to learn React, and this article is also an installment of that series only, so if you haven’t read that one then here is the link for it. Be sure to check that out if you also want to dive into some React stuff.
So let’s get started. 😄.
What is the asynchronous nature of JavaScript?
According to the Oxford dictionary, Asynchronous means something not occurring or existing at the same time as another thing.
It means that if two tasks have to be done, one fast and the other one is slow, then the JavaScript compiler would make the fast task run and as soon as the slower task finishes executing, the JavaScript compiler would leave the fast task and would then run the slow task.
If handled correctly, then this feature works like magic and can let you run some tasks like user data input while delaying other tasks like processing that data and laying them out in a meaningful way.
So, now that we know what is Asynchronous, let’s see some of the examples where the Asynchronous nature of JavaScript is used.
document.write("Hi");document.write("<br>");setTimeout(() => {document.write("Let us see what happens");}, 2000);document.write("<br>");document.write("End");document.write("<br>");
In the above example, the setTimeout function is asynchronous, meaning the program will start executing as normal and all the document.write() functions would execute, but after 2 seconds, the setTimeout function would execute and print the text on the screen.
The setTimeout function would only execute after 2 seconds, no matter if it is placed after a block of text or at the very top of the page.
setTimeout is an example of asynchronous functions. It is not in the regular flow of execution of the program and works on a different thread than the rest of the program.
This was the async nature of JavaScript. We can make use of this async nature by making our functions using async-await.
Async/Await in JavaScript
Async keyword before declaring a function would make it asynchronous and would also remove it from the natural execution flow of the program.
The function would work on a different thread that is non-blocking and would continue its execution until it is finished, while the rest of the program would work on a blocking thread and would execute as it should be.
The async function approach is best when we need to fetch some data from an API that might take a little time.
The await keyword would wait for the process to complete and would only then execute. This is an example of using async-await along with fetch API for API calls.
async function getdata(){
let response = await fetch('API URL');
console.log(response);
console.log('this would log first before the API call processed')}
The only function that is declared with the async keyword can use await keyword and it cannot be used outside of the function.
Here is some advice, use async-await whenever you fetch data from somewhere or work with some data processing using an API.
It would always be used in places like these, so it is no harm to use them even if you feel there is the slightest chance that you work with that kind of thing.
Conclusion:
This is everything Async-await in JavaScript.There is one more way to handle API calls in JavaScript. We can also make use of JavaScript promises, although using async-await is the best way to deal with async functions since it requires less boilerplate code and is less prone to bugs.
Follow me on Twitter and on Medium, where I post content like this daily.
I hope you have a good day. 😊
