In this blog, we are going to learn about callback hell and we will understand the inversion of control. And these things are very important to understand promises
in our next blogs. Now before we understand callback we need to understand that in javascript functions are First class citizen means you can pass one function into another function you are returning functions from functions and if you pass one function into another function then that passed function is known as callback functions. And javascript is a synchronized single-threaded language it can do one thing at a time because it has only one call stack and javascript waits for none but still we can do the asynchronous task in javascript because of call back. Let's see the example where we wanted to run some piece of code after 5000 ms.

console.log('May be not today');

/*
 Passing callback function and it will be executed after 5000 ms
*/
setTimeout(function () {
console.log('May be not tomorrow or next month');
},5000)

console.("You will win the game");

Now we have seen how callback functions are useful for asynchronous code in javascript but now let's learn how sometimes callbacks can be a problem and we will directly understand it by example. Suppose we are building an e-commerce app where we have some items in the cart as below.

const cart = ["shoes","pants","watch"];

Now to complete this order we may need two APIs, the first one is to create an order and the next one is to complete the payment.

api.createOrder(cart,function payment(){
   api.processedToPayment()
} );

See in the above example we are going to call create order API first and then create order will call the processedToPayment and that's why we have passed function payment() as a callback function. Now, what if after payment success we wanted to show the order summary also?

api.createOrder(cart,function payment(){
    api.processedToPayment(function orderSummary(){
       api.orderSummery(); // Again one more call back
   })
} );

Now as we passed orderSummary() as a callback function we need to call after payment is done and you see how our code is growing horizontally rather than vertically. Let's add one more like after showing the order summary we may also need to update the wallet.

api.createOrder(cart,function payment(){ 
    api.processedToPayment(function orderSummary(){
        api.orderSummery(function updateWallet(){ // One more callback
             api.updateWallet(); 
        }); // Again one more call back
    })
} );

Now, this is what callback hell means when our code is growing horizontally rather than vertically and is also known as a pyramid of doom. Also in this blog, we just need to understand this problem and how to outcome which we will see in the next two blogs.

Also, you see in above code example how functions are dependent on each other like processedToPayment() is dependent on createOrder() and orderSummary() is dependent on processedToPayment() now what if the createOrder() function never calls the processedToPayment() function or what if it calls twice we don't have idea it might be possible that createOrder() written by some other developer or maybe an intern and it may have bugs but still we are calling processedToPayment() and you see here we don't have control on our code and this is known as inversion of control.
We need to understand these two problems that we learned because both of them will be very useful in our next blog where we will come up with the solution to how we can overcome this Callback Hell and Inversion of control.

That's all about Callback Hell and Inversion of control. And thanks to Akshay Saini for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.