CallBack In JS

Callback in JavaScript

A callback is a function that is passed as an argument to another function. The receiving function can then call that function when it needs to. In simple words, a callback allows us to say, "Here is a function; call it when you are ready."

What is a Callback?

JavaScript allows us to pass functions as values. This means a function can be stored in a variable, passed as an argument, or returned from another function. When we pass a function to another function and that function later calls it, the passed function is called a callback function.

function greet() {
    console.log("Hello!")
}

function execute(callback) {
    callback()
}

execute(greet)

Here, greet is passed to execute() as an argument. Inside execute(), the callback() parameter refers to the greet function, so calling callback() executes greet().

greet()
   ↓
passed to
   ↓
execute(greet)
   ↓
callback()
   ↓
greet() executes

Why Do We Need Callbacks?

Callbacks are useful when we want one function to perform some work and then execute another function at a particular point. They are especially important when working with asynchronous operations, where we may want something to happen after an operation finishes.

For example, setTimeout() accepts a callback:

setTimeout(function () {
    console.log("2 seconds passed")
}, 2000)

Here, the function passed to setTimeout() is the callback. JavaScript calls this function after the timer finishes.

Passing a Function vs Calling a Function

When passing a callback, we usually pass the function without parentheses.

execute(greet)

This means:

"Pass the greet function to execute."

But:

execute(greet())

means:

"Call greet now and pass its returned value to execute."

So these two are not the same.

What is Callback Hell in JavaScript?

In JavaScript, a callback is a function that is passed to another function and executed later. Callbacks are commonly used when working with asynchronous operations such as fetching data, reading files, or waiting for a task to complete.

The problem starts when we have many asynchronous operations that depend on each other. We may put one callback inside another callback, and then another callback inside that. This creates a deeply nested structure called Callback Hell.

Example of Callback Hell

Imagine we need to perform these tasks one after another:

1. Get user data
2. Get the user's orders
3. Get the details of the first order
4. Make a payment

Using callbacks, the code might look like this:

getUser(function(user) {
    getOrders(user, function(orders) {
        getOrderDetails(orders[0], function(order) {
            makePayment(order, function(result) {
                console.log("Payment completed")
            })
        })
    })
})

Here, each operation depends on the previous operation. Because of this, each callback is placed inside another callback.

As the number of asynchronous operations increases, the code becomes more deeply nested. This makes the code harder to read, understand, debug, and maintain.

This deeply nested callback structure is what we commonly call Callback Hell.