Why promises are used in Javascript - See It in Action

Understanding Why Promises Are Used in JavaScript

📖 Scenario: Imagine you are ordering a pizza online. You place your order and wait for the pizza to be delivered. Meanwhile, you can do other things like setting the table or watching TV. You don't want to just sit and wait doing nothing. This is similar to how computers handle tasks that take time, like fetching data from the internet.

🎯 Goal: You will create a simple JavaScript program that shows how promises help handle tasks that take time without stopping other work. You will see how promises let your program wait for something to finish and then continue smoothly.

📋 What You'll Learn

Create a promise that simulates waiting for a pizza delivery

Add a variable to hold the message when the pizza is ready

Use the then method to handle the promise result

Print the message when the pizza is delivered

💡 Why This Matters

🌍 Real World

Promises are used in websites and apps to handle things like loading images, fetching data from servers, or waiting for user actions without freezing the screen.

💼 Career

Understanding promises is essential for web developers and anyone working with JavaScript to build fast, user-friendly applications.

1

Create a promise to simulate pizza delivery

Create a variable called pizzaPromise and set it to a new Promise that waits 2 seconds using setTimeout and then resolves with the string 'Pizza is ready!'.

Javascript

// Create the pizzaPromise variable with a Promise that resolves after 2 seconds
// Your code here

Hint

Use new Promise with a function that calls resolve inside setTimeout.

2

Add a variable to hold the delivery message

Create a variable called deliveryMessage and set it to an empty string ''.

Javascript

const pizzaPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Pizza is ready!');
  }, 2000);
});

// Create deliveryMessage variable and set it to an empty string
// Your code here

Hint

Use let deliveryMessage = ''; to create an empty string variable.

3

Use then to handle the promise result

Use pizzaPromise.then with a function that takes a parameter called message and sets deliveryMessage to message.

Javascript

const pizzaPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Pizza is ready!');
  }, 2000);
});

let deliveryMessage = '';

// Use pizzaPromise.then to set deliveryMessage to the resolved message
// Your code here

Hint

Use pizzaPromise.then((message) => { deliveryMessage = message; }); to handle the promise.

4

Print the delivery message after the promise resolves

Inside the then function, add a console.log(deliveryMessage) statement to print the message when the pizza is ready.

Javascript

const pizzaPromise = new Promise((resolve) => {
  setTimeout(() => {
    resolve('Pizza is ready!');
  }, 2000);
});

let deliveryMessage = '';

pizzaPromise.then((message) => {
  deliveryMessage = message;
  // Print deliveryMessage here
  // Your code here
});

Hint

Use console.log(deliveryMessage); inside the then callback to show the message.

Practice

1. Why are promises used in JavaScript?
Promise helps with:

easy

A. Storing data permanently

B. Making the program run slower

C. Writing code without any functions

D. Handling tasks that take time without stopping the program

Solution

1. Step 1: Understand what promises do

   Promises allow JavaScript to handle tasks like loading data without freezing the program.

2. Step 2: Identify the correct purpose

   Promises help manage asynchronous tasks so the program keeps running smoothly.

3. Final Answer:

   Handling tasks that take time without stopping the program -> Option D

4. Quick Check:

   Promises = handle async tasks without blocking [OK]

Hint: Promises handle slow tasks without freezing code [OK]

Common Mistakes:

• Thinking promises slow down the program
• Confusing promises with data storage
• Believing promises remove the need for functions

2. Which of the following is the correct way to create a promise in JavaScript?

easy

A. let p = new Promise((resolve, reject) => { /* code */ });

B. let p = Promise.create(() => { /* code */ });

C. let p = promise(() => { /* code */ });

D. let p = new promise { /* code */ };

Solution

1. Step 1: Recall correct Promise syntax

   Promises are created with new Promise and a function with resolve and reject parameters.

2. Step 2: Check each option

   Only let p = new Promise((resolve, reject) => { /* code */ }); uses the correct syntax with new Promise and arrow function.

3. Final Answer:

   let p = new Promise((resolve, reject) => { /* code */ }); -> Option A

4. Quick Check:

   Correct Promise syntax = new Promise(...) [OK]

Hint: Use 'new Promise' with resolve and reject functions [OK]

Common Mistakes:

• Using lowercase 'promise' instead of 'Promise'
• Trying to call Promise.create which doesn't exist
• Missing parentheses or arrow function syntax

3. What will be the output of this code?

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

medium

A. StartDone

B. DoneStart

C. DoneDone

D. StartStart

Solution

1. Step 1: Understand asynchronous behavior

   The setTimeout delays the resolve call by 100ms, so console.log('Start') runs first.

2. Step 2: Trace the output order

   First, 'Start' prints immediately, then after 100ms, 'Done' prints from the promise.

3. Final Answer:

   Start
   Done -> Option A

4. Quick Check:

   Async delay means 'Start' before 'Done' [OK]

Hint: setTimeout delays promise resolution, so logs appear after immediate code [OK]

Common Mistakes:

• Assuming promise resolves immediately
• Thinking 'Done' prints before 'Start'
• Ignoring asynchronous nature of setTimeout

4. Find the error in this promise code:

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

medium

A. Promise must call reject first

B. Calling reject after resolve has no effect

C. Missing semicolon after resolve

D. Then and catch cannot be chained

Solution

1. Step 1: Understand promise state changes

   Once a promise is resolved or rejected, its state is final and cannot change.

2. Step 2: Analyze the code flow

   The promise calls resolve('Success') first, so the later reject('Error') is ignored.

3. Final Answer:

   Calling reject after resolve has no effect -> Option B

4. Quick Check:

   Promise settles once; later calls ignored [OK]

Hint: Promise settles once; later resolve/reject calls ignored [OK]

Common Mistakes:

• Thinking reject overrides resolve if called later
• Believing then and catch can't be chained
• Confusing semicolon placement with logic errors

5. You want to fetch user data and then fetch posts for that user. Which approach best uses promises to handle this sequence?

hard

A. Use setTimeout to delay fetchPosts() after fetchUser()

B. Call fetchUser() and fetchPosts() separately without waiting

C. Call fetchUser(), then inside its .then(), call fetchPosts() and return that promise

D. Call fetchPosts() first, then fetchUser() inside its .then()

Solution

1. Step 1: Understand promise chaining for dependent tasks

   When one task depends on another, use .then() to wait for the first before starting the second.

2. Step 2: Identify correct chaining

   Call fetchUser(), then inside its .then(), call fetchPosts() and return that promise correctly calls fetchUser(), then in its .then(), calls fetchPosts() and returns its promise to chain properly.

3. Final Answer:

   Call fetchUser(), then inside its .then(), call fetchPosts() and return that promise -> Option C

4. Quick Check:

   Promise chaining = dependent tasks in sequence [OK]

Hint: Chain promises with then() for dependent async tasks [OK]

Common Mistakes:

• Running dependent tasks in parallel without waiting
• Using setTimeout instead of promise chaining
• Calling tasks in wrong order