Callback Hell in Javascript with example

What is Callback Hell?

Callback hell is nothing but the nested callback functions. Where each callback function is dependent on the response of previous callback.In previous article we have learn about the callbacks and there we have seen that callback hell is one of the drawback of using callback. So here with the help of example we will understand that what exactly problem we face in callback hell.

Example of Callback Hell

Consider one use case where customer want to order food from the restaurant. Here the possible actions items are firstly user will create the order(createOrder). After creating the order restaurant receive the order (receivedOrder). Then restaurant will  prepare the order(prepareOrder). Then order gets ready(orderReady). Then order will get delivered. So this use case we  will implement in normal way first then will implement it through callback and will see how callback hell occurs here.

function createOrder() {
  console.log("order created");
}

function receivedOrder() {
  console.log("order received");
}

function prepareOrder() {
  console.log("preparing food");
}

function orderReady() {
  console.log("order ready");
}

function deliveredOrder() {
  console.log("order delivered");
}

createOrder();
receivedOrder();
prepareOrder();
orderReady();
deliveredOrder();

In the above example you can see we have created the 5 methods. And calling these methods in order. So it will execute in sequence. Let see the output below.

Now let’s make these function as asynchronous, because we know each task will take different times.

function createOrder() {
  setTimeout(function() {
    console.log("order created");
  }, 2000)
}

function receivedOrder() {
  setTimeout(function() {
    console.log("order received");
  }, 1000)
}

function prepareOrder() {
  setTimeout(function() {
    console.log("preparing food");
  }, 5000)
}

function orderReady() {
  setTimeout(function() {
    console.log("order ready");
  }, 4000)
}

function deliveredOrder() {
  setTimeout(function() {
    console.log("order delivered");
  }, 6000)
}

createOrder();
receivedOrder();
prepareOrder();
orderReady();
deliveredOrder();

Now this is asynchronous code. So let’s execute this, it will give the different result.

So this order is not correct because it it not executing in a sequential manner. Now we will handle these operations through callback. Because these all operations should be executed in particular order.

function createOrder() {
  setTimeout(function() {
    console.log("order created");
      setTimeout(function() {
         console.log("order received");
            setTimeout(function() {
               console.log("preparing food");
                  setTimeout(function() {
                      console.log("order ready");
                          setTimeout(function() {
                             console.log("order delivered");
                          }, 6000)
                   }, 4000)
             }, 5000)
      }, 1000)
   }, 2000)
}

createOrder();

So in this example we have handled the same code with callbacks. Now you can see here every next operations is dependent on the previous operations. And there are lots of callbacks which is called nested callback. It is forming the structure like pyramid also called as pyramid of Doom. That why it is called as callback hell. As there are so many callback functions or nested callbacks , so its readability is not good. This is the simple use case. Consider the large operation where we need to write thousands of dependent function using callback.In that case our code will not manageable due to callback hell.

Callback is good when we have less async functions. But in case of multiple functions callback hell create the big problem.

Same code we can write in a better way as well by splitting the functions into smaller function. let’s see the below code.

function createOrder(receivedOrder) {
  setTimeout(function() {
    console.log("order created");
    receivedOrder(prepareOrder);
  }, 2000)
}

function receivedOrder(prepareOrder) {
   setTimeout(function() {
     console.log("order received");
     prepareOrder(orderReady);
   }, 1000)
}

function prepareOrder(orderReady) {
   setTimeout(function() {
     console.log("preparing food");
     orderReady(deliveredOrder);
   }, 5000)
}

function orderReady(deliveredOrder) {
   setTimeout(function() {
     console.log("order ready");
     deliveredOrder();
   }, 4000)
}

function deliveredOrder() {
   setTimeout(function() {
     console.log("order delivered");
   }, 6000)
}

createOrder(receivedOrder);

It will give the same result as previous one. This is the better way to write the nested callback functions. As it is a modularised format so its easy to understand.

Problems with Callback Hell

• Callback hell reduces the code readability.
• Debugging the code becomes very difficult due to nested callback.
• Error handling is also becomes difficult.

How to avoid the Callback Hell

• By using promises: Using promises we can easily deal with the async code. And it make callback hell much easier to manage. We have detailed article on promises here.
• By using async/await : Async/await is also one of the easiest way to handle the async operations. You can get the details here.
• Split the function into smaller functions: To make the callback hell easy understandable and readable we can break our functions into smaller part so that readability can increase. As we have seen in the last example.
• If less  callbacks are using in that case we can mention the proper comment to avoid the confusion and make callbacks readability easier. But again it will not work in case of numbers of nested callbacks.