Asynchronous JavaScript

A callback is a function passed as an argument to another function. It’s executed after an asynchronous operation is completed. This approach is one of the earliest methods for managing asynchronous behavior in JavaScript.

Example: Callback Function

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: "Alice", age: 25 };
    callback(data);
  }, 2000);
}

function displayData(data) {
  console.log(`Name: ${data.name}, Age: ${data.age}`);
}

fetchData(displayData);

In this example, fetchData simulates an asynchronous operation (e.g., fetching data from a server) using setTimeout. The displayData function is passed as a callback and is called when the data is ready.

Callback Hell

When you have nested callbacks, the code can become difficult to read and maintain. This is often referred to as “callback hell.”

doSomething(() => {
  doSomethingElse(() => {
    doAnotherThing(() => {
      console.log("All done!");
    });
  });
});

To avoid callback hell, JavaScript introduced promises.

A promise is an object representing the eventual completion (or failure) of an asynchronous operation. It provides a more structured way to handle asynchronous tasks and helps avoid callback hell.

A promise can be in one of three states:

• Pending: Initial state, neither fulfilled nor rejected.
• Fulfilled: The operation completed successfully.
• Rejected: The operation failed.

Creating a Promise

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "Alice", age: 25 };
      resolve(data);
    }, 2000);
  });
};

fetchData()
  .then((data) => {
    console.log(`Name: ${data.name}, Age: ${data.age}`);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

• resolve(): Called when the operation completes successfully.
• reject(): Called when the operation fails.
• .then(): Handles the result when the promise is fulfilled.
• .catch(): Handles any errors when the promise is rejected.

 

Chaining Promises

You can chain multiple .then() calls to handle a sequence of asynchronous operations.

fetchData()
.then((data) => {
  console.log(`Name: ${data.name}`);
  return data.age;
})
.then((age) => {
  console.log(`Age: ${age}`);
})
.catch((error) => {
  console.error("Error:", error);
});

Handling Multiple Promises: Promise.all()

Promise.all() takes an array of promises and returns a single promise that resolves when all of them have fulfilled.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve) => setTimeout(resolve, 1000, "foo"));

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // Output: [3, 42, "foo"]
});

Async/await is built on top of promises and provides a more readable, synchronous-looking way to write asynchronous code. It allows you to write asynchronous code using a “synchronous” syntax, which can make it easier to read and understand.

Using async and await

• async: The async keyword is used to declare a function that returns a promise.
• await: The await keyword is used inside an async function to pause execution until the promise resolves.

Example: Async/Await

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "Alice", age: 25 };
      resolve(data);
    }, 2000);
  });
};

async function getData() {
  try {
    const data = await fetchData();
    console.log(`Name: ${data.name}, Age: ${data.age}`);
  } catch (error) {
    console.error("Error:", error);
  }
}

getData();

• await fetchData() pauses the function execution until fetchData resolves.
• try...catch: Used to handle errors when using await.

 

Advantages of Async/Await

• Readability: Makes the code more readable and easier to follow, especially when dealing with multiple asynchronous operations.
• Error Handling: Allows using try...catch blocks for error handling, similar to synchronous code.

 

Chaining with Async/Await

You can chain multiple asynchronous operations in a readable way using async and await.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { name: "Alice", age: 25 };
      resolve(data);
    }, 2000);
  });
};

async function getData() {
  try {
    const data = await fetchData();
    console.log(`Name: ${data.name}, Age: ${data.age}`);
  } catch (error) {
    console.error("Error:", error);
  }
}

getData();

Asynchronous JavaScript allows for non-blocking code execution, which is crucial for handling time-consuming operations like network requests. Callbacks were the initial method for handling asynchronous tasks but could lead to nested and hard-to-maintain code (“callback hell”). Promises offer a more structured way to manage asynchronous tasks, allowing for chaining and error handling. Async/await is syntactic sugar over promises, providing a more readable, “synchronous-looking” way to write asynchronous code, making it easier to understand and maintain. Together, these concepts are essential for building modern, responsive web applications.