Then and catch methods in Javascript - Step-by-Step Execution

Concept Flow - Then and catch methods

Start Promise

↓

Promise Pending

↓

Promise Resolved?

No→Promise Rejected?

↓

Then callback

↓

Continue chain

↓

End

A promise starts pending, then either resolves or rejects. If resolved, the then() callback runs. If rejected, the catch() callback runs.

Execution Sample

Javascript

new Promise((res, rej) => res('Done'))
  .then(result => console.log(result))
  .catch(error => console.log(error));

This code creates a promise that resolves immediately and logs the result using then(), skipping catch().

Execution Table

Step	Promise State	Action	Callback Called	Output
1	Pending	Promise created	None	None
2	Resolved	Resolve called with 'Done'	None	None
3	Resolved	then() callback runs	then	Logs: Done
4	Resolved	No error, catch() skipped	None	None
5	End	Promise chain complete	None	None

💡 Promise resolved, then() ran, catch() skipped because no error

Variable Tracker

Variable	Start	After Step 2	After Step 3	Final
promiseState	Pending	Resolved	Resolved	Resolved
result	undefined	'Done'	'Done'	'Done'
error	undefined	undefined	undefined	undefined

Key Moments - 2 Insights

Why does the catch() method not run in this example?

Because the promise resolved successfully (see Step 2 and 3 in execution_table), so then() runs and catch() is skipped.

What happens if the promise rejects instead of resolves?

If the promise rejects, then() is skipped and catch() runs to handle the error (not shown here but implied by the flow).

Visual Quiz - 3 Questions

Look at the execution_table, at which step does the then() callback run?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Check the 'Callback Called' column in execution_table for when then() runs.

According to variable_tracker, what is the value of 'error' after Step 3?

A null

B 'Done'

C undefined

D An error object

💡 Hint

Look at the 'error' row and the 'After Step 3' column in variable_tracker.

If the promise rejected at Step 2, which callback would run next?

A then() callback

B catch() callback

C Neither then() nor catch()

D Both then() and catch()

💡 Hint

Refer to the concept_flow diagram showing promise rejection leads to catch() callback.

Concept Snapshot

Promise.then() runs when promise resolves successfully.
Promise.catch() runs when promise rejects with error.
They help handle asynchronous success and failure.
Use then() to process results, catch() to handle errors.
They chain to manage async flow cleanly.

Full Transcript

This visual trace shows how JavaScript promises work with then() and catch() methods. A promise starts pending, then either resolves or rejects. When it resolves, the then() callback runs to handle the result. If it rejects, the catch() callback runs to handle the error. The example code creates a promise that resolves immediately with 'Done'. The execution table shows the promise state changes and which callbacks run step-by-step. The variable tracker shows how the promise state and result variables change. Key moments clarify why catch() does not run here and what would happen if the promise rejected. The quiz questions test understanding of when callbacks run and variable values during execution. This helps beginners see the flow of asynchronous code handling with promises.