JS 15

Note: According to the roadmap, Chapter 14 is Callbacks and Chapter 15 is Promises. Since you asked for Chapter 15, we'll jump directly to Promises. We'll cover callbacks later if needed because understanding them makes Promises even easier.

---

Chapter 15 — Promises

🎯 Goal (1 line)

Learn how to handle tasks that finish later (like API calls) without making your code messy.

---

2-Minute Concept

Imagine you order food online.

• You place the order.

• You don't get the food immediately.

• You continue doing other things.

• Later, the order is either:

  • ✅ Delivered

  • ❌ Cancelled

A Promise works exactly like that.

It represents a value you'll get later.

A Promise has 3 states:

Pending
   ↓
Fulfilled (Success)

OR

Rejected (Failed)

You'll mostly use these methods:

promise.then(...)
promise.catch(...)
promise.finally(...)

---

MCQ 1 (Easy)

What does a Promise represent?

A. A loop

B. A value available later

C. An object

D. A function

---

✅ Answer

B

A Promise is a placeholder for a result that isn't ready yet.

---

MCQ 2

Which method runs when a Promise succeeds?

A.

.catch()

B.

.then()

C.

.finally()

D.

.return()

---

✅ Answer

B

.then() receives the successful result.

---

MCQ 3

Which method handles errors?

A.

.then()

B.

.catch()

C.

.error()

D.

.try()

---

✅ Answer

B

Use .catch() whenever something goes wrong.

---

MCQ 4

Which method always runs?

A.

.then()

B.

.catch()

C.

.finally()

D.

.done()

---

✅ Answer

C

.finally() runs whether the Promise succeeds or fails.

---

MCQ 5

Predict the output.

Promise.resolve("Done")
  .then(result => console.log(result));

A.

Done

B.

Promise

C.

undefined

D.

Error

---

✅ Answer

A

Promise.resolve() creates an already successful Promise.

---

MCQ 6

Predict the output.

Promise.reject("Error")
  .catch(error => console.log(error));

A.

Error

B.

Promise

C.

undefined

D.

Nothing

---

✅ Answer

A

Promise.reject() creates an already failed Promise.

---

MCQ 7

What prints?

Promise.resolve(5)
  .then(number => console.log(number * 2));

A.

5

B.

10

C.

25

D.

Error

---

✅ Answer

B

The resolved value is 5.

5 × 2 = 10

---

MCQ 8

Find the bug.

Promise.resolve("Hi");

console.log(result);

A. No bug

B. result doesn't exist

C. Missing catch

D. Promise cannot resolve strings

---

✅ Answer

B

You only get the resolved value inside .then().

Correct:

Promise.resolve("Hi")
  .then(result => console.log(result));

---

MCQ 9

Output?

Promise.resolve(3)
  .then(value => value + 2)
  .then(value => console.log(value));

A.

3

B.

5

C.

32

D.

Error

---

✅ Answer

B

Each .then() receives the value returned by the previous .then().

---

MCQ 10

Predict the output.

Promise.resolve(10)
  .then(num => num * 2)
  .then(num => num + 5)
  .then(console.log);

A.

20

B.

25

C.

15

D.

Error

---

✅ Answer

B

10
↓

20
↓

25

---

MCQ 11

Output?

Promise.reject("Oops")
  .catch(error => console.log(error));

A.

Oops

B.

undefined

C.

Nothing

D.

Error

---

✅ Answer

A

.catch() receives the rejection reason.

---

MCQ 12

Predict the output.

Promise.resolve("JavaScript")
  .finally(() => console.log("Finished"))
  .then(console.log);

A.

JavaScript
Finished

B.

Finished
JavaScript

C.

Finished

D.

Error

---

✅ Answer

B

finally() runs first, then the resolved value continues to the next .then().

Output:

Finished
JavaScript

---

MCQ 13

Which code is better?

A.

Promise.resolve(5)
.then(x=>x+1)
.then(x=>console.log(x));

B.

Promise.resolve(5)
  .then(number => number + 1)
  .then(number => console.log(number));

---

✅ Answer

B

Meaningful variable names make code much easier to read.

---

MCQ 14

What happens?

Promise.resolve(5)
  .then(number => {
    console.log(number);
  });

A.

5

B.

Nothing

C.

undefined

D.

Error

---

✅ Answer

A

