Table of contents
No headings in the article.
Today we all are going to know about one of the important properties of Javascript which is its Asynchronous nature. Now some of you are thinking what is Asynchronous? How it is related to Javascript?
Asynchronous is a technique of programming that enables you to start a long-running task with different tasks performed at the same time. Without disturbing any responsiveness, makes the tasks performed easily rather than waiting for a task to be performed. If you have studied C/C++ then you should have come to know about Threads which is the part of the Process which performed different functions at the same time parallelly for which you have studied about the thread. As Thread the Asynchronous nature is also the same.
As we are talking about the Asynchronous nature in the context of Javascript so the question arises is Javascript Asynchronous?
Javascript is Synchronous by nature means running the whole code as a single task without doing any parallel tasking.
I will explain the synchronous nature by just performing a simple program
const name = 'Amandeep';
const greeting = `Hello, my name is ${name}!`;
console.log(greeting);
//here code will run as a single task
//hence output is Hello, my name is Amandeep !
Let me take an example to make it more interesting this is will clarify your concept regarding the synchronous nature of Javascript.
console.log("Hii Welcome to my blog");
for(let i = 0;i<=10000000000;i++){
//take some time
}
console.log("Thank you for reading my vlog ");
//just try to run this code .
If you have run the above code then you came to know that for loop will take some time after that final code will run. In this way, we can say that Native Javascript is synchronous. From the above code, we have understood that the basic javascript is run as a single task in a single go.
So we can say that browser effectively steps through the program one line at a time, in the order, we wrote it. At each point, the browser waits for the line to finish its work before going on to the next line. It has to do this because each line depends on the work done in the preceding lines. This is the basic working of the Synchronous nature of Javascript
After getting the basic Idea of what is Javascript nature what is the meaning of Asynchronous? Now we are going to learn about the Asynchronous nature of Javascript and how we use it and many more things.
As above we talk about the Asynchronous same thing we will explain in the next example. That will give you more clarity about the Asynchronous nature of Javascript.
Before giving that example I am going to tell you about the setTimeout function it is a function which contains a function call back and also contains the delay time in ms (1s =1000 ms). This function is not part of the Native Javascript as it is present in runtime i.e browser or your vs code runtime of js that is NodeJs.
console.log("Hii");
setTimeout(function(){
console.log("Hello World!!!");
},4000)
//In this code you will see that Hii is printed then after 4000ms i.e 4s Hello world will be Printed
Now, We will see the example of the Asynchronous nature of JavaScript using the function setTimeout that is present in the runtime of the javascript.
console.log("Hii");
setTimeout(function(){
console.log("Hello World!!!");
},4000)
console.log("loop")
for(let i=0;i<=10000000000;i++){
//take some time
}
console.log("Having fun");
//Firstly Run this and See the output the read the explanation
Let us run this code line by line to understand the Asynchronous nature of Javascript
The first line is executed and simply Hii is displayed in the console.
Now, the second line of the code which is the setTimeout function that is present in the runtime of Javascript starts its execution.
But at the same time execution of the next line is also started as setTimeout is the Asynchronous runtime function.
Now we will get into, for loop as the setTimeout function does not interfere in the native Javascript execution. At this stage the execution of the setTimeout function is done then this function will go to the Event execution queue and wait until all the native Javascript is executed.
As for loop will execute and this will take some time and then will print the output of the next statement
The Event Loop will check whether there is any other Native Javascript code if not then will check the Event execution queue and the function present there will finally execute and its output will be printed on the console.
Hii
loop
Having fun
Hello World!!!
NOTE: Runtime functions do not interfere in the Native Javascript execution. After completing their execution they wait in the Event queue, after all the native Javascript is executed which is checked by the Event Loop. Then Event queue executes the runtime function one by one.
This will be the final output of the above problem.
Now, I think you have understood the basics of the Asynchronous nature of Javascript. Now we are going to look at the example where various setTimeout function is present which is to be executed at different time.
console.log("Hii")
setTimeout(function exec1(){ //firdt runtime
console.log("first timeout")
},4000)
setTimeout(function exec2(){ //second runtime
console.log("second timeout")
},0)
setTimeout(function exec3(){ // third runtime
console.log("Third timeout")
},6000)
console.log("Strating loop")
for(let i=0;i<=10000000000;i++){
//take some time
}
console.log("Having fun")
//try to solve it by yourself
So, Now we talk about the execution of the above code. Firstly, the first line is executed then the first runtime function is started we will not wait for its execution, we will move to the next line, and the second runtime function will be started parallelly similarly, the third runtime is started they all are working parallelly, now one with less time or which is executed first will get into Event queue at top, in this case, exec2 will come first in the queue then exec 1 then exec3 on the other hand execution of Native Javascript codes are continue. The event loop checks whether the execution of Native Javascript codes is done or not if yes then the Event queue is executed one by one. In this way, we will get the final output.
Hii
Strating loop
Having fun
second timeout
first timeout
Third timeout
Hope this will help you in understanding the concepts of the Asynchronous nature of Javascript. With these examples and by knowing their execution, now you can run various tasks at the same time by using runtime functions.
Hope You will like the Blog. For further doubts or questions you can comment below.