Asynchronous Javascript
Synchronous code runs sequentially. Means execution of code happens one by one. Each task need to wait for its previous task to complete. But Asynchronous means code runs in parallel. It means there is no any waiting time or no need to wait for any task to complete. Execution is continuously going on. So how actually it happens. In this article we are going to cover this.
In previous article we have seen that how javascript works. Also we have seen that javascript is single threaded language. Now surely this questions will comes in our mind that if javascript is single threaded then how asynchronous code will work here. Because Asynchronous programming is a technique that enables your program to start a potentially long-running task, rather than having to wait until that task has finished, to be able to continue the other events while the task runs.
So lets understand this by one example and after end of this article you will get how Asynchronous Javascript works –
As you can see in the diagram we have total 3 console.log() statements there. Once we will run this program output will be below-
Now how the execution has been done here. Firstly it will execute console.log(“1”). Then it went to setTimeout function. And setTimeout is actually asynchronous. It means it is executed in the background therefore it had to wait for 1 second(timer which we have provided). So for 1 second we don’t want to keep waiting thats why it went to the third statement i.e console.log(“3”) and executed this. Thats why second output is 3. Then after 1 second is over it printed 2.
How are we actually able to do this. Heres again the Javascript engine comes in to the picture. In order to execute javascript code when it comes to asynchronous javascript it is not just javascript engine that is envolved. There is complete javascript runtime environment. Now we will see this in detail.
You can see the javascript runtime environment in the above diagram. And with the help of this only we will understand that how asynchronous code get executed in javascript engine. Will take the same example which we have seen above.
- Any line of code first come to stack for execution. In our case also console.log(“1”); first come to the stack for execution and it will execute there and it print 1 successfully. – Output – 1
- After execution console.log(“1”) will be popped off from the stack.
- Now the next thing is setTimeout(() => { console.log(“2”); }, 1000); will be pushed into the stack. Now here is one important point need to remember that setTimeout is not a part of javascript. Its actually a part of web API. Web APIs gives various apis like DOM, AJAX etc. So as setTimeout is a part of web API , so stack will not execute it. Instead it will send it to the web API. So stack will pop out this setTimeout function and it pushes into web API .
- Now once setTimeout comes into the web API, web API see 1000ms of wait time there. So it will simply wait for 1000ms.
- Then next console.log(“3”) will be pushed into the stack because our stack is empty right now. So this code will execute and it will print 3 successfully. After execution this line will be popped out from the stack. Meanwhile web API is still waiting because 1000ms is still not completed. – Output – 3
- Now let’s say 1000ms is over , so web API will push the console.log(“2”) into the callback queue. because setTimeout having the callback function. Callback is nothing but the piece of code which is executed after certain period of time. And callback queue used to keep track of all callbacks. And we know queue means First come first serve. So if there are other statements before console.log(“2”) then callback queue will execute them first then this statement will get executed.
- Now event loop comes into the picture. Event loop constantly checking if the stack is empty and if the stack is empty is there is anything in callback queue. So in our case yes the stack is empty right now and there is one callback. So event loop just popped out that console.log(“2”) from the callback queue and pushed into the stack. And stack will execute this statement and it will print 2 successfully. And after execution that statement will also popped out from the stack. – Output – 2
- So now the final output is 1,3 and 2. So this is how Asynchronous Javascript code gets executed inside the javascript engine.
