Understanding Asynchronous Patterns in JavaScript

As you delve deeper into JavaScript, you'll encounter different asynchronous patterns that help manage the flow of asynchronous operations. These patterns allow you to structure your code efficiently and prevent callback hell, making your JavaScript applications faster and more scalable. But what exactly are asynchronous patterns, and why do they matter?

In this blog, we'll explore the most common asynchronous patterns in JavaScript: callbacks, promises, and async/await. Each of these patterns has its own unique way of handling asynchronous tasks, and understanding them is essential for building smooth and efficient JavaScript applications.

What Are Asynchronous Patterns?

Asynchronous programming patterns are strategies or techniques used to handle asynchronous tasks in a way that makes your code clean, efficient, and easy to manage. Instead of blocking the execution of your code while waiting for tasks like data fetching, you can use these patterns to handle them without affecting the performance of the rest of your application.

1. Callbacks

We already discussed callbacks in the previous blog post. But let’s take a quick look at how they work in asynchronous patterns.

A callback is a function that is passed to another function and is called once the task finishes. It’s one of the oldest and most fundamental asynchronous patterns in JavaScript.

Here’s a quick recap with an example:

function fetchData(callback) {
    console.log("Fetching data...");
    setTimeout(function() {
        console.log("Data fetched!");
        callback();
    }, 2000);
}
 
function handleData() {
    console.log("Handling data...");
}
 
fetchData(handleData);

In this example:

The fetchData function simulates an asynchronous operation (like fetching data from an API).
Once the data is fetched (after 2 seconds), the handleData callback is executed.

Drawback: Callbacks can result in deeply nested code (callback hell), which can make the code hard to read and maintain, especially with complex logic.

2. Promises

As JavaScript evolved, Promises were introduced as a more elegant solution to handle asynchronous code. A Promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

A promise is in one of three states:

Pending: The operation is still in progress.
Resolved: The operation completed successfully, and a result is available.
Rejected: The operation failed, and an error is thrown.

Here’s an example of using promises:

function fetchData() {
    return new Promise((resolve, reject) => {
        console.log("Fetching data...");
        setTimeout(function() {
            const success = true;  // Simulating success or failure
            if (success) {
                console.log("Data fetched!");
                resolve("Data received");
            } else {
                reject("Error fetching data");
            }
        }, 2000);
    });
}
 
fetchData()
    .then(result => console.log(result))  // Handle success
    .catch(error => console.log(error));  // Handle error

Explanation:

The fetchData function returns a promise.
Inside the promise, we simulate an asynchronous operation (data fetching).
Once the operation completes, we either resolve the promise (if successful) or reject it (if there’s an error).
The then method is used to handle a successful resolution, and the catch method handles any errors.

Why Use Promises? Promises improve the readability of asynchronous code by eliminating the need for deeply nested callbacks. They also provide built-in error handling, making them a better alternative to callbacks for more complex operations.

3. Async/Await

Async/await is the most modern and cleanest way to handle asynchronous code in JavaScript. It’s built on top of promises but allows you to write asynchronous code that looks and behaves like synchronous code.

Async makes a function return a promise.
Await pauses the execution of the async function until the promise is resolved.

Here’s an example using async/await:

async function fetchData() {
    console.log("Fetching data...");
    const data = await new Promise((resolve, reject) => {
        setTimeout(() => resolve("Data fetched!"), 2000);
    });
    console.log(data);
}
 
fetchData();

Explanation:

The fetchData function is declared as async, which means it will return a promise.
Inside the function, we use await to pause the function execution until the promise is resolved (after 2 seconds).
Once the promise resolves, the result is logged to the console.

Why Use Async/Await? Async/await allows for asynchronous code that is more readable and easier to understand. It eliminates the need for .then() and .catch() methods, making it ideal for handling multiple asynchronous operations in a clear and concise way.

Comparison of Callbacks, Promises, and Async/Await

Here’s a quick comparison of all three patterns:

Pattern	Ease of Use	Code Readability	Error Handling
Callbacks	Difficult with many tasks	Hard to read (callback hell)	Error handling is manual
Promises	Easier with chaining	More readable than callbacks	Built-in `.catch()` method
Async/Await	Easiest to write	Most readable, looks like synchronous code	Simplifies error handling with `try/catch`

Best Use Cases

Callbacks: Best for simple asynchronous tasks where only one callback is needed. However, be careful of callback hell when working with multiple tasks.
Promises: Ideal for handling multiple asynchronous tasks in a more organized manner. Use when you have chaining or need better error handling.
Async/Await: The most modern and recommended pattern for handling asynchronous code. Use it when you want clean and easy-to-understand code, especially for sequential async tasks.

A Real-World Example

Imagine we need to fetch data from two different APIs and process the results. Here’s how each pattern would look:

Using Callbacks

function fetchDataFromApi1(callback) {
    setTimeout(() => {
        console.log("Data from API 1 fetched");
        callback();
    }, 2000);
}
 
function fetchDataFromApi2(callback) {
    setTimeout(() => {
        console.log("Data from API 2 fetched");
        callback();
    }, 3000);
}
 
fetchDataFromApi1(() => {
    fetchDataFromApi2(() => {
        console.log("All data fetched and processed");
    });
});

Using Promises

function fetchDataFromApi1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Data from API 1 fetched");
            resolve();
        }, 2000);
    });
}
 
function fetchDataFromApi2() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Data from API 2 fetched");
            resolve();
        }, 3000);
    });
}
 
fetchDataFromApi1()
    .then(fetchDataFromApi2)
    .then(() => {
        console.log("All data fetched and processed");
    });

Using Async/Await

async function fetchDataFromApi1() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Data from API 1 fetched");
            resolve();
        }, 2000);
    });
}
 
async function fetchDataFromApi2() {
    return new Promise(resolve => {
        setTimeout(() => {
            console.log("Data from API 2 fetched");
            resolve();
        }, 3000);
    });
}
 
async function fetchData() {
    await fetchDataFromApi1();
    await fetchDataFromApi2();
    console.log("All data fetched and processed");
}
 
fetchData();

Practice Code Snippet for You

Now that we've gone over the basic asynchronous patterns, here’s a code snippet for you to practice with. This snippet includes all three patterns, so you can see how each one works in action:

JavaScript Code Runner on: patterns

Async Programming with Callbacks Classes and Prototypes