Callbacks vs Promises vs Async/Await: The Ultimate Guide to Asynchronous Javascript

Learn JavaScript asynchronous programming with callbacks, promises, and async/await. Avoid callback hell and write cleaner, maintainable code with real-world examples. Hello my fellow frontend developers, today i will be discussing one of the most important concept in javascript, asynchronous programming. I'll be creating my code snippets on Scribbler.live first, which is a fantastic platform that allows you to run a JavaScript Notebook, Online Compiler, and Editor without the need for manual setup. Additionally, I am including a link to code snippets that includes all of the code examples so you can open the snippet and run it yourself to see the results. I will be using scrib.show from scribbler.live, it is equivalent to console.log Let's dive in Table of contents What are callbacks Basic example Async callback Callback hell Promise Basic example Data fetching Chaining promises methods Promise methods Async await Solving callback hell issue Data fetching What are callbacks? A callback is a function passed as an argument to another function, which is then executed later (synchronously or asynchronously). Callbacks are fundamental in JavaScript for handling asynchronous operations, event listeners, and functional programming. Sample codes Basic example function saveOrder(orderId, userMail, callback) { const order = { orderId, userMail } scrib.show(order) callback(userMail); // Execute the callback function } function sendOrderEmail(userMail) { scrib.show(userMail, "Order confirmed") } saveOrder("145908275","user@gmail.com", sendOrderEmail); // Will log the order and sends a confirmation email to the user using sendOrderEmail Asynchronous callback We could take the example of setTimeout method as it executes asynchronously console.log("Javascript is awesome"); setTimeout(() => { console.log("This codeblock runs after 2 seconds"); }, 2000); console.log("Scribbler is awesome"); // Output Javascript is awesome Scribbler is awesome This codeblock runs after 2 seconds Callback Hell (Pyramid of Doom) function saveOrder(orderId, userMail, callback) { const order = { orderId, userMail } scrib.show(order) callback(userMail); // Execute the callback function } function sendDetailsToSeller(orderId, userMail, callback) { const details = { orderId, userMail } scrib.show(details) callback(userMail); } function sendOrderEmail(userMail) { scrib.show(userMail, "Order confirmed") } saveOrder("145908275","user@gmail.com", () => sendDetailsToSeller("145908275","user@gmail.com",sendOrderEmail)); // If you see we have to pass down the callbacks at multiple level in order to perform chaining operations. When callbacks nest too deeply, they become difficult to read and maintain.

function saveOrder(orderId, userMail, callback) {
    const order = {
      orderId,
      userMail
    }
    scrib.show(order)
    callback(userMail); // Execute the callback function
}

function sendOrderEmail(userMail) {
    scrib.show(userMail, "Order confirmed")
}

saveOrder("145908275","user@gmail.com", sendOrderEmail);
// Will log the order and sends a confirmation email to the user using sendOrderEmail

console.log("Javascript is awesome");

setTimeout(() => {
    console.log("This codeblock runs after 2 seconds");
}, 2000);

console.log("Scribbler is awesome");

// Output
Javascript is awesome
Scribbler is awesome
This codeblock runs after 2 seconds

function saveOrder(orderId, userMail, callback) {
    const order = {
      orderId,
      userMail
    }
    scrib.show(order)
    callback(userMail); // Execute the callback function
}

function sendDetailsToSeller(orderId, userMail, callback) {
  const details = {
      orderId,
      userMail
    }
    scrib.show(details)
    callback(userMail);
}

function sendOrderEmail(userMail) {
    scrib.show(userMail, "Order confirmed")
}

saveOrder("145908275","user@gmail.com", () => sendDetailsToSeller("145908275","user@gmail.com",sendOrderEmail));
 // If you see we have to pass down the callbacks at multiple level in order to perform chaining operations.

Related Posts

Supervised Learning for Image Recognition: How It Works

Mar 22, 2025  0

here is a 3d spiking neural network created in PyNN run...

Mar 22, 2025  0

What about ransomware

Mar 5, 2025  0