Skip to content
Related Articles

Related Articles

What to understand Callback and Callback hell in JavaScript ?

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Feb, 2022
View Discussion
Improve Article
Save Article

JavaScript is a popular lightweight, interpreted compiled client-side scripting language. Most Web Applications use JavaScript on the client side. By providing JavaScript with a runtime environment, it can also be used on the server-side(Node.js). In this article, we will cover callbacks and callback hell. 

Callback: A callback is a function that is passed as an argument to another function that executes the callback based on the result. They are basically functions that are executed only after a result is produced. Callbacks are an important part of asynchronous JavaScript.

Example: 

Javascript




// Main function
const mainFunction = (callback) => {
    setTimeout(() => {
        callback([2, 3, 4]);
    }, 2000)
}
  
// Add function
const add = (array) => {
    let sum = 0;
    for(let i of array) {
        sum += i;
    }
    console.log(sum);
}
  
// Calling main function
mainFunction(add);


Output:

9

Explanation: Here we have used setTimeout in the mainFunction to mimic some I/O Operations or a request call. The callback function passed is used to sum up the elements of the array. After 2 seconds have passed, the sum of the array is printed which is 9.

Callback Hell: Callback Hell is essentially nested callbacks stacked below one another forming a pyramid structure. Every callback depends/waits for the previous callback, thereby making a pyramid structure that affects the readability and maintainability of the code. 

Example: In the below example we have split the word GeeksForGeeks into three separate words and are trying to animate each word after one after another.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
        content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <title>Callback Hell</title>
      
    <style>
        * {
            padding: none;
            margin: none;
            box-sizing: border-box;
        }
  
        .word {
            color: #308d46;
            font-size: 4rem;
            transition: all .5s ease-in;
            margin: 0 5px;
            transform: translateY(3.8rem);
            opacity: 0;
        }
  
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 95vw;
            height: 95vh;
        }
  
        .container {
            overflow: hidden;
            display: flex;
            flex-direction: row;
        }
  
        .animate {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
  
<body>
    <div class="container">
        <h2 class="word">Geeks</h2>
        <h2 class="word">For</h2>
        <h2 class="word">Geeks</h2>
    </div>
</body>
<script>
    let words = document.querySelectorAll(".word");
  
    const animateAll = (animate) => {
        setTimeout(() => {
            animate(words[0]);
            setTimeout(() => {
                animate(words[1]);
                setTimeout(() => {
                    animate(words[2]);
                }, 1000)
            }, 1000)
        }, 1000)
    }
  
    const animate = (word) => {
        word.classList.add("animate");
    }
  
    animateAll(animate);
</script>
  
</html>


Output: We can notice that the animateAll function takes a pyramid structure, thereby making it difficult to read.

Geeks For Geeks animated callback output

Reference: https://developer.mozilla.org/en-US/docs/Glossary/Callback_function


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!