Promise chaining in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this promise chain?

Consider the following JavaScript code using promise chaining. What will be printed to the console?

Javascript

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

A 5\n8

B 13\n16

C 10\n10

D 10\n13

💡 Hint

Remember each .then receives the resolved value from the previous .then.

The first then doubles 5 to 10. The second then logs 10 and returns 13. The last then logs 13.

❓ Predict Output

intermediate

What does this promise chain output?

Look at this code snippet. What will it print to the console?

Javascript

Promise.resolve('start')
  .then(str => str + ' middle')
  .then(str => {
    throw new Error('Oops');
  })
  .catch(err => 'caught error')
  .then(str => console.log(str));

A caught error

B start middle

C Oops

D undefined

💡 Hint

Check how errors are caught and handled in promise chains.

The error thrown is caught by the catch, which returns 'caught error'. The last then logs that string.

❓ Predict Output

advanced

What is the final value logged?

Analyze this promise chain and determine the final value logged to the console.

Javascript

Promise.resolve(1)
  .then(x => x + 1)
  .then(x => Promise.resolve(x + 1))
  .then(x => { throw 'error'; })
  .catch(() => 10)
  .then(x => x + 1)
  .then(x => console.log(x));

A 11

B 4

C error

D undefined

💡 Hint

Remember catch returns a resolved promise with 10, then the chain continues.

The chain throws an error, caught by catch returning 10, then adds 1, logging 11.

❓ Predict Output

advanced

What error does this promise chain produce?

What error will this code produce when run?

Javascript

Promise.resolve(3)
  .then(x => x * 2)
  .then(() => { throw new TypeError('Wrong type'); })
  .then(x => x + 1)
  .catch(err => {
    console.log(err.name);
    throw err;
  })
  .then(() => console.log('Done'))
  .catch(err => console.log('Final catch:', err.message));

A TypeError\nDone

B Wrong type\nDone

C TypeError\nFinal catch: Wrong type

D SyntaxError

💡 Hint

Look at how errors propagate and how catch rethrows the error.

The first catch logs 'TypeError' and rethrows. The next then is skipped. The final catch logs the error message.

🧠 Conceptual

expert

Which option correctly chains promises to fetch data sequentially?

You want to fetch user data, then fetch posts for that user, and finally fetch comments for the first post. Which promise chain correctly does this?

A fetchUser().then(user => fetchPosts(user.id).then(posts => fetchComments(posts[0].id))).then(comments => console.log(comments));

B fetchUser().then(user => fetchPosts(user.id)).then(posts => fetchComments(posts[0].id)).then(comments => console.log(comments));

C fetchUser().then(user => fetchPosts(user.id)); fetchComments(posts[0].id).then(comments => console.log(comments));

D fetchUser().then(user => fetchPosts(user.id)); then(posts => fetchComments(posts[0].id)).then(comments => console.log(comments));

💡 Hint

Remember that to chain dependent async calls, you must return the inner promise inside then.

Option B correctly chains the promises sequentially by returning each promise in the chain, allowing fetchComments to wait for fetchPosts, and finally logging comments.