What is callback hell in javascript?

• I think every seasoned javascript must have heard the phrase callback hell by now and most of us think that it is about having nested callback functions. NEWS FLASH it's not about the nested callback function at all.

• let's look at the example of a nested callback function and I can show how you can convert that function into the normal flow.

document.addEventListener("click", function () {
  ajax("post_url", function (data) {
    if (data === "old_data") {
      oldProcess();
    } else {
      ajax("get_from_new", function (data) {
        update_data(data);
      });
    }
  });
});

• here we are using an anonymous function but if we use the named function we can convert the nested callback function into a normal form.

function newDataHandler(data) {
  update_data(data);
}

function postCbHadnler(data) {
  if (data === "old_data") {
    oldProcess();
  } else {
    ajax("get_from_new", newDataHandler);
  }
}

function cbHandler() {
  ajax("post_url", postCbHadnler);
}


document.addEventListener("click", cbHandler);

• that looks normal so why do people say about callback hell?

• well let's analyze the code above.

• if you want to handle the error in the above code you have to implement the try...catch block in every callback function.

• readability of that code is very poor because of jumping from one function to another, because of that other developers can't edit your code confidently.

synchronous and asynchronous nature of callback function.

• you already might know that javascript Promise always runs asynchronously but that is not the case with callback functions. it can be synchronous or asynchronous.

  f1( function(){
    f2();

    f3( function(){
        f4();
    } )

    f5();
} );

f6();

• Here, let's assume that callback functions are called asynchronously. what will be the order of execution? I am leaving a few spaces so that you can guess the answer without looking at it.
  
  
  
  
  

1. f1()
2. f6()
3. f2()
4. f3()
5. f5()
6. f4()

• now for the same code what will be the output if all callback functions are called synchronously?

1. f1()
2. f2()
3. f3()
4. f4()
5. f5()
6. f6()

• So in callback pattern in order to know the execution order we need to know about every function is synchronous or asynchronous and that my friend that is a real hell.

giving up control.

• let's say we are building a website with google-oauth .the API of google-OAuth takes details about our website and the callback function takes user details as an argument. When a user clicks on login we ask for user details, google verifies our website and calls the callback function with user data. all is going well and we have the most secure authentication in the world but one-day google engineers mistakenly delete the code that calls the callback function and pushes the code to the main branch. now suddenly our website is not working because we are not getting user data and there is nothing we can do about it.

Review :-

1. callback hell is not about indentation or nested callback function but it is about following things.
2. Error handling.
3. order of execution due to both synchronous and asynchronous nature of callback function.
4. lack of control in the program.