Let’s talk about the Callback hell Javascript

Hi, the Callback hell is an anti-pattern of Javascript that we need to avoid when we are programming with callbacks. 

Why is called “Callback hell”? Because inside a callback function we can call another callback function and inside that callback function we call another callback function and so on.

So this next example have is executing just 1 callback, let see the code:

// The function division
function division (numberA, numberB, callback) {

  // If numberB is = 0
  if (numberB === 0) {
    // Execute the callback function & passing parameter error, result parameter is not necessary
    return callback(new Error('Cannot divide by zero!'));
  }

  // Execute the callback & passing null as error parameter, and the division as result parameter
  // null in that way could be omitted error parameter
  callback(null, numberA / numberB) // Executing the callback function
}

// Calling the function division
division(20, 2, function(error, result) { // Passing the parameters for the division & a function as callback function
  if (error) throw error // show the error

  console.log('result ->', result) // show the result
});

Result:

But if we going to use the result of the first iteration we need to call again division and pass that result as a parameter, like this:

function division (numberA, numberB, callback) {

  // If numberB is = 0
  if (numberB === 0) {
    // Execute the callback function & passing parameter error, result parameter is not necessary
    return callback(new Error('Cannot divide by zero!'));
  }

  // Execute the callback & passing null as error parameter, and the division as result parameter
  // null in that way could be omitted error parameter
  callback(null, numberA / numberB) // Executing the callback function
}

// 1 Calling the function division
division(20, 2, function(error, result) { // Passing the parameters for the division & a function as callback function
  if (error) throw error // if error show the error

  // 2 Again Calling the function division & using the last result as a parameter
  division(result, 2, function (err, res) {
    if (err) throw err

    // 3 Again calling the function division  & using the last res as a parameter
    division(res, 2, function(e, r) {
      if (e) throw e

      console.log('r ->', r); // Show the r in console
    })
  })
});

Result:

If you see this code is really complicated to understand, it’s not very understandable. A Callback hell sometimes also referred to as a “Pyramid of doom” (for its sideways-facing triangular shape due to the nested indentation) 

The code works and we can go adding and adding more code inside our callback functions but at the end it will be a difficult code to maintain and this is an anti-pattern in Javascript that we need to avoid when we are programming. 

We have a very good solution to avoid callbacks and that’s the “Promises in Javascript” so in my next post I will write about promises. 

By Cristina Rojas.