🧠 Core Concepts

Here we will be looking into these Concepts

  • Callback basics ✔️

  • Callback vs function execution ✔️

  • Promise creation ✔️

  • Chaining ✔️

  • Return flow ✔️

  • Error handling ✔️

  • Async behavior ✔️

Function Execution vs Reference

step3();        // Executes immediately  
step3;          // Function reference (does nothing)  
() => step3();  // Function that can be executed later

👉 Key idea:

  • () → executes now

  • function reference → can be executed later

  • arrow function → wrapper to delay execution

🔹 Callbacks

Basic Example

function processUser(name, callback) {  
  console.log("Processing " + name);  
  callback(name);  
}  
  
function sayHello(name) {  
  console.log("Hello " + name);  
}  
  
processUser("Mithilesh", sayHello);

Callback Hell

step1(() => {  
  step2(() => {  
    step3();  
  });  
});

❌ Problems:

  • Nested structure

  • Hard to read

  • Hard to debug

🔹 Promises

Creating a Promise

function getData() {  
  return new Promise((resolve, reject) => {  
    setTimeout(() => {  
      resolve("Data received");  
    }, 2000);  
  });  
}

Using a Promise

getData()  
  .then((data) => {  
    console.log(data);  
  })  
  .catch((err) => {  
    console.log(err);  
  });

resolve vs reject

resolve("Success"); // goes to .then()  
reject("Error");    // goes to .catch()

🔹 Promise Chaining

step1()  
  .then(() => step2())  
  .then(() => step3())  
  .catch(console.error);

Important Rule

.then() always expects a function

.then(step2)              // passes result to step2  
.then(() => step2())      // ignores result, runs step2  
.then(console.log)        // logs result

🔹 Return Flow (VERY IMPORTANT)

Correct

.then((res) => {  
  return step2(res);  
})

Wrong

.then((res) => {  
  step2(res); // ❌ no return  
})

👉 Result: next .then() gets undefined

Example

Promise.resolve("A")  
  .then((res) => {  
    console.log(res);  
    return "B";  
  })  
  .then((res) => {  
    console.log(res);  
  });


Output:
A  
B

Missing Return Example

Promise.resolve("A")  
  .then((res) => {  
    console.log(res);  
    "B"; // no return  
  })  
  .then((res) => {  
    console.log(res);  
  });


Output:
A  
undefined

🔹 Promise vs Value

return "B";                    // plain value  
return Promise.resolve("B");   // Promise

👉 Both behave the same in .then()

🔹 Nested Promise Trap

return step2(res).then((data) => {  
  console.log(data);  
});

👉 If no return → next .then() gets undefined

Correct

return step2(res).then((data) => {  
  console.log(data);  
  return data;  
});

🔹 Error Handling

Throw inside .then()

.then(() => {  
  throw new Error("Boom");  
})  
.catch((err) => {  
  console.log(err.message);  
});

👉 throw = reject

Important Flow

then → then → throw → catch

.then(success, error) vs .catch()

.then(success, error) // ❌ not recommended  
.catch(error)         // ✅ preferred

👉 .catch() handles:

  • rejection

  • thrown errors

  • entire chain

🔹 Recovery Pattern

Promise.reject("Error")  
  .catch((err) => {  
    console.log("Handled:", err);  
    return "Recovered";  
  })  
  .then((res) => {  
    console.log("Next:", res);  
  });

Output:

Handled: Error
Next: Recovered

🔹 When .catch() is Skipped

Promise.resolve("resolve")  
  .catch((err) => {  
    console.log(err);  
  })  
  .then((res) => {  
    console.log(res);  
  });


Output:

resolve

🔹 Transformation Chain

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


Output:

13

🔹 Async Delay Example

function delay(val) {  
  return new Promise((resolve) => {  
    setTimeout(() => resolve(val), 1000);  
  });  
}  
  
delay(2)  
  .then((num) => num * 2)  
  .then((num) => delay(num + 3))  
  .then(console.log);


Output:

7

🧠 Key Mental Models

1. Promise Flow

resolve → then → then → then  
             ↓  
           throw  
             ↓  
           catch

2. Return Flow

value → return → next then  
no return → undefined → next then

3. Function Passing

.then(fn) → fn(value)

4. Promise Behavior

ActionResult
resolvethen
rejectcatch
throwreject
no returnundefined

💥 Golden Rules

  • Always return inside .then() if chaining

  • .then() takes a function, not a value

  • throw inside Promise = rejection

  • .catch() handles everything downstream

  • Promises don’t block — they schedule execution