Then and catch methods in Javascript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Promise chaining with then and catch

What is the output of this code snippet?

Javascript

Promise.resolve(5)
  .then(x => x * 2)
  .then(x => { throw new Error('Oops'); })
  .catch(e => 'Error caught')
  .then(x => x + ' done')
  .then(console.log);

A Uncaught Error

B Oops done

C 10 done

D Error caught done

💡 Hint

Remember catch handles errors and passes its return value to the next then.

The promise resolves with 5, then multiplied by 2 gives 10. Then an error is thrown, which is caught by catch returning 'Error caught'. The next then appends ' done' to that string, resulting in 'Error caught done'.

❓ Predict Output

intermediate

Error propagation in promise chains

What will be logged by this code?

Javascript

Promise.reject('fail')
  .then(() => 'success')
  .catch(err => err)
  .then(console.log);

A success

B Uncaught Error

C fail

D undefined

💡 Hint

Catch returns the error string, which is passed to the next then.

The promise is rejected with 'fail'. The then is skipped. The catch receives 'fail' and returns it. The next then logs 'fail'.

❓ Predict Output

advanced

Multiple catch blocks in promise chain

What is the output of this code?

Javascript

Promise.resolve('start')
  .then(val => { throw 'error1'; })
  .catch(err => {
    console.log('Caught:', err);
    throw 'error2';
  })
  .catch(err => console.log('Caught again:', err));

A Caught: error1

B Caught: error1\nCaught again: error2

C Caught again: error2

D Uncaught error1

💡 Hint

A catch can throw again to be caught by another catch.

The first then throws 'error1', caught by first catch which logs it and throws 'error2'. The second catch catches 'error2' and logs it.

🧠 Conceptual

advanced

Promise then return values

Which option correctly describes what happens when a then callback returns a promise?

A The next then waits for the returned promise to resolve before running.

B The next then runs immediately ignoring the returned promise.

C The returned promise is ignored and the next then receives undefined.

D The chain breaks and no further thens run.

💡 Hint

Think about how promise chaining works with promises returned inside then.

When a then returns a promise, the next then waits for that promise to resolve and receives its resolved value.

❓ Predict Output

expert

Complex promise chain with nested then and catch

What is the final output logged by this code?

Javascript

Promise.resolve(1)
  .then(x => x + 1)
  .then(x => {
    return Promise.reject('fail at step 3');
  })
  .catch(err => {
    console.log('Caught:', err);
    return 10;
  })
  .then(x => x * 2)
  .then(x => { throw 'final error'; })
  .catch(err => console.log('Final catch:', err));

A Caught: fail at step 3\nFinal catch: final error

B Final catch: final error

C Caught: fail at step 3

D Uncaught final error

💡 Hint

Follow the chain carefully, noting where errors are caught and what values are returned.

The promise resolves with 1, then adds 1 to get 2. Then it rejects with 'fail at step 3'. The catch logs 'Caught: fail at step 3' and returns 10. Next then multiplies 10 by 2 to get 20. Then throws 'final error'. The last catch logs 'Final catch: final error'.

Practice

1. What does the then method do in JavaScript promises?

easy

A. Creates a new promise

B. Runs when the task fails

C. Stops the promise from running

D. Runs when the task finishes successfully

Solution

1. Step 1: Understand the role of then

   The then method is used to handle the result when a promise completes successfully.

2. Step 2: Differentiate from catch

   The catch method handles errors or failures, not success.

3. Final Answer:

   Runs when the task finishes successfully -> Option D

4. Quick Check:

   then = success handler [OK]

Hint: Remember: then = success, catch = failure [OK]

Common Mistakes:

• Confusing then with catch
• Thinking then stops the promise
• Believing then creates a new promise

2. Which of the following is the correct syntax to add a catch handler to a promise named p?

easy

A. catch(p, () => console.log('Error'))

B. p.then.catch(() => console.log('Error'))

