Promises in JavaScript: What Interviewers Actually Ask.

“So, what’s a Promise in JavaScript?” Easy… until they keep digging. Here’s the short list of what you really need to know when this comes up.

The Basics

• A Promise represents an async operation.
• Has 3 states:

Core Methods

• .then(onFulfilled) → runs on success, always returns a new Promise.
• .catch(onRejected) → runs on failure, also returns a Promise.
• .finally(callback) → always runs, doesn’t affect the value/error.

Example:

fetch('/api')
  .then(res => res.json())
  .catch(err => console.error(err))
  .finally(() => console.log('Done'));        

Callback vs Promise vs Async/Await

Callbacks (the old way):

getUser(1, (err, user) => {
  if (err) return console.error(err);

  getPosts(user.id, (err, posts) => {
    if (err) return console.error(err);

    getComments(posts[0].id, (err, comments) => {
      if (err) return console.error(err);
      console.log(comments);
    });
  });
});        

Problems: callback hell, messy error handling, hard composition.

Promises:

getUser(1)
  .then(user => getPosts(user.id))
  .then(posts => getComments(posts[0].id))
  .then(comments => console.log(comments))
  .catch(err => console.error(err));        

Cleaner chains, one catch, easier to reason about.

Async/Await (syntactic sugar on top of Promises):

async function main() {
  try {
    const user = await getUser(1);
    const posts = await getPosts(user.id);
    const comments = await getComments(posts[0].id);
    console.log(comments);
  } catch (err) {
    console.error(err);
  }
}        

Looks synchronous, keeps error handling consistent, still powered by Promises.

Common Interview Questions

What’s the difference between microtasks and macrotasks?

• Microtasks: .then, .catch, .finally, await, queueMicrotask, MutationObserver,
• Macrotasks: setTimeout, setInterval, DOM events (click, keydown, scroll), postMessage, MessageChannel, Web APIs (XHR onload, WebSocket messages), I/O and setImmediate (Node.js))

Parallel execution?

• Promise.all → all succeed or reject if one fails.
• Promise.allSettled → wait for all, regardless of fail/success.
• Promise.race → first one settles.
• Promise.any → first successful one wins.

What does .then return?

• Always a new Promise.

Promise.resolve(1)
  .then(x => x + 1) // returns Promise<2>
  .then(x => x * 2) // returns Promise<4>        

The Tricky One

What’s the output?

console.log('A');

setTimeout(() => console.log('B'), 0);

Promise.resolve()
  .then(() => {
    console.log('C');
    return Promise.resolve('D');
  })
  .then((val) => console.log(val));

queueMicrotask(() => {
  console.log('E');
  Promise.resolve().then(() => console.log('F'));
});

console.log('G');        

👉 Answer: A, G, C, E, D, F, B.

1. Script (synchronous phase)

• console.log('A') → A
• setTimeout(..., 0) → schedules macrotask B (timer)
• Promise.resolve().then(/* … */) → Promise.resolve() creates an already-fulfilled promise; calling .then enqueues microtask M1
• queueMicrotask(/* … */) → enqueues microtask M2
• console.log('G') →

2. Drain microtasks (FIFO)

• M1 (first .then): logs C; return Promise.resolve('D')
• M2 (queueMicrotask): logs E; inside it Promise.resolve().then(() => console.log('F'))
• M3 (second .then): logs D.
• M4 (the then inside E): logs F.

3. Next macrotask

• The timer fires → B.

Key Takeaways

• Promises always return a new promise → enables chaining.
• .finally is for cleanup, not value transformation.
• Execution order: microtasks before macrotasks.

TL;DR

Promises aren’t just about .then vs .catch. They’re about chaining, error handling, and execution order. Learn those → you’ve answered 90% of interview questions.

Question: which Promise utility (all, any, race, allSettled) has saved you the most in production?

This is Part 2 of 17 in my Frontend Interview Classics series.