JavaScript - Synchronous and Asynchronous

 

JavaScript is a single-threaded programming language which means only one thing can happen at a time. That's where asynchronous JavaScript comes into play. Using asynchronous JavaScript (such as callbacks, promises, and async/await), you can perform long network requests without blocking the main thread

Synchronous JavaScript: 

As the name suggests synchronous means to be in a sequence, i.e. every statement of the code gets executed one by one. So, basically, a statement has to wait for the earlier statement to get executed.

 

To allow us to understand what asynchronous JavaScript is, we ought to start off by making sure we understand what synchronous JavaScript is. 

A lot of the functionality we have looked at in previous learning area modules is synchronous — you run some code, and the result is returned as soon as the browser can do so. 

const btn = document.querySelector('button');

btn.addEventListener('click', () => {

  alert('You clicked me!');

 

  let pElem = document.createElement('p');

  pElem.textContent = 'This is a newly-added paragraph.';

  document.body.appendChild(pElem);

});

In this block, the lines are executed one after the other:

1. We grab a reference to a <button> the element that is already available in the DOM.
2. We add a click event listener to it so that when the button is clicked:
1. An alert() message appears.
2. Once the alert is dismissed, we create an <p> element.
3. We then give it some text content.
4. Finally, we append the paragraph to the document body.

While each operation is being processed, nothing else can happen — rendering is paused. This is because as we said in the previous article, JavaScript is single-threaded. Only one thing can happen at a time, on a single main thread, and everything else is blocked until an operation completes.

So in the example above, after you've clicked the button the paragraph won't appear until after the OK button is pressed in the alert box. You can try it for yourself:

 

Asynchronous JavaScript: 

Asynchronous code allows the program to be executed immediately where the synchronous code will block further execution of the remaining code until it finishes the current one. This may not look like a big problem but when you see it in a bigger picture you realize that it may lead to delaying the User Interface

 

For reasons illustrated earlier (e.g. related to blocking), many Web API features now use asynchronous code to run, especially those that access or fetch some kind of resource from an external device, such as fetching a file from the network, accessing a database, and returning data from it, accessing a the video stream from a webcam, or broadcasting the display to a VR headset.

Why is this difficult to get to work using synchronous code? Let's look at a quick example. When you fetch an image from a server, you can't return the result immediately. That means that the following (pseudocode) wouldn't work:

let response = fetch('myImage.png'); // fetch is asynchronous

let blob = response.blob();

// display your image the blob in the UI somehow

That's because you don't know how long the image will take to download, so when you come to run the second line it will throw an error (possibly intermittently, possibly every time) because the is not yet available. Instead, you need your code to wait until the is returned before it tries to do anything else to it. There are two main types of asynchronous code style