JavaScript Promises Explained for Interviews

What is a Promise in JavaScript?

• A Promise is an object that represents the future result of an asynchronous operation.
• It tells us whether an async task will complete successfully or fail later.
• It is commonly used for API calls, timers, and data fetching.

In simple words, a Promise is like a placeholder for a value that will come in the future. JavaScript does not wait for the task to finish. Instead, it continues running other code and handles the result when it arrives.

const promise = new Promise((resolve, reject) => {
  resolve("Success");
});

Promise States: Pending, Fulfilled, Rejected

• Pending → operation is still in progress
• Fulfilled → operation completed successfully
• Rejected → operation failed

Every Promise starts in the pending state. Once the task is done, it becomes either fulfilled or rejected. After that, its state cannot change again.

const myPromise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve("Data fetched");
  } else {
    reject("Something went wrong");
  }
});

then(), catch(), and finally()

• .then() handles success
• .catch() handles errors
• .finally() always runs

These methods are used to react to the final result of a Promise. They make async code easier to understand and separate success flow from error flow.

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Request completed");
  });

Why do we use Promises?

• To write clean asynchronous code
• To avoid callback hell
• To improve readability and maintenance
• To handle success and errors properly

Promises solve the problem of deeply nested callbacks. They make async flow more structured and professional.

login(() => {
  getUser(() => {
    getOrders(() => {
      console.log("Done");
    });
  });
});

login()
  .then(getUser)
  .then(getOrders)
  .then(() => console.log("Done"))
  .catch(console.error);

Promise Chaining

• Multiple async operations can run step by step
• Each .then() can pass data to the next
• This creates a cleaner async sequence

Promise chaining is useful when one task depends on the output of another task.

getUser()
  .then((user) => {
    return getOrders(user.id);
  })
  .then((orders) => {
    console.log(orders);
  })
  .catch((err) => {
    console.log(err);
  });

Why return is important in then()

• If you do not return anything, the next .then() gets undefined
• If you return a Promise, the next .then() waits for it

This is a very common interview question and a very common bug in real applications.

Promise.resolve(10)
  .then((value) => {
    console.log(value);
  })
  .then((result) => {
    console.log(result); // undefined
  });

Promise.resolve(10)
  .then((value) => {
    return value * 2;
  })
  .then((result) => {
    console.log(result); // 20
  });

Promise.all()

• Runs multiple Promises in parallel
• Returns results when all Promises succeed
• If one Promise fails, the whole operation fails

Use Promise.all() when you need all results together, such as loading users, posts, and comments at the same time.

Promise.all([
  Promise.resolve("Users"),
  Promise.resolve("Posts"),
  Promise.resolve("Comments")
])
  .then((results) => {
    console.log(results);
  })
  .catch((err) => {
    console.log(err);
  });

Promise.race(), Promise.allSettled(), and Promise.any()

• Promise.race() returns the first settled Promise
• Promise.allSettled() returns all results with status
• Promise.any() returns the first successful Promise

These methods are useful in advanced async logic, timeouts, reporting, and fallback systems.

Promise.race([
  new Promise((resolve) => setTimeout(() => resolve("Fast"), 100)),
  new Promise((resolve) => setTimeout(() => resolve("Slow"), 500))
]).then((result) => {
  console.log(result);
});

Promise.allSettled([
  Promise.resolve("Done"),
  Promise.reject("Failed")
]).then((results) => {
  console.log(results);
});

Promise.any([
  Promise.reject("Error 1"),
  Promise.resolve("Success"),
  Promise.reject("Error 2")
]).then((result) => {
  console.log(result);
});

Promises with async/await

• async/await is built on top of Promises
• It makes async code easier to read
• It is widely used in modern JavaScript applications

async/await gives Promise-based code a cleaner syntax and makes complex async workflows easier to manage.

async function getData() {
  try {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log(err);
  }
}

Microtask Queue and Promise Execution Order

• Promise callbacks go into the microtask queue
• Microtasks run before macrotasks like setTimeout
• This is a very popular advanced interview topic

Even if setTimeout has 0 delay, Promise callbacks usually run first because the microtask queue has higher priority in the event loop.

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

Promise.resolve().then(() => console.log("Promise"));

console.log("Hello");

Hello
Promise
setTimeout