JS◆ The JavaScript Book
About

Chapter XVI · Asynchronous JavaScript

Asynchronous JavaScript

Asynchronous JavaScript allows tasks (like network requests or timers) to execute in the background without blocking the main execution thread.

01 How It Works

Think of placing a restaurant food order at the counter and getting a buzzer, allowing you to sit down and chat while your food is prepared.

Long-running or deferred tasks are delegated to Web APIs, freeing the call stack to continue executing synchronous code.

example.js
console.log("Start");
setTimeout(() => {
  console.log("Async operation complete");
}, 1000);
console.log("End");

  1. 1. Async operation is initiated and handed off to Web APIs.

  2. 2. Main call stack continues executing subsequent synchronous lines.

  3. 3. Once complete, callback is pushed to queue for event loop processing.

02 Practical Example

Here is how you might see this concept applied in real-world code:

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

Key Takeaway

Asynchronous programming prevents UI freezing and blocking during slow I/O or network tasks.

Related Concepts