Why promises are used in Javascript - Visual Breakdown

Concept Flow - Why promises are used

Start async task

↓

Create Promise

↓

Task runs in background

↓

Promise pending

↓

Resolve

↓

Then

↓

Continue with result or error handling

↓

End

This flow shows how a Promise starts an async task, waits for it to finish, then either resolves or rejects, allowing code to handle success or error.

Execution Sample

Javascript

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 1000);
});
promise.then(result => console.log(result));

This code creates a Promise that waits 1 second, then resolves with 'Done', which is logged.

Execution Table

Step	Action	Promise State	Callback Called	Output
1	Create Promise	Pending	No
2	Start timer (1s)	Pending	No
3	Timer ends, call resolve('Done')	Fulfilled	No
4	Then callback runs with 'Done'	Fulfilled	Yes	Logs: Done
5	End of execution	Fulfilled	Yes	Done logged

💡 Promise resolved and then callback executed, so execution ends.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	Final
promise	undefined	Pending Promise object	Fulfilled Promise object	Fulfilled Promise object	Fulfilled Promise object

Key Moments - 3 Insights

Why doesn't the code wait for the Promise to finish before moving on?

Because the Promise runs asynchronously (see Step 2 in execution_table), so JavaScript continues running other code while waiting.

What happens if the Promise is rejected instead of resolved?

The 'catch' callback would run instead of 'then' (not shown here), handling the error after rejection.

Why use Promises instead of just callbacks?

Promises make it easier to write and read async code by chaining actions and handling errors clearly (see Steps 3 and 4).

Visual Quiz - 3 Questions

Look at the execution_table, what is the Promise state at Step 2?

A Rejected

B Pending

C Resolved

D Settled

💡 Hint

Check the 'Promise State' column at Step 2 in the execution_table.

At which step does the 'then' callback get called?

A Step 4

B Step 1

C Step 3

D Step 5

💡 Hint

Look at the 'Callback Called' column to find when it changes to 'Yes'.

If the Promise was rejected, which part of the code would run instead of 'then'?

A No callback runs

B 'then' callback

C 'catch' callback

D Both 'then' and 'catch' run

💡 Hint

Refer to key_moments about error handling and rejection.

Concept Snapshot

Promises handle async tasks by representing future results.
They start pending, then resolve or reject.
Use .then() for success, .catch() for errors.
They help avoid callback nesting and improve code clarity.

Full Transcript

Promises in JavaScript are used to manage asynchronous tasks. When a Promise is created, it starts in a pending state while the task runs in the background. Once the task finishes successfully, the Promise resolves, triggering the .then() callback to handle the result. If the task fails, the Promise rejects, triggering the .catch() callback for error handling. This allows JavaScript to continue running other code without waiting, making async code easier to write and read.