0/ 16

Promise Output Challenges

All sets

Challenge yourself with Promise output quiz questions. Test your understanding of async execution order, resolve/reject behavior, microtasks, and the JavaScript event loop.

16 snippets · predict the output, then run it

#1Promise Executor Order

console.log('Start');

const promise = new Promise((resolve, reject) => {
  console.log('Promise executor');
  resolve('Resolved');
});

promise.then((value) => {
  console.log(value);
});

console.log('End');

What will be the output?

#2Promise Chain Return Values

Promise.resolve(1)
  .then((value) => {
    console.log(value);
    return value + 1;
  })
  .then((value) => {
    console.log(value);
  })
  .then((value) => {
    console.log(value);
    return Promise.resolve(3);
  })
  .then((value) => {
    console.log(value);
  });

What will be the output?

#3Promise.resolve Unwrapping

const promise1 = Promise.resolve(Promise.resolve(Promise.resolve(1)));

promise1.then((value) => {
  console.log(value);
});

What will be the output?

#4Microtasks vs Macrotasks

console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

What will be the output?

#5Error Handling in Chains

Promise.resolve('Start')
  .then((value) => {
    console.log(value);
    throw new Error('Oops!');
  })
  .then((value) => {
    console.log('Hello');
  })
  .catch((error) => {
    console.log('Caught:', error.message);
    return 'Recovered';
  })
  .then((value) => {
    console.log(value);
  });

What will be the output?

#6Promise Settles Once

const promise = new Promise((resolve, reject) => {
  resolve('First');
  resolve('Second');
  reject('Third');
});

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

What will be the output?

#7Return Values and Rejections

new Promise((resolve, reject) => {
  resolve(1);
})
  .then((value) => {
    console.log(value);
    return 2;
  })
  .then((value) => {
    console.log(value);
    // No return statement
  })
  .then((value) => {
    console.log(value);
    return Promise.reject('Error');
  })
  .catch((error) => {
    console.log(error);
  })
  .then(() => {
    console.log('Done');
  });

What will be the output?

#8Async/Await and Microtasks

async function test() {
  console.log('1');
  
  await Promise.resolve();
  
  console.log('2');
}
console.log('3');
test();
console.log('4');

What will be the output?

#9Promise.all Fail Fast

const promise1 = Promise.resolve(1);
const promise2 = Promise.reject('Error');
const promise3 = Promise.resolve(3);

Promise.all([promise1, promise2, promise3])
  .then((values) => {
    console.log('Success:', values);
  })
  .catch((error) => {
    console.log('Failed:', error);
  });

What will be the output?

#10Nested Promise Chains

Promise.resolve(1)
  .then((value) => {
    console.log(value);
    
    Promise.resolve(2)
      .then((value) => {
        console.log(value);
      });
    
    return 3;
  })
  .then((value) => {
    console.log(value);
  });

What will be the output?

#11Promise.race First Settler

const promise1 = new Promise((resolve) => {
  setTimeout(() => resolve('Slow'), 1000);
});
const promise2 = new Promise((resolve) => {
  setTimeout(() => resolve('Fast'), 100);
});
const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => reject('Error'), 50);
});

Promise.race([promise1, promise2, promise3])
  .then((value) => {
    console.log('Winner:', value);
  })
  .catch((error) => {
    console.log('Failed:', error);
  });

What will be the output?

#12Multiple Catches

Promise.reject('First error')
  .catch((error) => {
    console.log('Catch 1:', error);
    throw new Error('Second error');
  })
  .catch((error) => {
    console.log('Catch 2:', error.message);
    return 'Recovered';
  })
  .then((value) => {
    console.log('Then:', value);
    throw new Error('Third error');
  })
  .catch((error) => {
    console.log('Catch 3:', error.message);
  });

What will be the output?

#13Async Function Return Values

async function func1() {
  return 1;
}
async function func2() {
  return Promise.resolve(2);
}

func1().then(console.log);
func2().then(console.log);
console.log(3);

What will be the output?

#14Promise.finally Behavior

Promise.resolve('Success')
  .finally(() => {
    console.log('Finally 1');
    return 'This will be ignored';
  })
  .then((value) => {
    console.log('Then 1:', value);
  })
  .finally(() => {
    console.log('Finally 2');
    throw new Error('Finally error');
  })
  .then((value) => {
    console.log('Then 2:', value);
  })
  .catch((error) => {
    console.log('Catch:', error.message);
  });

What will be the output?

#15Complex Event Loop Ordering

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
  Promise.resolve().then(() => console.log('Promise in Timeout'));
}, 0);

Promise.resolve()
  .then(() => {
    console.log('Promise 1');
    setTimeout(() => console.log('Timeout in Promise'), 0);
  })
  .then(() => {
    console.log('Promise 2');
  });

setTimeout(() => {
  console.log('Timeout 2');
}, 0);

console.log('End');

What will be the output?

#16Executor Sync, Resolve Async

const promise = new Promise((resolve, reject) => {
  console.log('Executor start');
  
  setTimeout(() => {
    console.log('Timeout in executor');
    resolve('Done');
  }, 0);
  
  console.log('Executor end');
});
promise.then((value) => {
  console.log('Then:', value);
});
console.log('After promise creation');

What will be the output?