JavaScript Promises & Async

Synchronous code executes line by line. Each operation blocks until it completes before the next one starts. If a task takes 3 seconds, everything waits.

Asynchronous code lets long-running tasks execute in the background. JavaScript uses an event loop so other code can continue while waiting for I/O, timers, or network requests.

// Synchronous — blocks on each line
console.log("First");
heavyComputation();   // blocks here
console.log("Second"); // waits for above

// Asynchronous — non-blocking
console.log("First");
setTimeout(() => console.log("Second"), 1000);
console.log("Third"); // runs before "Second"!

Click the buttons below to see the difference visually:

Timeline

Console Output

A callback is a function passed as an argument to another function, to be executed later when an async operation completes.

function fetchData(callback) {
  setTimeout(() => {
    callback("Data loaded!");
  }, 1000);
}

fetchData(function(result) {
  console.log(result); // "Data loaded!" after 1s
});

Click Start to watch the task queue in action:

The Problem: Callback Hell

getUser(id, function(user) {
  getOrders(user, function(orders) {
    getDetails(orders[0], function(details) {
      getShipping(details, function(shipping) {
        // deeply nested = hard to read!
      });
    });
  });
});

Deeply nested callbacks create a "pyramid of doom" that is hard to read, debug, and maintain. Promises solve this.

A Promise represents a value that may be available now, later, or never. It has three states:

const promise = new Promise((resolve, reject) => {
  // async work...
  if (success) resolve(value);
  else reject(error);
});

promise
  .then(value => console.log(value))
  .catch(error => console.error(error));

Use the buttons to create and control a Promise interactively:

JavaScript provides utility methods to work with multiple Promises:

• Promise.all — resolves when all fulfill, rejects if any rejects
• Promise.race — resolves/rejects with the first settled promise
• Promise.allSettled — waits for all to settle, never rejects

Configure the tasks below, pick a method, and click Run:

Result:

async/await is syntactic sugar over Promises. It makes asynchronous code look and behave like synchronous code:

• async keyword before a function makes it return a Promise
• await pauses execution until a Promise settles
• Errors are caught with standard try/catch blocks

Compare the two approaches side by side:

Key takeaway: Both produce identical results. async/await is preferred for readability, especially with error handling via try/catch instead of .catch() chains.

1. What will be logged first?

console.log("A");
setTimeout(() => console.log("B"), 0);
console.log("C");

2. What does Promise.race() return?

3. How do you handle errors with async/await?