JavaScript, being a single-threaded language, can only process one task at a time. This can result in long wait times for complex tasks, as the script will be blocked from executing any other tasks until it has been completed. To tackle this, JavaScript offers asynchronous programming, which allows the script to continue executing other tasks while it waits for an asynchronous task to complete. In this blog, we’ll explore the basics of asynchronous programming in JavaScript and how it can be achieved through the use of callback functions, promises, and async/await.

Callback Functions

A callback function is a function that is passed as an argument to another function and is executed after the main function has been completed. Callbacks are used in asynchronous programming to wait for a task to complete before executing the next step.

For example, consider the following code:

function slowTask(callback) {
  setTimeout(() => {
    console.log("Slow task completed.");
    callback();
  }, 1000);
}

function runProgram() {
  console.log("Program started.");
  slowTask(() => {
    console.log("Callback function executed.");
  });
  console.log("Program ended.");
}

runProgram();

In this example, the slowTask function takes a callback as an argument. The slowTask function uses setTimeout to delay the execution of a task for one second. The runProgram function calls slowTask and passes a callback function as an argument. The runProgram function also logs "Program started" and "Program ended". When the slowTask function has been completed, it logs "Slow task completed" and executes the callback function, which logs "Callback function executed".
The output will be:

Program started.
Program ended.
Slow task completed.
Callback function executed.

Promises

Promises are a more modern approach to asynchronous programming in JavaScript. A promise represents the result of an asynchronous operation and can be in one of three states: pending, fulfilled, or rejected. A promise can be created using the Promise constructor, and its state can be determined using the then and catch methods.

For example:

const slowTask = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Slow task completed.");
  }, 1000);
});

function runProgram() {
  console.log("Program started.");
  slowTask
    .then((result) => {
      console.log(result);
    })
    .catch((error) => {
      console.error(error);
    });
  console.log("Program ended.");
}

runProgram();

In this example, slowTask is a promise that is resolved after one second with the result "Slow task completed.". The runProgram function calls slowTask and uses the then method to log the result when the promise is fulfilled.

The output will be:
Program started.
Program ended.
Slow task completed.

Async/Await

Async/await is the latest and most readable way to handle asynchronous operations in JavaScript. It allows developers to write asynchronous code that looks like synchronous code, making it easier to understand and maintain. The async keyword is used to declare an asynchronous function, and the await keyword is used to wait for a promise to be resolved.

Here is an example to demonstrate the use of async/await in JavaScript:

async function fetchData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

fetchData();

In this example, the fetchData function is declared as asynchronous using the async keyword. The function uses fetch to retrieve data from an API, and await is used to wait for the fetch operation to complete. The resolved response is then transformed into a JSON object using response.json(). The await keyword is used to wait for the JSON transformation to complete, and the final result is logged to the console.

It's important to note that the code within an asynchronous function will be executed asynchronously, but the code outside of the function will still be executed synchronously. Also, the await keyword can only be used within an asynchronous function.

In conclusion, asynchronous programming in JavaScript allows the script to continue executing other tasks while it waits for an asynchronous task to complete. Callback functions, promises, and async/await are three ways to achieve asynchronous programming in JavaScript. Callback functions are the simplest and most basic way to handle asynchronous operations, while promises offer a more modern and flexible approach. Async/await provides the most readable way to handle asynchronous operations and is the recommended method for modern JavaScript programming. Understanding asynchronous programming in JavaScript is important for creating efficient and responsive applications, and is a must-have skill for any JavaScript developer.