Categories

What Happens When You Put async in Front of a JavaScript Function?

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

Copy Monero Donation Address

Donate with

Donate BAT now

Verified BAT publisher

Introduction

Modern JavaScript applications rarely run sequentially. Web apps frequently fetch data from APIs, handle user input, or process files asynchronously. Without proper mechanisms, handling asynchronous operations quickly leads to messy, hard-to-read code.

To solve this problem, JavaScript introduced Promises and later async/await, which allow developers to write asynchronous code in a more synchronous-looking style, improving readability and maintainability.

What is a Promise in JavaScript?

Before understanding async/await, it’s essential to know what a Promise is.

A Promise is a built-in JavaScript object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. A Promise can be in one of three states:

• Pending – the operation hasn’t completed yet
• Fulfilled – the operation completed successfully
• Rejected – the operation failed

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded successfully!"), 1000);
});

myPromise
  .then(result => console.log(result))
  .catch(error => console.error(error));

// Output after 1 second: "Data loaded successfully!"

💡 Key insight: async/await provides a cleaner and more readable syntax for working with Promises, without changing how they function under the hood.

What Does async Do in JavaScript?

When you place async before a function definition, two important things happen :

👉 The function always returns a Promise. Even if the function body returns a simple value, JavaScript automatically wraps it in a resolved Promise.

async function example() {
  return 42;
}

example()
  .then(console.log);

// Output: 42

👉 await becomes available inside the function.
The real power of async is that it enables the use of await.

async function getUser() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  return await response.json();
}

getUser()
  .then(user => console.log(user));

Without async, you would have to write nested .then() calls, which are harder to read and maintain.

How await Works

The await keyword can only be used inside async functions. It pauses the execution of the function until the Promise is resolved or rejected.

async function fetchUserData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error fetching data:", error);
  }
}

fetchUserData();

Practical Use Cases for async Functions

1. Fetching Data from an API

async function fetchPosts() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.error("Error fetching posts:", error);
  }
}

2. Running Multiple Tasks in Parallel

If you need multiple requests, Promise.all() combined with await is the best approach:

async function fetchMultiple() {
  const [users, posts] = await Promise.all([
    fetch("https://jsonplaceholder.typicode.com/users").then(r => r.json()),
    fetch("https://jsonplaceholder.typicode.com/posts").then(r => r.json())
  ]);

  console.log("Users:", users.length);
  console.log("Posts:", posts.length);
}

This executes both API calls at the same time, improving performance.

3. Error Handling with try...catch

Error handling with async/await is cleaner than with .catch():

async function getUserSafe(id) {
  try {
    const response = await fetch(`/user/${id}`);
    
    if (!response.ok) {
      throw new Error("User not found");
    }

    return await response.json();
  } catch (err) {
    console.error("Error:", err.message);
  }
}

Common Mistakes Developers Make

• Forgetting to use await
• Using await outside an async function
• Not handling errors properly

Async/Await vs Promises: Quick Comparison

Conclusion

Understanding Promises is the key to writing clean asynchronous JavaScript. With a solid understanding of Promises, using async and await enhances code readability, maintainability, and reliability. Modern JavaScript projects rely heavily on async/await for API calls, asynchronous tasks, and error handling, making it a critical skill for any developer.