Working of Asynchronous JavaScript

In this article we will see how Asynchronous JavaScript works. But before starting we should understand what is synchronous and asynchronous and is JavaScript Asynchronous?

Synchronous Programming In synchronous programming the program is executed sequentially and one task is performed at a time, If one task is being performed then the next task has to wait till the first task gets completed, then after the completion of first task only next task gets executed. If some task is taking long time to finish then your program will stop till the task gets finished and you will not be able to perform other operations.

Asynchronous Programming In asynchronous programming we can perform multiple tasks at a same time. When the task finishes the program gets informed and perform the operation based on these tasks. So in asynchronous programming we can perform more tasks in shorter period of time and also program is not stopped when a task is being performed.

Now we understood what is synchronous and asynchronous programming. Now we will check why we should we use asynchronous JavaScript and how it will work.

So as we know JavaScript is single threaded and it blocks the program for a particular task so in JavaScript we perform various operations through Web APIs which are asynchronous in nature and gets the result back on mail thread.

So before explaining concept technically I will illustrate a small story then we will compare that story with asynchronous tasks that are being performed in JavaScript.

  • As most of us work in an organization there are 3 main persons which perform task. There are many others people in an organization but for now just imagine these people as core members. These are manager, developers and tech lead. So If a manager gets any task he assigns it to the whole team which includes all the developers who built/fix things in any project. So once all the developers completes the tasks they inform their tech lead that they are done with their work and now their tech lead can show it to the manager. Manager will also not directly interact with every developer and verify their work he just ask the tech lead whether the work is done or not. Manager keep checking with tech lead whether the work is done or not once its done, he takes it from the tech lead and present it to the clients.*

Similarly the Asynchronous JavaScript works it doesn't perform asynchronous operations on its main thread. For eg: When we fetch data from API we use Fetch method so it is performed on browser(engineers) and once the fetching is complete it puts the result in event queue(tech lead) just like previous example once the browser completes fetching data it puts it in event queue which is similar to (tech lead) from previous story now there is event loop which keep on checking whether the event queue has something in it or not. If he finds there is some data then in it then it puts it in the call stack(manager) and once the call stack is free it executes the data and perform the required operation.

So this is how asynchronous operations take place in JavaScript. Timer, Network call and Fetch operations are performed like this only.