Day 28 of learning MERN Stack

Hello Dev Community! 👋

It is officially Day 28 — completing exactly four full weeks of documented consistency on my track to full-stack engineering! Today, I moved to the next major phase of Lecture 10 in Apna College's JavaScript playlist with Shradha Didi, leaving Callback Hell behind and mastering Promises.

Yesterday, we saw how nesting callbacks makes code completely unreadable. Today, I learned how JavaScript objects help us handle asynchronous outcomes cleanly.

---

🧠 Key Learnings From JS Lecture 10 (Promises)

A Promise is an object representing the eventual completion (or failure) of an asynchronous operation. Shradha Didi broke down its mechanics perfectly:

1. The Three States of a Promise

• Pending: The initial state; the asynchronous operation is still working in the background.
• Fulfilled (Resolved): The operation completed successfully, triggering the resolve() callback.
• Rejected: The operation failed due to an error, triggering the reject() callback.

2. Consuming Promises (.then() and .catch())

We don't usually create raw promises when building apps; we mostly consume them from APIs.

• .then(): Executes automatically when a promise is successfully fulfilled.
• .catch(): Executes to catch and handle errors cleanly if a promise gets rejected.

3. Promise Chaining

The ultimate breakthrough today was learning Promise Chaining. Instead of nesting functions inside functions, we return a new promise inside a .then() block and link another .then() right below it. This flattens out our code layout into a clean vertical line!

javascript
getData(1)
    .then((res) => getData(2))
    .then((res) => getData(3))
    .then((res) => console.log("All data loaded sequentially!"));