DEV Community

Abhay Singh Kathayat
Abhay Singh Kathayat

Posted on

Mastering Asynchronous JavaScript: Callbacks, Promises, and Async/Await

Asynchronous JavaScript

Asynchronous JavaScript allows tasks to be executed independently of the main thread, ensuring that the application remains responsive and efficient. This is especially important for handling operations like API calls, file reading, or delays.


1. Synchronous vs. Asynchronous Code

Synchronous Code:

  • Executes line by line in sequence.
  • Blocks subsequent operations until the current one finishes.

Example:

console.log("Start");
console.log("End");
// Output:
// Start
// End
Enter fullscreen mode Exit fullscreen mode

Asynchronous Code:

  • Allows other operations to continue while waiting for a task to complete.
  • Uses callbacks, promises, or async/await to handle results.

Example:

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task
Enter fullscreen mode Exit fullscreen mode

2. Asynchronous Programming Methods

a. Callbacks

A callback is a function passed as an argument to another function, executed after the completion of an asynchronous task.

Example:

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});
Enter fullscreen mode Exit fullscreen mode

Drawbacks:

  • Leads to "callback hell" when chaining multiple asynchronous operations.

b. Promises

A Promise represents a value that may be available now, in the future, or never.

States of a Promise:

  • Pending: Initial state.
  • Fulfilled: Completed successfully.
  • Rejected: Failed.

Creating a Promise:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});
Enter fullscreen mode Exit fullscreen mode

Handling Errors:

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));
Enter fullscreen mode Exit fullscreen mode

c. Async/Await

async and await provide a more readable syntax for working with promises.

Example:

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

fetchData();
Enter fullscreen mode Exit fullscreen mode

Error Handling:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();
Enter fullscreen mode Exit fullscreen mode

3. Asynchronous Use Cases

a. API Calls with Fetch

The fetch API is a modern way to make HTTP requests.

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();
Enter fullscreen mode Exit fullscreen mode

b. Event Listeners

Asynchronous behavior in event handling.

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});
Enter fullscreen mode Exit fullscreen mode

c. Timers

Using setTimeout and setInterval for delays.

setTimeout(() => console.log("Timeout executed!"), 2000);
Enter fullscreen mode Exit fullscreen mode

4. The Event Loop

The Event Loop is the mechanism that manages asynchronous operations in JavaScript. Tasks are queued and executed in the following order:

  1. Call Stack: Executes synchronous code.
  2. Task Queue: Executes asynchronous callbacks (e.g., setTimeout).
  3. Microtask Queue: Executes promise resolutions.

Example:

console.log("Start");

setTimeout(() => console.log("Timeout"), 0);

Promise.resolve().then(() => console.log("Promise"));

console.log("End");

// Output:
// Start
// End
// Promise
// Timeout
Enter fullscreen mode Exit fullscreen mode

5. Common Pitfalls

  1. Forgetting to Handle Errors:

    • Always use .catch() or try/catch for promises.
  2. Blocking the Main Thread:

    • Avoid long-running synchronous tasks.
  3. Callback Hell:

    • Use promises or async/await instead.

6. Summary

Technique Description
Callbacks Functions executed after async tasks.
Promises Chained mechanism for async tasks.
Async/Await Cleaner syntax for handling promises.

Understanding and leveraging asynchronous programming in JavaScript is crucial for creating responsive and efficient web applications. By mastering callbacks, promises, and async/await, developers can manage asynchronous tasks effectively.

Hi, I'm Abhay Singh Kathayat!
I am a full-stack developer with expertise in both front-end and back-end technologies. I work with a variety of programming languages and frameworks to build efficient, scalable, and user-friendly applications.
Feel free to reach out to me at my business email: kaashshorts28@gmail.com.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more