In this article, we shortly recap synchronous functions and then head over the asynchronous functions in JavaScript, and at the end of this article, you understand asynchronous javascript functions!

Synchronous JavaScript

To understand what asynchronous JavaScript is, we need to know what synchronous JavaScript is.

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);
});

While each operation is being processed, nothing else can happen, rendering is paused. Only one thing can happen at a time, on a single main thread, and everything else is blocked until the operation completes.

Asynchronous JavaScript

A lot of web API’s require asynchronous code to be able to run. Mostly when fetching data from an external service such as a network.

With asynchronous data, you can’t just fetch data from the source, for example, if you want to use an image you can immediately after you call the fetch to use the data since you don’t know how long it takes to download the image.

With Async, javascript comes that there are two methods to handle asynchronous data.

Async Callbacks

Async callbacks are functions that are specified as arguments when calling a function which will start executing code in the background.

btn.addEventListener('click', () => {
  alert('You clicked me!');

  let pElem = document.createElement('p');
  pElem.textContent = 'This is a newly-added paragraph.';
  document.body.appendChild(pElem);
});

#api #tech #javascript #programming #asynchronous-javascript