Creating promises in Javascript - Visual Walkthrough

Concept Flow - Creating promises

Start

↓

Create new Promise

↓

Executor function runs

↓

Call resolve(value)

↓

Promise fulfilled

↓

Call reject(error)

↓

Promise rejected

↓

Promise settles (fulfilled or rejected)

↓

Then or catch handlers run

↓

End

This flow shows how a new Promise is created, the executor function runs, and either resolve or reject is called to settle the promise, triggering then or catch handlers.

Execution Sample

Javascript

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

Creates a promise that resolves with 'Done' after 1 second, then logs the result.

Execution Table

Step	Action	Executor Function	Promise State	Output
1	Create Promise	Executor function starts	pending	none
2	setTimeout scheduled	Waiting 1 second	pending	none
3	Timeout fires	Calls resolve('Done')	fulfilled	none
4	Then handler runs	Receives 'Done'	fulfilled	Logs: Done
5	End	Promise settled	fulfilled	none

💡 Promise settles after resolve is called, then handler runs and logs output.

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
p	Promise pending	Promise pending	Promise pending	Promise fulfilled	Promise fulfilled
result	undefined	undefined	undefined	undefined	'Done'

Key Moments - 3 Insights

Why does the promise start in 'pending' state and not immediately 'fulfilled'?

Because the executor function runs immediately but the asynchronous operation inside (setTimeout) delays calling resolve, so the promise stays 'pending' until resolve is called (see execution_table step 2 and 3).

What happens if reject is called instead of resolve?

The promise state changes to 'rejected' and the catch handler would run instead of then (not shown here, but similar flow to step 3 and 4).

Why does the then handler run after the promise is fulfilled?

Because then handlers wait for the promise to settle (fulfilled or rejected) before running, as shown in execution_table step 4.

Visual Quiz - 3 Questions

Look at the execution table, what is the promise state at step 2?

A rejected

B fulfilled

C pending

D settled

💡 Hint

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

At which step does the then handler run and log the result?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look for 'Then handler runs' and 'Logs: Done' in the Output column of execution_table.

If the executor called reject instead of resolve, what would change in the execution table?

A Promise state would be 'rejected' at step 3

B Then handler would run at step 4

C Promise state would be 'fulfilled' at step 3

D No change in promise state

💡 Hint

Recall that calling reject changes promise state to 'rejected' instead of 'fulfilled' (see key_moments).

Concept Snapshot

Creating Promises in JavaScript:
- Use new Promise((resolve, reject) => {...})
- Executor runs immediately
- Call resolve(value) to fulfill
- Call reject(error) to reject
- Then/catch handle results asynchronously
- Promise starts as 'pending' and settles later

Full Transcript

This visual trace shows how creating a promise works in JavaScript. First, a new Promise is created and the executor function runs immediately. Inside, asynchronous work like setTimeout is scheduled. The promise starts in a 'pending' state. When resolve is called after 1 second, the promise state changes to 'fulfilled'. Then, the then handler runs and logs the result 'Done'. This flow helps understand how promises manage asynchronous operations by settling later and triggering handlers.

Practice

1. What does the resolve function do inside a JavaScript Promise?

easy

A. It pauses the promise execution.

B. It marks the promise as failed.

C. It marks the promise as successfully completed.

D. It cancels the promise.

Solution

1. Step 1: Understand the role of resolve in promises

   The resolve function is called when the asynchronous task finishes successfully.

2. Step 2: Differentiate from reject

   reject is used for failure, so resolve must mean success.

3. Final Answer:

   It marks the promise as successfully completed. -> Option C

4. Quick Check:

   resolve = success [OK]

Hint: Resolve means success, reject means failure [OK]

Common Mistakes:

• Confusing resolve with reject
• Thinking resolve cancels the promise
• Believing resolve pauses execution

2. Which of the following is the correct syntax to create a new Promise in JavaScript?

easy

A. new Promise(resolve, reject) => { }

