Callback, Need of Callback and Callback Hell in JavaScript

Photo by Blake Connally on Unsplash

In this we are going to discuss Asynchronous JavaScript, Callback, need for Callback and Callback Hell in JavaScript. I will keep this as concise as possible.

Introduction

JavaScript is a single threaded programming language used for both client-side and server-side web development. Single threaded means all the code will be executed in sequence. Suppose if a code takes long time to complete, the browser will freeze for that time to wait for its completion and thus blocking further execution.

Using asynchronous JS, we can perform tasks without blocking code execution. Hence it is called non-blocking JavaScript.

Let’s take a look at an example of Async JavaScript to understand it better:

Notice that JS does not wait for setTimeout() function , instead it continues execution while setTimeout() is waiting for 5 seconds to execute display(). This is because setTimeout is Asynchronous Web API provided by the browser and is non-blocking.

You can read more about it from the MDN Docs :

setTimeout() - Web APIs | MDN

Problem with Asynchronous JavaScript

Now we know why non-blocking JS is needed but if it is not used properly, it can lead to some problems. Let’s take a look at an example to better understand it.

In the above code we have trip() function which returns a value and then we pass that value in display() function to console it. But notice that we get undefined as output. This is because setTimeout() is asynchronous non-blocking function and hence display() function is trying to access value before 5 seconds.

So to solve this problem we need a way that display() function only gets called when asynchronous setTimeout() has been completely executed. That is exactly the concept of Callback.

Callback

A Callback is a function which will get executed automatically after some other function gets executed completely. Thus some people also refer it as “Call after”. Let’s make changes to our code to implement it and see how it solves our problem.

This time we are passing display() function as an arguement to trip() function (unlike other languages you can pass functions as arguement of other functions). I have used name of parameter as “callback” for clarity but you can use any name, there are no restrictions.

So the order of execution will be :

1. “Before” is printed from 1st console.log() statement.
2. display() function is passed as an arguement to trip() function and 5 seconds timer has started by setTimeout().
3. “After” is printed from 2nd console.log() statement.
4. 5 seconds are completed and callback() function is called with arguement which is basically display() function.
5. “Let’s go Star Gazing” is printed from console.log() in display() function.

Hence, Callback has resolved our problem of accessing value before function has executed completely. There are a lot of in-built functions that ask you to give them callback function as an arguement and they will execute it once they are finished.

Callback Hell (Pyramid of Doom)

Some Callbacks also have other Callback which in normal terms means the function that we passed as an Callback arguement is calling other functions for execution. Suppose our above Callback function example but instead of 1 Callback, we have a lot of nested Callbacks.

While doing multiple asynchronous operations, the callback can get nested which is known as Callback Hell. The problem with this is it becomes hard to work on them, follow them and test them when they become so much convoluted.

Callback Hell

These are the solutions to Callback Hell:

1. Promises
2. async/await

You can read about them in my next story.

Promises and async/await in JavaScript

Hi Folks! This is my 1st Medium story. Let me know if you found anything useful or if you have any suggestions/criticizm to improve it. :D