JavaScript is a single-threaded language. That means it can only do one thing at a time on the main thread. If a task takes a long time, such as a network request or heavy computation, the next step must wait. In the browser, that can make the page feel frozen.

That is why JavaScript uses an asynchronous programming model.

Tips

For front-end work, JavaScript’s single-threaded asynchronous model is already enough for most network tasks. I/O work is usually handled by the browser or runtime, and the JavaScript main thread only processes the result later. So unlike traditional multithreaded programming, you usually do not need to manage threads yourself.

1. Synchronous vs Asynchronous

a. Synchronous programming

Code runs from top to bottom, and a later task must wait for the earlier one to finish.

console.log("Task 1: start");

for (let i = 0; i < 1e9; i++) {
  // simulate expensive work
}

console.log("Task 2: long task finished");
console.log("Task 3: end");

In this model, "Task 3" cannot run until the loop is done.

b. Asynchronous programming

When JavaScript meets a long-running task, it can start the next task immediately instead of waiting.

setTimeout is a classic example:

console.log("Task 1: start");

setTimeout(() => {
  console.log("Task 2: async task finished");
}, 2000);

console.log("Task 3: end");

Output order:

1. Task 1: start
2. Task 3: end
3. Task 2: async task finished

The callback is scheduled and will run later. JavaScript does not block while waiting.

2. Callbacks

The earliest and simplest asynchronous pattern is the callback.

A callback is just a function passed into another function and executed later.

The setTimeout example above already uses a callback.

In real projects, callbacks also show up in APIs that finish work and then notify your code.

3. Callback Hell

If multiple asynchronous tasks depend on each other, callbacks can easily become deeply nested. That is the classic callback hell problem.

For example:

1. Fetch user info
2. Fetch that user’s posts
3. Fetch comments for the first post

If every step is nested into the previous callback, the code becomes:

• hard to read
• hard to maintain
• hard to handle errors consistently

That is why modern JavaScript usually prefers:

• Promise
• async/await

Callbacks still matter, but for multi-step asynchronous flows, Promise and async/await are usually the better tools.