Asynchronous Concept in JavaScript
Understanding the Asynchronous concept in JS by relating it to real life.
Asynchronous in JavaScript is the most confusing but yet most interesting and important concept that is being introduced in JavaScript. It gives the special power and strength to the JS.
In this section, we will deal with Asynchronous JavaScript and it’s a Fairly Advanced Topic. I have tried my best to make this topic more simple and easier to understand by adding real-life situations to this concept.
To understand the Asynchronous JavaScript it's really important to know about the Synchronous and Asynchronous Programming model.
Synchronous Programming Model
If we write multiple lines of code and try to execute those code then in Synchronous Programming Model each line of code will be executed in a sequence one after another i.e means a top line of code will be executed first then the second line of code will execute then the third line, followed by the fourth line….. so on and so forth unless it reaches the last line of code.
We can say that in the Synchronous Programming Model things happen once at a time this means that code can not create a new Thread and run in Parallel. We can execute a single line of code at a time and multiple lines of code can not be executed at the same time.
Synchronous Situation in Real Life
To understand what synchronous concept is ? in an even easier way we can imagine a real-life situation where we are in a Queue to get a Movie Ticket. We can not get one until everybody in front of us gets one.
Hence we can say that Synchronous Execution means execution that happens in a sequence one after another.
So we can relate the working of the Synchronous Programming Model with the above real-life situation.
Asynchronous Programming Model
In Asynchronous Programming Model multiple lines of code can be executed at the same time in a random sequence because Asynchronous Programming does not wait for a particular line of code to get executed and then execute the next line of code rather It starts executing another line of code in the background.
Asynchronous Programming Model is just opposite to Synchronous Programming Model
So the Asynchronous Programming model allows multiple things to happen at the same time this means code can create a new Thread and can run in parallel. This way Multiple Lines of code can be executed in one go and this is the biggest advantage of Asynchronous Programming over the Synchronous Programming model.
Asynchronous Situation in Real Life
To understand what the Asynchronous concept is ? in an even easier way we can imagine a real-life situation where a person is making notes from a YouTube lecture here that person is performing multiple tasks at the same time i.e watching, listening, and making notes from the lecture.
Hence we can say that Asynchronous Execution means execution that happens altogether in a random sequence at the same time.
So we can relate the working of the Asynchronous Programming Model with the above real-life situation.
Now we have a basic understanding of what Synchronous and Asynchronous Programming means and We are ready to deal How this concept is helpful and implemented in JavaScript.
Asynchronous Concept in JavaScript
JavaScript is by default a Synchronous Programming Language. That means the code written in JS is executed line by line from top to bottom in a sequence one after another.
JavaScript is a single Thread Programming Language i.e means JS engine can only process one statement at a time in a single Thread.
“Who can wait quietly while the mud settles? Who can remain still until the moment of action?” — Laozi, Tao Te Ching
To understand the importance and existence of the Asynchronous Concept in JavaScript let's imagine a situation where we have to request some data from the server. The request can be made to the server either Synchronously or Asynchronously.
- Requesting Data from server Synchronously
When we request data from the server synchronously then depending upon the situation server might take some time to process the request and unless the request is fulfilled or processed, In a synchronous condition where one task is executed at a time hence the main thread will be blocked which makes the whole web page unresponsive until the data arrives from the server that means we can not surf the webpage and have to wait unless and until our requested data arrives from the server. Web Page will only become responsive after receiving the requested data from the server.
To resolve the above problem, the Asynchronous concept is introduced in JavaScript.
- Requesting Data From Server Asynchronously
As we know that Asynchronous is capable of doing multiple tasks at the same time and also gives them the freedom to process the data in the background which makes the Asynchronous concept a better option for Requesting data from the server as compared to Synchronous Concept in JS.
In place of Synchronous if we use the Asynchronous concept with JS for requesting data from the server then we can request data from the server without blocking the whole webpage and also the user does not have to wait to access the webpage unless data is being received from the server.
This means by using Asynchronous Concept while requesting data from the server we can perform multiple tasks at the same time i.e
- Making data requests to the server in the background.
- Surfing the webpage at the same time unless data is received means the webpage will not be blocked while processing data from the server.
This is the advantage of Asynchronous Concept over Synchronous Concept in JavaScript.
Application of Asynchronous Concept in JS
Asynchronous Concept in JS is basically used in the Client-Server Model for requesting data from the server and it's one of the most important applications of Asynchronous Concept in JS.
To understand why Asynchronous is the best option or most preferred in the Classic web application model (client-server model) lets us assume a Client-Server Model where a client has to fetch two resources from the server, let's see how its works in more detail.
Synchronous Concept in Client-Server Model
If we use the Synchronous Concept in Client-Server Model to request data from the server then we can only process one request at a time.
In Synchronous Programming when we try to implement the above task since Client has to make two requests to the server to get resources.
And we know that through Synchronous Programming we can execute one request at a time means after completion of the first request, the second request will be processed and its the major drawback of Synchronous Programming due to which The total time taken will be at least the sum of the two response time and even webpage will be blocked or become unresponsive while the request is being processed means client can not able to surf the webpage unless and until requested data is arriving from the server hence Client has to wait for the longer duration.
To solve the above drawback Asynchronous Concept is Introduced in JavaScript
Asynchronous Concept in Client-Server Model
If we use Asynchronous Concept in Client-Server Model to request data from the server then we can process multiple requests at the same time in a random sequence.
If we implement the above task by using Asynchronous Programming then the client can execute both the request at the same time even if the First request is not finished or received from the server the Second request can be processed at the same time in the background without waiting for the first request to get finished. This way we can process two requests at the same time.
Since both the request are processed at the same time therefore it will not take much time to process the request and the time taken to display the result will be less as compared to Synchronous Programming also the webpage will not be blocked while the request is being processed in case of Asynchronous Programming
AJAX (Asynchronous JavaScript And XML)
AJAX is being used to process the request from the server Asynchronously. AJAX stands for Asynchronous JavaScript And XML. AJAX is not a programming language, it's a technique for accessing web servers from a web page. AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Hence Asynchronous Concept gives the more optimized solution to perform the network request to the server as compared to the Synchronous concept. Therefore Asynchronous Concept is preferred over Synchronous Concept in JavaScript for making a network request in the client-server model
Implementation of Synchronous Code in JS
Since JavaScript is by default a Synchronous Programming Language. therefore code written in JS is by default considered as a Synchronous code as it will execute from top to bottom in a sequence one after another.
Below is the Implementation of Synchronous Code in JS.
The above lines of code will be executed from top to bottom in a sequence one after another. Hence OUTPUT of the above code is also in a sequence of written code.
Implementation of Asynchronous Code in JS
Asynchronous code in JS can be implemented in various ways like Through
- Call Back function
- Promise
- Async/Await
are some of the ways to implement the Asynchronous concept in JavaScript. Let's use Call Back Function for implementing Asynchronous code in JS and it's really the simplest way of doing this.
Implementing Asynchronous by using Call Back function
Call Back Function is one of the simplest methods for implementing the Asynchronous concept in JS. We use the setTimeout() Function with Call back Function to achieve the Asynchronous concept in JS.
Call Back Function
A Callback function is a function passed into another function as an argument, which is then invoked inside the outer function.
setTimeout() Function
A setTimeout() Function is basically used to set a timer in JS code so that the code written inside the setTimeout() function will execute after a delay of a certain period of time
In setTimeout() Function we can include timer in millisecond (ms).
1000ms = 1sec
Below is the Implementation of Asynchronous Code in JS.
The above lines of code will be executed from top to bottom in a sequence one after another. But due to setTimeout() Function the code will be executed in a random sequence because the code inside the setTimeout() Function will execute after the time delay of 7sec but that delay will not stop the code execution and the next line of code will be executed and the code inside the setTimeout() Function will wait in the background for the time delay of 7sec and after 7sec code will execute and display the output. In this way, we can implement the Basic Asynchronous concept in JS. Though there are more ways to implement this concept and I will deal with those methods in detail in my next blog.
Conclusion
So till now, we have deal with
- Synchronous and Asynchronous Programming model by relating it to the real-life situation
- Synchronous and Asynchronous Concept in JavaScript
- Application of Asynchronous Concept in JavaScript
- Implementation of Synchronous Code in JavaScript
- Implementation of Asynchronous Code in JavaScript
I hope this blog was helpful to you for understanding the above concept of JavaScript.
If you like to Explore more on Asynchronous JavaScript then I would recommend these resources
I hope u have liked this article any questions related to this I would Love to answer those you can find me on Twitter or LinkedIn lets connect.
