🔁 JavaScript Functions Deep Dive #5: Mastering Callback Functions – The Heart of Async Programming

If JavaScript had a heartbeat, it would pulse to the rhythm of callbacks. They're everywhere — in DOM events, array methods, timers, HTTP requests, and more.

This article will break down:

• What a callback function is

• Named vs anonymous callbacks

• Why callbacks matter

• Common real-world uses

• Pitfalls and best practices

---

🧠 What Is a Callback Function?

A callback function is simply a function passed as an argument to another function, and is executed later by that function.

📌 “A function you give to another function, so it can call it back.”

---

✅ Basic Example:

function greet(name) {
  console.log(`Hello, ${name}!`);
}

function processUser(callback) {
  const userName = "Alice";
  callback(userName);
}

processUser(greet); // Hello, Alice!

Here, greet is the callback passed into processUser, which "calls it back" with a name.

---

1️⃣ Why Use Callbacks?

---

2️⃣ Anonymous vs Named Callbacks

🔹 Anonymous Callback

No function name — used when logic is short or one-time.

setTimeout(() => {
  console.log("Timeout over");
}, 1000);

Used widely in:

• setTimeout, setInterval

• Array methods like map, filter

• Event handlers

---

🔹 Named Callback

Gives your callback a name — better for reusability and debugging.

function showMsg() {
  console.log("3 seconds passed");
}
setTimeout(showMsg, 3000);

✅ Better for:

• Stack traces

• Recursion

• Code readability

---

3️⃣ Real-World Examples of Callbacks

🔸 Array Methods

const nums = [1, 2, 3];
const squared = nums.map(n => n * n); // Callback in map
console.log(squared); // [1, 4, 9]

🔸 Event Listeners

document.addEventListener("click", function () {
  console.log("User clicked");
});

🔸 Asynchronous HTTP Call

function getData(callback) {
  setTimeout(() => {
    const data = { name: "Pushpesh" };
    callback(data);
  }, 2000);
}

getData((user) => {
  console.log("User received:", user);
});

---

4️⃣ Callback Hell 😵

Nesting too many callbacks can cause unreadable code:

doTask1(() => {
  doTask2(() => {
    doTask3(() => {
      console.log("All done!");
    });
  });
});

🔧 This is where Promises and async/await were introduced to clean up the flow.

---

5️⃣ Callback vs Higher-Order Function

Let’s clarify:

So in this example:

function doSomething(callback) {
  callback(); // doSomething is higher-order, callback is... callback!
}

---

✅ Best Practices

---

🏁 Summary