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.



// 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;
// Calling main function



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.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Callback Hell</title>
        * {
            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);
    <div class="container">
        <h2 class="word">Geeks</h2>
        <h2 class="word">For</h2>
        <h2 class="word">Geeks</h2>
    let words = document.querySelectorAll(".word");
    const animateAll = (animate) => {
        setTimeout(() => {
            setTimeout(() => {
                setTimeout(() => {
                }, 1000)
            }, 1000)
        }, 1000)
    const animate = (word) => {

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

Geeks For Geeks animated callback output


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!