B. Promise.new((resolve, reject) => { })

C. new Promise { resolve, reject => }

D. new Promise((resolve, reject) => { })

Solution

1. Step 1: Recall the Promise constructor syntax

   The Promise constructor takes a single function with two parameters: resolve and reject, wrapped in parentheses.

2. Step 2: Check each option for correct syntax

   new Promise((resolve, reject) => { }) correctly uses new Promise((resolve, reject) => { }). Others have syntax errors.

3. Final Answer:

   new Promise((resolve, reject) => { }) -> Option D

4. Quick Check:

   Promise syntax = new Promise((resolve, reject) => { }) [OK]

Hint: Promise needs a function with (resolve, reject) inside parentheses [OK]

Common Mistakes:

• Missing parentheses around parameters
• Using wrong keyword order
• Incorrect arrow function syntax

3. What will be the output of this code?

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

medium

A. Done

B. undefined

C. Error

D. Promise { <pending> }

Solution

1. Step 1: Understand promise resolution

   The promise calls resolve('Done'), so it completes successfully with value 'Done'.

2. Step 2: Check what then does

   then receives the resolved value and logs it, so 'Done' is printed.

3. Final Answer:

   Done -> Option A

4. Quick Check:

   Resolved value logged = Done [OK]

Hint: Resolve value appears in then callback [OK]

Common Mistakes:

• Expecting undefined instead of resolved value
• Confusing promise object with resolved output
• Thinking promise logs automatically

4. Find the error in this Promise creation code:

const p = new Promise(resolve, reject) => {
  resolve('Success');
};

medium

A. The reject function is never called.

B. Arrow function syntax is incorrect for Promise constructor.

C. Promise constructor missing the new keyword.

D. No error, code is correct.

Solution

1. Step 1: Check Promise constructor usage

   The Promise constructor requires a single function argument wrapped in parentheses.

2. Step 2: Identify arrow function syntax error

   The code uses new Promise(resolve, reject) => { } which is invalid syntax. It should be new Promise((resolve, reject) => { }).

3. Final Answer:

   Arrow function syntax is incorrect for Promise constructor. -> Option B

4. Quick Check:

   Arrow function must be inside parentheses [OK]

Hint: Promise needs one function argument wrapped in parentheses [OK]

Common Mistakes:

• Not wrapping parameters in parentheses
• Omitting new keyword (not in this case)
• Using wrong arrow function syntax

5. You want to create a Promise that waits 1 second and then resolves with 'Done'. Which code correctly does this?

hard

A. new Promise((resolve) => { setTimeout(() => resolve('Done'), 1000); })

B. new Promise(resolve => setTimeout(resolve('Done'), 1000))

C. new Promise((resolve, reject) => { resolve('Done'); setTimeout(() => {}, 1000); })

D. new Promise(() => { setTimeout(() => resolve('Done'), 1000); })

Solution

1. Step 1: Understand how to delay resolution

   Use setTimeout to delay calling resolve by 1000 ms (1 second).

2. Step 2: Check each option for correct usage

   new Promise((resolve) => { setTimeout(() => resolve('Done'), 1000); }) correctly passes a function to Promise and calls resolve('Done') inside setTimeout. new Promise(resolve => setTimeout(resolve('Done'), 1000)) calls resolve immediately. new Promise((resolve, reject) => { resolve('Done'); setTimeout(() => {}, 1000); }) resolves immediately and delays nothing. new Promise(() => { setTimeout(() => resolve('Done'), 1000); }) does not receive resolve parameter.

3. Final Answer:

   new Promise((resolve) => { setTimeout(() => resolve('Done'), 1000); }) -> Option A

4. Quick Check:

   Delay resolve with setTimeout inside Promise [OK]

Hint: Wrap resolve call inside setTimeout function [OK]

Common Mistakes:

• Calling resolve immediately instead of inside setTimeout
• Not passing resolve parameter
• Placing setTimeout outside Promise