4.Promise-then-callbacks-II.md

4. Promise then callbacks II

Problem

https://bigfrontend.dev/quiz/4-Promise-then-callbacks-II

Problem Description

What does the code snippet below output by console.log?

Promise.resolve(1)
  .then((val) => {
    console.log(val);
    return val + 1;
  })
  .then((val) => {
    console.log(val);
  })
  .then((val) => {
    console.log(val);
    return Promise.resolve(3).then((val) => {
      console.log(val);
    });
  })
  .then((val) => {
    console.log(val);
    return Promise.reject(4);
  })
  .catch((val) => {
    console.log(val);
  })
  .finally((val) => {
    console.log(val);
    return 10;
  })
  .then((val) => {
    console.log(val);
  });

Answer

Promise.resolve(1)
  .then((val) => {
    console.log(val); // 1
    return val + 1;
  })
  .then((val) => {
    console.log(val); // 2
  })
  .then((val) => {
    console.log(val); // undefined
    return Promise.resolve(3).then((val) => {
      console.log(val); // 3
    });
  })
  .then((val) => {
    console.log(val); // undefined
    return Promise.reject(4);
  })
  .catch((val) => {
    console.log(val); // 4
  })
  .finally((val) => {
    console.log(val); // undefined
    return 10;
  })
  .then((val) => {
    console.log(val); // undefined
  });

Explanation

• Promise.prototype.then() returns a Promise. If a then handler:

  • returns a value, the Promise returned by Promise.prototype.then() gets resolved with the returned value.

  • doesn't return anything, the Promise returned by Promise.prototype.then() gets resolved with an undefined value.

  • returns an already fulfilled Promise, the Promise returned by Promise.prototype.then() gets resolved with that Promise's value as its value.

  • returns an already rejected Promise, the Promise returned by Promise.prototype.then() gets rejected with that Promise's value as its value.

  • returns a pending Promise, the resolution/rejection of the promise returned by Promise.prototype.then() will be subsequent to the resolution/rejection of the Promise returned by the then handler.

• Promise.prototype.finally() returns a Promise. A finally handler will not receive any argument. In addition, it won't change the resolved value and just pass through it:

  Promise.resolve(1)
    .finally(() => {
      console.log('Promise ready');
      return 10;
    })
    .then((value) => {
      console.log(value); // 1
    });

  The reason that the final then handler in the code snippet above logs undefined is that Promise.prototype.catch() also returns a Promise and it behaves the same as calling Promise.prototype.then(undefined, onRejected). If the catch handler before finally() returns a value, then the final then handler would log that value:

  Promise.reject(1)
    .catch((value) => {
      console.log(value);
      return 3;
    })
    .finally(() => {
      console.log('Promise ready');
    })
    .then((value) => {
      console.log(value); // 3
    });

Reference

• Promise.prototype.then()
• Promise.prototype.catch()
• finally