Callback vs Promise vs Async/Await in JavaScript

Callback, Promise, and async/await are all different ways to handle asynchronous operations in JavaScript.

Callback

A callback is a function that is passed as an argument to another function and is executed after the first function completes its operation. Callbacks are commonly used in JavaScript for handling asynchronous operations, such as making an HTTP request.

function getData(callback) {
  setTimeout(() => {
    const data = 'Some data';
    callback(data);
  }, 1000);
}
 
getData((data) => {
  console.log(data);
});

Promise

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises provide a simpler way to handle asynchronous operations compared to callbacks by allowing you to chain multiple operations together and handle errors in a more elegant way.

function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Some data';
      resolve(data);
    }, 1000);
  });
}
 
getData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  });

Async/Await

Async/await is a more recent addition to JavaScript that provides a way to write asynchronous code that looks and behaves like synchronous code. It uses the async keyword to declare a function that returns a promise, and the await keyword to wait for a promise to resolve before continuing with the execution.

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Some data';
      resolve(data);
    }, 1000);
  });
}
 
async function main() {
  const data = await getData();
  console.log(data);
}
 
main();

Pros and Cons using callbacks, promises, and async/await in JavaScript

Callbacks

Pros:

• Simple to understand and widely supported across many older JavaScript libraries and APIs.
• Can handle multiple asynchronous operations in parallel.

Cons:

• Can lead to callback hell, where code becomes deeply nested and difficult to read.
• No built-in mechanism for error handling.

Promises

Pros:

• Avoid callback hell by chaining asynchronous operations in a more readable way.
• Built-in error handling with .catch method.
• Can be combined or transformed using higher-order functions such as .then and .map.

Cons:

• Not as widely supported as callbacks, especially in older codebases.
• Slightly more complex to understand compared to callbacks.

Async/Await

Pros:

• More readable and concise compared to callbacks and promises.
• Built-in error handling with try-catch blocks.
• Can be used with promises and async functions.

Cons:

• Only supported in modern browsers and Node.js environments.
• Async/await functions cannot be used with older APIs that only support callbacks.

In conclusion, it’s a trade-off between simplicity and readability. Callbacks are the simplest to understand and widely supported but can lead to callback hell. Promises are more readable and have built-in error handling, but are less widely supported. Async/await is the most readable, but only supported in modern environments.