Javascript Callback hell or Pyramid of doom 😨😵🥵

If you are not familiar with the concept of asynchronous programming, then here is the simple explanation — JavaScript code is executed in an event loop, on a single thread. The reality is that all JavaScript executes synchronously — it’s the event loop that allows you to queue up an action that won’t take place until the loop is available sometime after the code that queued the action has finished executing. So code is said to execute asynchronously when it is queued to run sometime after the event loop is available.

Let's take a simple example of synchronous and asynchronous code —

Pseudocode for a task

This above pseudocode resembles from many languages, the control flow of this code can be explained as follow-

1. The get method is executed and the thread of execution waits until a response is received.
2. The response is received from Google and returned to the caller where it’s stored in a variable.
3. The value of the variable (in this case, our response) is output to the console.

This is how normally code is executed in a synchronous environment like java, python until you don’t use multithreading.

Now let's take pseudocode for the same task in javascript —

This above code is in javascript and The control flow is like this —

1. The request function is executed, passing an anonymous function as a callback to execute when a response is available sometime in the future.
2. “Done!” is immediately output to the console.
3. Sometime in the future, the response comes back and our callback is executed, outputting its body to the console.

JavaScript is a single-threaded concurrent language. It has a single call stack. Whenever an event is fired it gets queued up in the Message Queue. Event Loop checks keep on checking if there is an event present in the Queue-it processes it and removes the event from the queue. So as long as there are events in the Queue, the event loop is active.

What happens when there exist a few events in Queue already? The event gets lined up waiting for its turn. But how does the piece of code knows that the event has been processed at a point of time? Now here comes the concept of Callbacks. You just don’t queue the event in Message Queue but a function which gets called when the event has been processed. This function is called a callback.

How do we create functions that accept callback —

let’s take some real example —

Now coming to the real deal of callback hell -

we don’t do a single task in our code, we tend to make multiple calls to our backend or Apis and each of them depends on the previous call.

So, the structure of code tends to look like this —

Each function gets an argument which is another function that is called with a parameter that is the response of the previous action.

Too many people will experience brain freeze just by reading the sentence above. Having an application with hundreds of similar code blocks will cause even more trouble for the person maintaining the code, even if they wrote it themselves.

In addition to having code that is difficult to maintain, the DRY principle has absolutely no value in this case. Error handling, for example, is repeated in each function and the main callback is called from each nested function.

More complex asynchronous JavaScript operations, such as looping through asynchronous calls, is an even bigger challenge. In fact, there is no trivial way of doing this with callbacks. This is why JavaScript Promise libraries like Bluebird and Q got so much traction. They provide a way to perform common operations on asynchronous requests that the language itself doesn’t already provide.

That’s where native JavaScript Promises come in.

Conclusion 😅

Javascript callback pattern is not easy to maintain pattern.

Before looking at more advanced solutions, remember that callbacks are a fundamental part of JavaScript (since they are just functions) and you should learn how to read and write them before moving on to more advanced language features since they all depend on an understanding of callbacks.

But now promises and async-await helps you from this hell.

You made it 😎

Good work! You can now (ideally) understand what a callback is and how it works. This is merely the tip of the iceberg with callbacks, there is still a lot more to learn!

I will cover promises and async-await in next articles if you wish to learn more about them.

If you like this post and find it helpful you can give me claps 😍