C. p.catch(() => console.log('Error'))

D. p.catch = () => console.log('Error')

Solution

1. Step 1: Recall correct catch syntax

   The catch method is called directly on the promise object like p.catch(callback).

2. Step 2: Check each option

   p.catch(() => console.log('Error')) uses correct syntax. p.then.catch(() => console.log('Error')) chains incorrectly. p.catch = () => console.log('Error') tries to assign catch as a property. catch(p, () => console.log('Error')) uses invalid function call.

3. Final Answer:

   p.catch(() => console.log('Error')) -> Option C

4. Quick Check:

   Use promise.catch() syntax [OK]

Hint: Use promise.catch(callback) to handle errors [OK]

Common Mistakes:

• Chaining catch after then incorrectly
• Assigning catch as a property
• Using catch as a standalone function

3. What will be the output of this code?

Promise.resolve('Hello')
  .then(msg => msg + ' World')
  .then(console.log)
  .catch(() => console.log('Error'));

medium

A. Hello

B. Hello World

C. Error

D. undefined

Solution

1. Step 1: Follow promise resolution

   The promise resolves with 'Hello'. The first then adds ' World' to it, resulting in 'Hello World'.

2. Step 2: Output from second then

   The second then logs the result 'Hello World'. The catch is not called because no error occurs.

3. Final Answer:

   Hello World -> Option B

4. Quick Check:

   Promise resolves + then chains = 'Hello World' [OK]

Hint: then chains transform and pass values forward [OK]

Common Mistakes:

• Expecting catch to run without error
• Ignoring value returned by first then
• Thinking console.log returns undefined

4. Identify the error in this code snippet:

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log('Error:', error));

fetch('url')
  .then(response => response.json())
  .catch(error => console.log('Error:', error))
  .then(data => console.log(data));

medium

A. The second chain logs data even if fetch fails

B. The first chain has wrong catch placement

C. Both chains are correct

D. fetch cannot be chained with then and catch

Solution

1. Step 1: Analyze first chain

   The first chain calls then twice and catch last, so errors are caught properly.

2. Step 2: Analyze second chain

   The second chain calls catch before the last then. So even if fetch fails, the last then runs with undefined data, causing possible issues.

3. Final Answer:

   The second chain logs data even if fetch fails -> Option A

4. Quick Check:

   Catch before then can cause unexpected data [OK]

Hint: Place catch last to handle errors before then [OK]

Common Mistakes:

• Placing catch before then incorrectly
• Assuming catch stops later then calls
• Ignoring promise chain order

5. You want to fetch user data and then fetch their posts only if the user fetch succeeds. Which code correctly uses then and catch to do this?

hard

A. fetchUser()
.then(user => fetchPosts(user.id))
.then(posts => console.log(posts))
.catch(err => console.log('Error:', err));

B. fetchUser()
.catch(err => console.log('Error:', err))
.then(user => fetchPosts(user.id))
.then(posts => console.log(posts));

C. fetchUser()
.then(user => fetchPosts(user.id))
.catch(err => console.log('Error:', err))
.then(posts => console.log(posts));

D. fetchUser()
.then(user => fetchPosts(user.id))
.catch(err => console.log('Error:', err))
.catch(err => console.log('Another error:', err));

Solution

1. Step 1: Understand chaining for dependent tasks

   We want to fetch posts only if user fetch succeeds, so fetchPosts must be inside the first then.

2. Step 2: Place catch at the end

   Catch should be last to handle any error from either fetchUser or fetchPosts.

3. Final Answer:

   fetchUser().then(user => fetchPosts(user.id)).then(posts => console.log(posts)).catch(err => console.log('Error:', err)); -> Option A

4. Quick Check:

   Chain then for success, catch last for errors [OK]

Hint: Chain dependent tasks in then, catch errors last [OK]

Common Mistakes:

• Placing catch before all then calls
• Calling then after catch causing unexpected runs
• Using multiple catch handlers unnecessarily