JavaScript runs on a single thread, meaning it can only do one thing at a time.

So, when a task takes time (like fetching data from an API, reading a file, or waiting for a timer), you don’t want the rest of your app to freeze.

That’s where asynchronous JavaScript comes in, allowing JavaScript to delegate long-running tasks and continue executing other code.

But asynchronous code wasn’t always this smooth. It started rough, with callback hell.

The Problem: Callback Hell

Before Promises and Async/Await, JavaScript handled async operations with callbacks — functions passed as arguments to other functions, executed when a task completes.

Let’s take a simple browser example:

setTimeout(() => {

console.log("Fetching user...");

setTimeout(() => {

console.log("Fetching user's posts...");

setTimeout(() => {

console.log("Fetching comments on the posts...");

}, 1000);

}, 1000);

}, 1000);

Output:

Fetching user...

Fetching user's posts...

Fetching comments on the posts...

It works, but look at that nested pyramid!

As tasks grow, the code becomes messy, unreadable, and challenging to maintain, welcome to Callback Hell 🔥.

It’s even worse when handling errors:

loginUser("John", (err, user) => {

if (err) return console.error("Login failed");

getUserPosts(user.id, (err, posts) => {

if (err) return console.error("Failed to load posts");

getPostComments(posts[0].id, (err, comments) => {

if (err) return console.error("Failed to load comments");

console.log(comments);

});

});

});

Every function depends on the previous one. One error and the entire chain collapses.

That’s when Promises changed the game.

From Callback Hell to Promises

A Promise is like a placeholder for a value that will exist in the future.

It’s an object that represents the eventual completion (or failure) of an asynchronous operation.

A Promise can be in one of three states:

Pending — still waiting.
Fulfilled — operation successful, value available.
Rejected — operation failed, error occurred.

Let’s build a simple Promise:

const fetchMeal = (mealName) => {

return new Promise((resolve, reject) => {

setTimeout(() => {

if (!mealName) reject("No meal name provided!");

resolve(`Fetched meal: ${mealName}`);

}, 1000);

});

};

Now consume it:

fetchMeal("Pasta")

.then((result) => console.log(result))

.catch((err) => console.error(err));

Output:

Fetched meal: Pasta

Building Promises in Node.js (Example with TheMealDB API)

Let’s simulate reading a file, fetching a meal, and writing the result.

const fs = require("fs");

const readFilePro = (file) => {

return new Promise((resolve, reject) => {

fs.readFile(file, "utf-8", (err, data) => {

if (err) reject(new Error("Could not read file"));

else resolve(data);

});

});

};

const writeFilePro = (file, data) => {

return new Promise((resolve, reject) => {

fs.writeFile(file, data, (err) => {

if (err) reject(new Error("Failed to write file"));

else resolve("✅ File written successfully");

});

});

};

// Consuming Promises

readFilePro("./meal.txt")

.then((meal) => {

console.log(`Meal name: ${meal}`);

return fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${meal}`);

})

.then((res) => res.json())

.then((data) => {

const mealData = data.meals[0];

return writeFilePro("./meal-info.txt", mealData.strMealThumb);

})

.then((msg) => console.log(msg))

.catch((err) => console.error(err.message));

This already looks cleaner than callbacks, no nested pyramids!

Consuming Promises with Async/Await

Then came ES2017, bringing async/await, which lets us write asynchronous code that looks synchronous.

Any function declared as async returns a Promise automatically.

You use await to pause execution until a Promise settles.

Let’s rewrite the above example using async/await:

const getMealImage = async () => {

try {

const meal = await readFilePro("./meal.txt");

console.log(`Meal name: ${meal}`);

const res = await fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${meal}`);

const data = await res.json();

const img = data.meals[0].strMealThumb;

await writeFilePro("./meal-info.txt", img);

console.log("Meal image saved to meal-info.txt");

} catch (err) {

console.error("Error:", err.message);

}

};

getMealImage();

Clean. Elegant. Easy to read.

Returning Values from Async Functions

Every async function returns a Promise, even if you don’t explicitly do so.

Example:

async function greet() {

return "Hello, world!";

}

greet().then(console.log); // Output: Hello, world!

If an error occurs inside an async function, it’s automatically wrapped in a rejected Promise:

async function throwError() {

throw new Error("Something went wrong");

}

throwError().catch((err) => console.error(err.message)); // Something went wrong

You can also handle it using an immediately invoked function expression (IIFE):

(async () => {

try {

const msg = await greet();

console.log(msg);

} catch (err) {

console.error(err.message);

}

})();

Awaiting Multiple Promises Simultaneously (Promise.all)

If multiple async tasks can run independently, it’s faster to execute them in parallel with Promise.all().

Example:

const getMeal = (meal) => fetch(`https://www.themealdb.com/api/json/v1/1/search.php?s=${meal}`).then((res) => res.json());

(async () => {

try {

const results = await Promise.all([

getMeal("Beef"),

getMeal("Chicken"),

getMeal("Salmon"),

]);

const meals = results.map((r) => r.meals[0].strMeal);

console.log("Meals fetched:", meals);

} catch (err) {

console.error("Error fetching meals:", err.message);

}

})();

If any Promise fails, Promise.all rejects, use Promise.allSettled() if you want all results, even if some fail.

Understanding `throw new Error()`, `throw error`, and `throw(err)`

All three might look similar but differ slightly in behavior.

1. `throw new Error("message")`

Creates a new Error object with a stack trace (the recommended way).

throw new Error("Invalid meal ID");

Gives descriptive error and stack trace.

2. `throw error`

Throws an existing variable (could be any type: string, number, object).

const error = "Something went wrong";

throw error;

No stack trace, harder to debug.

3. `throw(err)`

Same as throw error . It throws whatever err holds.

catch (err) {

throw(err); // Re-throws caught error

}

Best practice: Always use throw new Error() when creating new errors.

Conclusion

Asynchronous JavaScript has evolved from callback chaos to promise-based clarity and now to async/await elegance.

These features not only make your code cleaner but also easier to debug, maintain, and reason about.

Remember:

Use Promises to handle async operations gracefully.
Use async/await for readability.
Use Promise.all to run independent tasks in parallel.
Always handle errors with care — and prefer throw new Error() for clarity.