Then and catch methods in Javascript - Time & Space Complexity

Time Complexity: Then and catch methods

O(n)

Understanding Time Complexity

When using then and catch methods with promises, it's important to understand how the time to complete grows as the number of chained operations increases.

We want to know how the number of steps affects the total time the program takes.

Scenario Under Consideration

Analyze the time complexity of chaining multiple then and catch calls.

const promise = new Promise((resolve) => resolve(1));

promise
  .then(value => value + 1)
  .then(value => value * 2)
  .then(value => console.log(value))
  .catch(error => console.error(error));
    

This code creates a promise and chains several then methods to process the result, ending with a catch to handle errors.

Identify Repeating Operations

Look for repeated steps that happen as the chain grows.

• Primary operation: Each then or catch callback runs once per chain link.
• How many times: The number of chained then or catch calls determines how many callbacks run in sequence.

How Execution Grows With Input

As you add more then or catch calls, the total steps increase linearly.

Number of chained calls (n)	Approx. Operations
3	3 callbacks run in order
10	10 callbacks run one after another
100	100 callbacks run sequentially

Pattern observation: The total work grows directly with the number of chained calls.

Final Time Complexity

Time Complexity: O(n)

This means the time to complete grows in a straight line as you add more then or catch methods.

Common Mistake

[X] Wrong: "Adding more then calls doesn't affect performance much because they run instantly."

[OK] Correct: Each then callback runs in order, so more calls mean more steps, which takes more time overall.

Interview Connect

Understanding how promise chains grow helps you write efficient asynchronous code and explain your reasoning clearly in interviews.

Self-Check

What if we replaced the chained then calls with parallel Promise.all? How would the time complexity change?

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