Navigate

Home
Learn
Callback Hell - Common Problem in Javascript

Callback Hell - Common Problem in Javascript

$$/$$

Are you thinking that using a callback is the best solution? If yes, you are ready to look at a bigger example of callbacks and see how they can be bad as hell. Watch the next video where Srishti explains about the callback hell.

$$/$$

Following is the code, which you looked at in the last video:

Code Snippet *:

// CALLBACK HELL
// function to fetch details of user in Student Management System
const fetchUserDetails = (username, password, callback) => {
    database.authenticateUser(username, password, (error, userInfo) => {
        if (error) {
            callback(error);
        } else {
            database.getRoles(userInfo, (error, rolesInfo) => {
                if (error) {
                    callback(error);
                } else {
                    database.getPermissions(rolesInfo, (error, permissionsInfo) => {
                        if (error) {
                            callback(error);
                        } else {
                            callback(null, userInfo, rolesInfo, permissionsInfo);
                        }
                    });
                }
            });
        }
    });
}

const callback = (error, userInfo, rolesInfo, permissionsInfo) => {
    // some code here
}

*Note that the above code will not run as it is because there is no database object yet on which you can invoke the specified methods. It is just an overview of how a small application can be defined.

In the last video, you looked at what callback hell is, which is triangular-shaped indented code. The example that you looked at consists of just 3 levels. Imagine a scenario where there are many levels where one callback calls another callback, which calls another callback, which calls another callback and so on. It sounds so confusing, let alone its implementation. And this is why, it is called hell because when the callbacks come to multiple levels, which is pretty normal case in large applications, it becomes very difficult to read, maintain, and manage them.

In the next video, you’ll look at another example of callback hell with Sakshi.

$$/$$

In the last video, you looked at another example of callback hell. Modify the example taken in the video to add 'getContinents' too in the chain. After adding it, the chain of callbacks will look like the following code snippet:

const getAddress = () => {
 getContinents(continent => {
   getCountries(continent, country => {
     getStates(country, state => {
       getCities(state, () => {
         done();
       });
     });
   });
 });
};

const getContinents = callback => { // callback = getCountries()
 setTimeout(() => {
   // code to get all continents
   let continent = "Asia";
   console.log(continent);
   callback(continent);
 }, 1000);
};

const getCountries = (continent, callback) => { // callback = getStates()
 setTimeout(() => {
   // code to get all countries
   let country = "India";
   console.log(country);
   callback(country);
 }, 1000);
};

const getStates = (country, callback) => { // callback = getCities()
 setTimeout(() => {
   // code to get all states
   let state = "Rajasthan";
   console.log(state);
   callback(state);
 }, 1000);
};

const getCities = (state, callback) => { // callback = done()
 setTimeout(() => {
   // code to get all cities
   let city = "Jaipur";
   console.log(city);
   callback();
 }, 1000);
};

const done = () => {
 console.log("DONE!");
};

getAddress();

Output:

Asia
India
Rajasthan
Jaipur
DONE!

You also heard Sakshi say at the end that the solution to callback hell is using promises. Well, you’ll look at that in the next segment.