Asynchronous JavaScript - Introduction

Asynchronous VS  Synchronous: 

Before diving into the topic let us first understand the difference between Synchronous and Asynchronous JavaScript. In simple words synchronous codes are executed in sequential order i.e. each statement waits for the previous statement to finish before executing. On the other hand, you can execute the codes independently at your own pace using asynchronous JavaScript.

When to use Asynchronous JavaScript:

To be honest asynchronous JavaScript is here to "rescue us from the downfall of synchronous ".Have a look at the below image and guess the meaning of the quoted  line  

EXACTLY..! You guessed it right.

Asynchronous JavaScript governs the performance of the task which takes some time to complete. It is like begin something now and end it later but it is not the case in synchronous because it is single-threaded (only one thing happens at a time) like if you are waiting for the second task to be completed, all other remaining tasks stop until the second one is done.

So you can use Asynchronous JavaScript to make your website more responsive which reduces the waiting time for the users. Let me explain to you clearly with an example.

If we want to call a JavaScript function to make a network request to a database on another server to get some data, it would take maybe less or maybe more than 3 seconds to complete. So as in synchronous programming only one statement can run at a time this fetching of data stalls or stops the remaining statements to be executed which is termed as blocking the code because it blocks the next line of code from running until it gets the data back and this function is completed after those 2 or 3 seconds . Now you might think that 2-3 seconds is not that long to wait but what if we have multiple functions to get data, it would take more time right..! 

Synchronous

So this is the downfall of synchronous code and this is where asynchronous code comes into play to help us out and we got to know that probably it is not the best way to work with synchronous JavaScript at this juncture. So now remember the line I mentioned before( i.e begin something now and end it later ) this is the pattern we generally want to follow when running tasks that take some time to do like network requests for data to a database or an API. Now that particular function that is finishing later what we typically do is pass this function or this statement some kind of callback function as a parameter and that callback function is the thing that runs and finishes later on . Once the request is completed , the data comes back 

As we all know JavaScript executes code from top to bottom one by one, so when we get to the request function we use an asynchronous function to request our external data which means that the browser takes that request and handles it outside of the scope of a single thread in another part of the browser and it also takes a call back function and pushes it to one side so that it knows to execute this later on when the data comes back.

This is the part where JavaScript can carry on down the queue and run the remaining function all the while the request for data is still going on and finally we are allowed to call this callback function and finish the tasks.

Asynchronous

setTimeout()

setTimeout() is one of the functions that run the code asynchronously which executes a function or specific piece of code once the timer expires.

The syntax is 

For example, initially, we shall print some statements synchronously as below...

Now we shall print the same statements asynchronously using the setTimeout() function, here the statement "love" is executed after 5 seconds (5000 milliseconds = 5 seconds). You can clearly see that the statement after "love"

is not been hindered to be displayed unlike in synchronous code.

Conclusion

Thank you for coming this far. Hope this blog helped you to clear up any questions you had about the usage of asynchronous or synchronous JavaScript.

Connect to me on LinkedIn here.