JavaScript: Asynchronous Programming (In-Depth)

Asynchronous programming lets you perform tasks (like fetching data or waiting for user input) without blocking the rest of your code. This is crucial for building fast, responsive web apps.

Synchronous vs Asynchronous

• Synchronous: Each operation waits for the previous one to finish.
• Asynchronous: Operations can start and finish out of order; JS can do other work while waiting.

// Synchronous
console.log("A");
console.log("B");
// Output: A B

// Asynchronous
console.log("A");
setTimeout(() => { console.log("B"); }, 1000);
console.log("C");
// Output: A C B
    

Main Async Patterns

• Callbacks (setTimeout, event handlers)
• Promises
• async/await (syntactic sugar over Promises)

Example: setTimeout

console.log("Start");
setTimeout(() => { console.log("Done"); }, 1500);
console.log("End");
// Output: Start End Done
    

Example: Promises

function wait(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
wait(1000).then(() => console.log("1 second passed"));
    

Example: async/await

async function main() {
  await wait(500);
  console.log("Half a second later!");
}
main();
    

Why Asynchronous Matters

• Keeps your UI responsive
• Handles slow tasks (API, files, timers) efficiently
• Allows multiple things to happen together (non-blocking)