Horje
What to understand Callback and Callback hell in JavaScript ?

JavaScript, a single-threaded language, relies on callbacks for handling asynchronous tasks. Callbacks execute code once an operation finishes. But as the code complexity increases, the risk of callback hell emerges.

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: In this example, 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.

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

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


 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
How to Link a Custom React Component to Another Page ? How to Link a Custom React Component to Another Page ?
Explain handler method in ES6 Explain handler method in ES6
How to check null and undefined in TypeScript ? How to check null and undefined in TypeScript ?
Why to avoid global variables in JavaScript ? Why to avoid global variables in JavaScript ?
D3.js Introduction D3.js Introduction

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 10



 

Horje