VOOZH about

URL: https://dev.to/ali_hamza_589ec7b3eb6688d/day-27-of-learning-mern-stack-1cgj

⇱ Day 27 of learning MERN Stack - DEV Community


Hello Dev Community! 👋

It is officially Day 27 of my journey toward mastering the MERN stack! Today, I stepped into the most powerful and heavily interviewed aspect of the language: Asynchronous JavaScript, following Lecture 10 of Apna College's playlist with Shradha Didi.

Up until now, every line of code we wrote ran sequentially (one after the other). Today, I learned how JavaScript handles operations that take time without freezing the entire browser!


🧠 Key Learnings From JS Lecture 10 (Async Basics)

I explored the core mechanics of how JavaScript manages time-consuming operations like fetching API data or database queries:

1. Synchronous vs. Asynchronous Flow

  • Synchronous: Code executes line-by-line. If line 2 takes 5 seconds, line 3 is completely blocked until line 2 finishes.
  • Asynchronous: Allows important tasks to execute in the background, meaning the rest of the script can keep running smoothly without waiting.

2. The setTimeout Utility

I experimented with setTimeout(callback, delay), which triggers a block of code after a specific millisecond duration. It was amazing to see lines written below a setTimeout print before the timeout code executed, proving its non-blocking nature!

3. Callbacks & The Infamous "Callback Hell"

While passing functions as arguments (callbacks) is useful for async operations, nesting multiple callbacks inside each other to handle sequential operations creates a massive nested structure.

  • Shradha Didi showed us why this "Callback Hell" (or Pyramid of Doom) is a nightmare to read, debug, and maintain.

🛠️ What I Actually Code / Practiced

I spent my practice session replicating database loading sequences to understand data flow:

  • The Dummy Data Ingestion: Wrote a script that simulates fetching raw user data IDs from a backend server using staggered nested callbacks.
  • The Nesting Drill: Nested multiple simulated data fetches (Data 1 $\rightarrow$ Data 2 $\rightarrow$ Data 3) each waiting for the previous one to finish, successfully reproducing Callback Hell in my own console.

Seeing how messy the code structure became was the perfect way to understand why modern JavaScript evolved to use better asynchronous tools!


🎯 My Goal for Tomorrow (Day 28 / Lecture 10 Part 2)

Tomorrow, I will be moving to the ultimate solutions for Callback Hell inside Lecture 10:

  • Diving deep into Promises (.then() and .catch()).
  • Learning how to chain operations cleanly before moving toward the absolute cleaner syntax: Async/Await!

💬 Let's Connect!

To the Apna College alumni: Did your brain hurt a little bit when you first looked at the nested callback structures? To seniors: Do you ever find legacy production codebases that still run on raw Callback Hell structures?

My async behavior experiments are pushed to GitHub!
[Links in the Comments]

Keep learning, keep building! 🚀