Asynchronous JavaScript Overview

Asynchronous JavaScript allows code to run without blocking the main thread. It enables the execution of time-consuming tasks (like API calls, timers, or file reads) in the background, while the rest of the code continues running.

Callbacks

A callback is a function passed as an argument to another function, to be executed once an asynchronous operation completes.

Example:

setTimeout(() => console.log("Delayed"), 1000);
console.log("Immediate"); // Runs first

Callbacks are simple but can lead to callback hell — deeply nested functions that are hard to maintain.

Example: Callback Hell

setTimeout(() => {
  console.log("Step 1");
  setTimeout(() => {
    console.log("Step 2");
    setTimeout(() => console.log("Step 3"), 1000);
  }, 1000);
}, 1000);

Promises

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation.

Promise States:

Pending: Initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

Core Methods:

.then(result => ...) → Handles successful completion.
.catch(error => ...) → Handles errors.
.finally(() => ...) → Executes regardless of the result.

Example:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Success"), 1000);
});

promise
  .then(result => console.log(result))   // "Success"
  .catch(error => console.log(error))
  .finally(() => console.log("Done"));

Promise Chaining:

fetch("<https://api.example.com/data>")
  .then(response => response.json())
  .then(data => console.log("Data:", data))
  .catch(error => console.log("Error:", error));

Async / Await

async/await is syntactic sugar built on top of Promises, allowing you to write asynchronous code that looks synchronous.

async → Declares a function that returns a Promise.
await → Pauses execution until the Promise resolves.

Example:

async function fetchData() {
  try {
    const response = await fetch("<https://api.example.com/data>");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log("Error:", error);
  }
}

fetchData();

Timers

Timers are one of the simplest asynchronous mechanisms.

Function	Description
`setTimeout(callback, delay)`	Runs a function once after a delay (in ms).
`setInterval(callback, delay)`	Runs a function repeatedly at intervals.
`clearTimeout(id)`	Cancels a timeout.
`clearInterval(id)`	Cancels an interval.

Example:

const id = setTimeout(() => console.log("Hello"), 1000);
clearTimeout(id); // Cancels the timeout

Event Listeners

Event listeners handle user or system events asynchronously, such as clicks, keystrokes, or network events.

Example:

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked");
});

Common Asynchronous APIs

API	Description
fetch()	Makes HTTP requests and returns a Promise.
XMLHttpRequest	Legacy HTTP API (older alternative to `fetch`).
Web APIs	Timers (`setTimeout`), animation (`requestAnimationFrame`), etc.
FileReader	Reads files asynchronously (in browsers).
Node.js APIs	Asynchronous I/O operations like `fs.readFile`.

Example:

fetch("<https://api.example.com/data>")
  .then(res => res.json())
  .then(console.log);

Summary Table

Mechanism	Description	Example
Callbacks	Functions executed after completion	`setTimeout(cb, 1000)`
Promises	Handle async results & errors	`fetch(...).then(...)`
Async/Await	Promise-based syntax simplifier	`await fetch(...)`
Timers	Schedule delayed or repeated tasks	`setInterval(...)`
Event Listeners	React to user/system events	`addEventListener(...)`

JavaScript Handbook