94. Introduction to Asynchronous JavaScript

JavaScript is, by nature, single-threaded. It executes code sequentially. If a task takes a long time (like fetching data from a server, or waiting for a timer), the browser freezes—this is called blocking.

The Problem: Blocking Operations

Imagine this synchronous code:

javascript console.log('Step 1: Start'); // Assume this takes 5 seconds to load data let data = fetchFromServer(); // BLOCKING: Browser freezes here console.log('Step 2: Data loaded'); console.log('Step 3: Finish');

If Step 2 blocks, the user cannot click buttons or scroll for 5 seconds.

The Solution: Asynchronicity

Asynchronous operations run in the background (via Web APIs). Instead of waiting for the result immediately, we tell JS: "Start this long task, and when it finishes, run this specified function." This allows the main thread (the Call Stack) to remain free and responsive.

There are three main patterns for handling asynchronous code:

1. Callbacks (Legacy)
2. Promises (Modern Standard)
3. Async/Await (The cleanest, built on Promises)