• Janarthanan Soundararajan

A journey from callback to async/await - Handling asynchronous in JavaScript.

Updated: Oct 25, 2019

JavaScript! One of the star contender in programming languages. It has immense community support all over the world. Even big companies give their contribution to JavaScript-based projects. Job opportunities are huge. The modern JavaScript is more mature, which has the best features to improve the quality, scalability, and productivity of software development. Handling asynchronous is one of the essential traits of modern JavaScript development.


Before we move on further, we must know about asynchronous programming.


Asynchronous Programming

Asynchronous programming is an ability to run the tasks parallelly. In synchronous programming, tasks will execute one by one. A job needs to wait for the completion of the previous task. It is called Blocking this problem is not in asynchronous programming. Asynchronous programming helps to utilize the ability of multiple-core processing. It increases the efficiency of a software product.


Asynchronous JavaScript

Now we know the importance of asynchronous programming. But basically, tasks are handled by single-thread in JavaScript. No problem! Modern JavaScript engines can asynchronously handle some particular jobs. For example, Web API.

The following are the three ways we can handle the asynchronous in JavaScript.

  1. Callback

  2. Promise

  3. Async/Await


1. Callback

JavaScript asynchronously performs all Web API calls. Some tasks depend on the result from the server. So it should be correctly handled. One way is using the callback.

In JavaScript, we can pass the function as a parameter to another function. It helps to do the callbacks in JavaScript. A callback function will be executed after a function completed its execution.

In the example, we are sending the divideByTwo function as a parameter to the simpleAddition function through the callback argument. Calling the callback function means we are calling the divideByTwo.


So how it will help to handle the asynchronous task?

Let's assume the simpleAddition function as an asynchronous function. We have our logic in divideByTwo. If we send the divideByTwo function to simpleAddition means we are asynchronously executing the divideByTwo instead of waiting for a result from simpleAddition. By this, our code will be executed asynchronously inside the simpleAddition function.


See the example using the fetch API.

2. Promise

Now we know how to use the callback functions. It will help to understand the syntax of the promise. Because we'll use the callback function to create the promise.


The promise is one of the ways to handle the concurrent tasks in JavaScript. By using promise, we can write the code to wait until the asynchronous task finishes. Promise constructor takes a callback function that callback function takes two arguments one is resolve, and another one is reject.


The promise has three kinds of states such as finished or resolved, pending, and rejected. See the following code.

To handle the promise we have to use the then method. See the example using the fetch API. then

Using the promise instead of callback seems more readable. And we can handle the exceptions better.


3. Async/Await

It is an important improvement in asynchronous JavaScript. An async function helps to handle the promises more conveniently. It has more clear syntax than using 'then' to manage the promises. An async function looks like the normal JavaScript function but it has 'async' keyword before the functions. It runs the tasks asynchronously using the event loop and return the implicit promise.


async function myFunction() {

// return promise

}


The 'await' keyword use to resolve the promise, this keyword only can use inside the async function. See the following.

It does the handling the promise lot cleaner and easier. To handle the exception we can use the normal try-catch syntax.

I hope it helps to understand the asynchronous JavaScript and how handling asynchronous evolved from callback to async/await. I appreciate your comments. So, if this blog post needs any improvements or changes please comment below.


Thank you!

#javascript #asynawait #programming

©2020 by Techaaroorian.

  • Pinterest
  • Twitter Social Icon
  • Facebook
  • YouTube