Callbacks in JavaScript: Why They Exist

Function ko bhejo, baad mein bulayenge

You know functions. You call them, they run.

But what if you want a function to run later? After something finishes?

That's a callback.

Let me explain.

---

Functions are Values (First Class Citizens)

In JavaScript, functions are like normal values.

You can store them in variables:

const greet = function() {
  console.log("Hello");
};

You can pass them to other functions:

function runFunction(fn) {
  fn();  // Run whatever function is passed
}

runFunction(greet); // Hello

Function passed to another function = callback.

---

What is a Callback?

A callback is a function passed as an argument to another function, to be called back later.

function doTask(callback) {
  // Do some work
  console.log("Task done");
  // Now call the callback
  callback();
}

doTask(function() {
  console.log("Callback executed!");
});

// Output:
// Task done
// Callback executed!

---

Why Callbacks Exist — The Async Problem

Remember async? You don't wait for slow tasks.

But how do you know when a slow task finishes?

Callback bataega.

console.log("Order food");

setTimeout(function() {
  console.log("Food arrived!");  // This is a callback
}, 3000);

console.log("Do other work");

// Output:
// Order food
// Do other work
// (3 seconds later) Food arrived!

setTimeout takes a callback. When timer finishes, it calls your function back.

---

Callback Diagram (Simple)

graph TD
    A["main()"] --> B["asyncTask(callback)"]
    B --> C["asyncTask starts & returns"]
    B -.->|"later"| D["callback() runs"]
    C --> E["main continues"]

    style A fill:none,stroke:#000
    style B fill:none,stroke:#000
    style C fill:none,stroke:#000
    style D fill:none,stroke:#000,stroke-dasharray:5
    style E fill:none,stroke:#000

---

Real-World Examples

Example 1: Event Listener (Callback)

document.getElementById("btn").addEventListener("click", function() {
  console.log("Button clicked!");  // Callback runs when user clicks
});

console.log("Waiting for click...");
// Not blocking. User can do other things.

Example 2: API Request (Callback style - old way)

function fetchUser(userId, callback) {
  console.log("Fetching user...");
  
  setTimeout(() => {
    const user = { id: userId, name: "Batman" };
    callback(user);  // Call back with the data
  }, 2000);
}

fetchUser(1, function(user) {
  console.log("User received:", user.name);
});

console.log("Do other work");

// Output:
// Fetching user...
// Do other work
// (2 sec later) User received: Batman

Example 3: Array methods use callbacks (sync)

const numbers = [1, 2, 3, 4, 5];

// forEach takes a callback
numbers.forEach(function(num) {
  console.log(num * 2);
});

// filter takes a callback
const evens = numbers.filter(function(num) {
  return num % 2 === 0;
});

---

The Problem: Callback Hell

When you have multiple async tasks that depend on each other:

getUser(1, function(user) {
  getOrders(user.id, function(orders) {
    getOrderDetails(orders[0].id, function(details) {
      getPayment(details.paymentId, function(payment) {
        console.log(payment);
        // This is callback hell 🎄
      });
    });
  });
});

Looks like a pyramid. Hard to read. Hard to debug.

This is called Callback Hell or Pyramid of Doom.

---

Callback Nesting Diagram

graph TD
    A["getUser()"] --> B["callback: getOrders()"]
    B --> C["callback: getOrderDetails()"]
    C --> D["callback: getPayment()"]
    D --> E["callback: ... more depth"]

    style A fill:none,stroke:#000
    style B fill:none,stroke:#000
    style C fill:none,stroke:#000
    style D fill:none,stroke:#000
    style E fill:none,stroke:#000

---

Why Callback Hell Happens

// Task 1: Get user (1 sec)
// Task 2: Get orders using user.id (1 sec)
// Task 3: Get details using orders[0].id (1 sec)

// Synchronous thinking is linear. Async callbacks force nesting.

Solution? Promises and async/await (next topics).

But callbacks are still everywhere. They're the foundation.

---

Callback vs Regular Function Call

Regular Call	Callback
You call it now	Someone else calls it later
Direct invocation	Passed as argument
Runs immediately	Runs after some event/task

// Regular
function add(a, b) {
  return a + b;
}
const result = add(2, 3); // You call, get result now

// Callback
function fetchData(cb) {
  setTimeout(() => cb("data"), 1000);
}
fetchData(function(data) {
  console.log(data); // Called later
});

---

Everyday Analogy

Callback = "Call me back."

You call a restaurant for delivery.

They say: "We'll call you back when food is ready."

You give them your phone number (callback function).

Later, they call you (execute callback).

That's it.

---

Common Scenarios Where Callbacks Are Used

Scenario	Example
Event listeners	button.onclick = function() {...}
Timers	setTimeout(callback, 1000)
HTTP requests	fetch(url).then(callback) (promise-based but similar)
File operations	fs.readFile(file, callback) (Node.js)
Database queries	db.query(sql, callback)
Array methods	arr.map(callback), arr.filter(callback)

---

Important Note

Callbacks aren't just for async. Array methods use callbacks synchronously too.

But the term "callback" is most famous for async — "call me back when done."

---

Final Thought

Callback ek function hai jo baad mein chalta hai. Jab async task complete ho, callback bulao. Yeh JavaScript ka foundation hai async programming ka. But deep nesting mat karna — warna callback hell mein phas jaoge. Uske liye Promise hai, async/await hai. Pehle callbacks samjho, phir aage badho.

---

What's Next?

1. "Promises: Callback Hell Se Bachao"

2. "Async/Await: Modern JavaScript Ka Raja"

3. "Event Loop: Callbacks Ke Peeche Ka Magic"

4. Your own topic

Just say the number or name.