DEV Community

Cover image for Mastering Asynchronous Programming in JavaScript
Matin Mollapur
Matin Mollapur

Posted on

Mastering Asynchronous Programming in JavaScript

Asynchronous programming is an essential concept in JavaScript that allows non-blocking execution of code. This means JavaScript can perform multiple operations concurrently without getting blocked. Asynchronous JS relies primarily on callbacks, promises and async/await. In this article, we'll understand how to use these tools to write asynchronous code.

Callbacks

Callbacks are functions that are passed as arguments to other functions to be executed at a later time. For example:

function doTask(callback) {
  // do something
  callback(); // execute callback
}

doTask(function() {
  // this is the callback  
});
Enter fullscreen mode Exit fullscreen mode

Callbacks are used in many asynchronous JavaScript operations like fetching data, event handling, timeouts etc. A drawback is callback hell or pyramid of doom caused by nesting several callbacks.

Promises

Promises represent the future value of an asynchronous operation. They can have three states - pending, fulfilled or rejected. We handle promises with .then() and .catch():

function asyncFunc() {
  return new Promise((resolve, reject) => {
    if (success) {
      resolve(value); // fulfilled
    } else { 
      reject(error); // rejected
    }
  });
}

asyncFunc()
.then((result) => {
  // handle fulfillment 
})
.catch((error) => {
  // handle rejection
});
Enter fullscreen mode Exit fullscreen mode

Promises avoid callback hell and make asynchronous code linear using chaining. Multiple promises can be executed concurrently with Promise.all().

Async/Await

Async/await makes asynchronous code look like synchronous code. The async keyword before a function designates it as asynchronous and await pauses execution until a promise resolves or rejects.

async function asyncFunc() {
  const result = await promiseBasedFunc(); 
  // other sync operations
  const value = await someOtherFunc();
  return result;
}
Enter fullscreen mode Exit fullscreen mode

Try/catch blocks can be used for error handling. Async/await makes asynchronous code very readable compared to callbacks and chaining promises.

So in summary, callbacks offer basic asynchronous capabilities, promises improve code structure, and async/await make it sync-like. Mastering these techniques will help you write efficient asynchronous JavaScript code.

Top comments (0)