Callbacks vs. Promises vs. Async/Await: Detailed Comparison

#javascript #programming #webdev #tutorial

Introduction:
Asynchronous programming is a cornerstone of modern JavaScript development, enabling tasks to be executed concurrently without blocking the main thread. Over time, JavaScript has evolved with more elegant solutions for handling asynchronous operations. In this article, we'll explore the evolution of asynchronous JavaScript, starting from traditional callbacks and progressing to promises and the async/await syntax.

Callback Functions: Traditionally, JavaScript used callback functions to handle asynchronous operations. Callbacks allow you to define a function to be executed once an asynchronous task completes. However, as codebases grew larger and more complex, the callback-based approach led to issues such as callback hell and poor code readability.

example:

const datas =[
  {name:"kishan",profession:"software Engineer"},
  {name:"Anuj",profession:"software Engineer"}
]


function getDatas(){
  setTimeout(() => {
     datas.forEach((data,index)=>{
      console.log(data.name);

     })
  }, 1000);
}


function createddata(newdata,callback){
  setTimeout(() => {
      datas.push(newdata)
     callback()
  }, 2000);
}``


createddata({name:"jatin",profession:"software Engineer"},getDatas)

Output:
When you run the code, the output will be:

kishan
Anuj
jatin

step 2

Promises are better than callbacks for handling asynchronous operations because they provide a cleaner, more manageable, and error-resistant way of working with async code. Here's why Promises are considered better:

Avoid Callback Hell Callback: Nesting multiple callbacks results in deeply nested and hard-to-read code (commonly known as "callback hell"). Promise: Promises chain .then() calls, keeping the code flat and readable

Error Handling
Callback: Errors must be explicitly handled at every level, which is prone to mistakes.
Promise: With .catch(), you can handle errors in one place
Better Readability
Promises have a clear structure using .then() and .catch(), making the code easier to understand, debug, and maintain.
Chaining Multiple Async Calls
Promises make chaining sequential asynchronous operations seamless

example

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

// Usage with an Additional Task
createdData({ name: "jatin", profession: "software Engineer" })
  .then(getDatas)
  .then(logCompletion) // New Task
  .catch((err) => console.error(err));

How It Works:
createdData:
Adds a new data entry to the datas array after 2 seconds.
getDatas:
Logs all names in the datas array after 1 second.
logCompletion (New Task):
Logs "All tasks completed!" after 500 milliseconds.

Output:
When you run the updated code, the output will be:

kishan
Anuj
jatin
All tasks completed!

Why Promises Make This Easy:
Each task returns a Promise, enabling you to easily add, rearrange, or remove steps in the chain.
The clean structure ensures the sequence is maintained and easy to follow.

step 3

Using async/await simplifies the syntax of Promises, making the code more readable and closer to synchronous flow while still being asynchronous. Here's how your code looks when rewritten with async/await:

const datas = [
  { name: "kishan", profession: "software Engineer" },
  { name: "Anuj", profession: "software Engineer" },
];

function getDatas() {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.forEach((data) => {
        console.log(data.name);
      });
      resolve(); // Signal completion
    }, 1000);
  });
}

function createdData(newData) {
  return new Promise((resolve) => {
    setTimeout(() => {
      datas.push(newData);
      resolve(); // Signal completion
    }, 2000);
  });
}

function logCompletion() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("All tasks completed!");
      resolve();
    }, 500);
  });
}

async function performTasks() {
  try {
    await createdData({ name: "jatin", profession: "software Engineer" }); // Wait for data creation
    await getDatas(); // Wait for data to be logged
    await logCompletion(); // Wait for completion message
  } catch (error) {
    console.error("Error:", error);
  }
}

performTasks(); // Call the async function

Benefits of async/await:
Readability:
Code reads like synchronous, step-by-step logic.
No chaining or nesting.
Error Handling:
Use try...catch blocks for a centralized and consistent error-handling mechanism.
Scalability:
Adding new tasks is as simple as adding another await line.

Output:
When you run the code, you'll get: