Creating promises in Javascript - Practice Exercises

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this promise code?

Consider the following JavaScript code that creates and uses a promise. What will be printed to the console?

Javascript

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Done'), 100);
});

promise.then(result => console.log(result));

A undefined

B Done

C Error

D Promise { <pending> }

💡 Hint

Remember that the promise resolves after 100 milliseconds and then calls the .then() callback.

The promise resolves after 100ms with the value 'Done'. The .then() method receives this value and logs it.

❓ Predict Output

intermediate

What does this promise reject with?

Look at this code snippet. What will be the output when the promise is rejected?

Javascript

const promise = new Promise((resolve, reject) => {
  reject('Failed');
});

promise.catch(error => console.log(error));

A Failed

B undefined

C Error

D Promise { <rejected> }

💡 Hint

The reject function sends the reason to the catch handler.

The promise is immediately rejected with the string 'Failed'. The catch handler logs this string.

❓ Predict Output

advanced

What is the output of this chained promise?

Analyze the following code. What will be printed to the console?

Javascript

new Promise((resolve, reject) => {
  resolve(5);
})
.then(value => value * 2)
.then(value => { throw new Error('Oops'); })
.catch(error => 'Caught: ' + error.message)
.then(value => console.log(value));

A undefined

B 10

C Error: Oops

D Caught: Oops

💡 Hint

Notice the error thrown and how the catch handles it.

The promise resolves with 5, then doubles to 10, then throws an error. The catch handles the error and returns a string, which is logged.

❓ Predict Output

advanced

What will this promise output after 1 second?

What will be printed to the console after running this code?

Javascript

function delay(ms) {
  return new Promise(resolve => setTimeout(() => resolve('Waited'), ms));
}

delay(1000).then(msg => console.log(msg));

A undefined

B Promise { <pending> }

C Waited

D Error

💡 Hint

The promise resolves after the given milliseconds with the string 'Waited'.

The delay function returns a promise that resolves after 1 second with 'Waited'. The then callback logs it.

❓ Predict Output

expert

What is the output of this nested promise code?

Examine this code carefully. What will be printed to the console?

Javascript

new Promise((resolve, reject) => {
  resolve('Start');
})
.then(value => {
  return new Promise((res, rej) => {
    setTimeout(() => res(value + ' End'), 50);
  });
})
.then(result => console.log(result));

A Start End

B Start

C undefined

D Error

💡 Hint

The first then returns a promise that resolves after 50ms with a modified string.

The first promise resolves with 'Start'. The then returns a new promise that appends ' End' after 50ms. The final then logs 'Start End'.

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