Understanding Asynchronous JavaScript: Callbacks, Promises, and Async/Await

Quick Summary (TL;DR)

JavaScript is a single-threaded language, meaning it can only do one thing at a time. Asynchronous operations allow your program to start a long-running task (like a network request) and continue to run other code without waiting for it to finish. The way we handle this has evolved:

1. Callbacks: The original method. A function is passed as an argument to another function, to be executed later when the operation completes. This often leads to messy, nested code known as “callback hell.”
2. Promises: A major improvement introduced in ES6. A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation. They allow you to chain asynchronous tasks in a much cleaner way using .then() and .catch().
3. Async/Await: Introduced in ES2017, this is modern syntactic sugar built on top of Promises. It lets you write asynchronous code that looks and behaves like synchronous code, making it much more readable and easier to reason about.

Key Takeaways

• JavaScript is Non-Blocking: Asynchronous operations prevent your application from freezing while waiting for tasks like API calls or file reads to complete.
• Promises are the Foundation: Promises are the core building block for managing async operations in modern JavaScript. They represent a future value.
• Async/Await is the Best Practice: For new code, async/await is the preferred syntax. It provides the cleanest and most readable way to write and reason about asynchronous logic.

---

1. The Old Way: Callbacks

A callback is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

function fetchData(callback) {
  setTimeout(() => {
    const data = { message: 'Data received' };
    callback(null, data); // First argument is for an error
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error('Error:', error);
  } else {
    console.log(data.message); // "Data received"
  }
});

The problem arises when you need to perform multiple asynchronous operations in sequence. This leads to deeply nested callbacks, often called “callback hell” or the “pyramid of doom,” which is very difficult to read and maintain.

2. The Better Way: Promises

A Promise is an object that will produce a value at some point in the future. It can be in one of three states:

• Pending: The initial state; not yet fulfilled or rejected.
• Fulfilled: The operation completed successfully, and the Promise has a resulting value.
• Rejected: The operation failed, and the Promise has a reason for the failure.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { message: 'Data received' };
      // To test error, uncomment the next line
      // reject("Failed to fetch data");
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data.message); // "Data received"
    return 'Processed: ' + data.message;
  })
  .then((processedData) => {
    console.log(processedData); // "Processed: Data received"
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Promises allow you to chain .then() calls to handle sequential asynchronous operations in a much flatter, more readable structure. The .catch() method provides a single place to handle any errors that occur in the chain.

3. The Modern Way: Async/Await

async/await is syntactic sugar that makes working with Promises even more intuitive. It allows you to write asynchronous code that looks synchronous.

• async: The async keyword is placed before a function declaration to turn it into an async function. An async function always returns a Promise.
• await: The await keyword can only be used inside an async function. It pauses the execution of the function and waits for a Promise to be resolved. It then returns the resolved value.

// We can reuse the same promise-based fetchData function from before

async function processData() {
  try {
    console.log('Fetching data...');
    const data = await fetchData(); // Pauses here until the promise resolves
    console.log(data.message); // "Data received"

    const processedData = 'Processed: ' + data.message;
    console.log(processedData); // "Processed: Data received"
  } catch (error) {
    console.error('Error:', error);
  }
}

processData();

Error handling is done using a standard try...catch block, which many developers find more natural than the .catch() method of Promises.

Common Questions

Q: Is async/await a replacement for Promises? No, it’s just a different way to work with them. async/await is built on top of Promises. You still need to understand how Promises work to use async/await effectively.

Q: How do I run multiple asynchronous operations in parallel? You can use Promise.all(). This method takes an array of Promises and returns a single Promise that resolves when all of the input Promises have resolved. You can use this with await to run multiple operations concurrently and wait for them all to finish.

const [userData, productData] = await Promise.all([fetchUser(), fetchProducts()]);

Related Topics

• The JavaScript Event Loop Explained
• A Guide to Making API Calls with the Fetch API

Need Help With Implementation?

Effectively managing asynchronous operations is crucial for building responsive and performant JavaScript applications. Built By Dakic offers expert JavaScript consulting to help your team master modern async patterns and build robust, scalable applications. Get in touch for a free consultation.