The value is printed inside .then().

---

MCQ 15

Predict the output.

Promise.resolve(5)
  .then(number => number + 5)
  .then(number => number * 2)
  .then(console.log);

A.

10

B.

20

C.

15

D.

Error

---

✅ Answer

B

5
↓

10
↓

20

---

MCQ 16

Find the bug.

Promise.reject("Network Error")
  .then(error => console.log(error));

A. No bug

B. Should use .catch()

C. Promise.reject is invalid

D. Missing return

---

✅ Answer

B

Rejected Promises skip .then() and go directly to .catch().

---

MCQ 17

Predict the output.

Promise.resolve(2)
  .then(number => number * 3)
  .then(number => number - 1)
  .then(number => number * 2)
  .then(console.log);

A.

8

B.

10

C.

12

D.

14

---

✅ Answer

B

2
↓

6
↓

5
↓

10

---

MCQ 18

What prints?

Promise.resolve("Hello")
  .then(message => {
    console.log(message);
    return "World";
  })
  .then(console.log);

A.

Hello
World

B.

Hello
Hello

C.

World

D.

Error

---

✅ Answer

A

The first .then() prints "Hello" and returns "World".

The second .then() receives "World".

---

MCQ 19

Which chain is better?

A.

Promise.resolve(5)
.then(x=>x+1)
.then(x=>x*2)
.then(console.log);

B.

Promise.resolve(5)
  .then(number => number + 1)
  .then(number => number * 2)
  .then(result => console.log(result));

---

✅ Answer

B

Readable names make debugging much easier.

---

MCQ 20 (Hard)

Predict the output.

Promise.resolve(5)
  .then(number => {
    console.log(number);
    return number + 5;
  })
  .then(number => {
    console.log(number);
    return number * 2;
  })
  .finally(() => console.log("Done"))
  .then(console.log);

A.

5
10
20
Done

B.

5
10
Done
20

C.

Done
5
10
20

D.

Error

---

✅ Answer

B

Step by step:

Resolve → 5

↓

First then
prints 5
returns 10

↓

Second then
prints 10
returns 20

↓

finally
prints Done

↓

Last then
prints 20

Final output:

5
10
Done
20

---

Common Beginner Mistakes

❌ Trying to use the Promise result outside .then().

❌ Forgetting .catch() for errors.

❌ Not returning a value from .then() when the next .then() needs it.

❌ Thinking .finally() receives the resolved value (it doesn't).

---

Mini Coding Challenge

Question

Predict the output without running it.

Promise.resolve(10)
  .then(number => {
    console.log(number);
    return number + 10;
  })
  .then(number => {
    console.log(number);
    return number * 3;
  })
  .finally(() => console.log("Completed"))
  .then(console.log);

---

✅ Answer

Step-by-step:

1. Promise resolves with 10

2. First .then() prints 10 and returns 20

3. Second .then() prints 20 and returns 60

4. .finally() prints "Completed"

5. Last .then() prints 60

Output:

10
20
Completed
60

---

Mini Project — Fake Login API

Problem

Create a Promise that simulates a successful login after 2 seconds. When it succeeds:

1. Print "Checking credentials..."

2. Print "Login Successful"

3. Print "Welcome Alice"

4. Print "Request Finished" using .finally()

---

✅ Solution

console.log("Checking credentials...");

const loginPromise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Alice");
  }, 2000);
});

loginPromise
  .then(userName => {
    console.log("Login Successful");
    console.log(`Welcome ${userName}`);
  })
  .catch(error => {
    console.log(error);
  })
  .finally(() => {
    console.log("Request Finished");
  });

Expected Output

Checking credentials...
(2-second pause)
Login Successful
Welcome Alice
Request Finished

---

🎯 Chapter 15 — The 20% That Gives You 80%

Remember these seven ideas:

1. A Promise represents work that finishes later.

2. .then() handles success.

3. .catch() handles failure.

4. .finally() always runs, whether the Promise succeeds or fails.

5. Each .then() receives the value returned by the previous .then().

6. Return values from .then() if the next step needs them.

7. In modern JavaScript, you'll often replace .then() chains with async/await—that's exactly what we'll learn in Chapter 16.

Chapter 16 (async/await) is one of the most important chapters in modern JavaScript and React. Once you understand it, writing code that fetches data from APIs becomes much cleaner and easier to read.