What is The Callback Function in JavaScript?

20 January, 2023

Contributors

ShowwcaseHQ

@showwcasehq

A callback function in JavaScript is a function that is passed as an argument to another function to be invoked at a later time. It is a way to pass a function as a parameter to another function and execute it inside the outer function. Callback functions are often used in event handling and to handle the completion of a task.

Here's an example of a JavaScript callback function:

// Define a callback function
function myCallback(data) {
    console.log("Callback function invoked with data: " + data);
}

// Define a function that takes a callback as a parameter
function doSomethingWithCallback(callback) {
    // Do some work
    var result = "Hello, Callback!";
    // Invoke the callback function and pass in the result
    callback(result);
}

// Invoke the function and pass in the callback
doSomethingWithCallback(myCallback);

In this example, the doSomethingWithCallback function takes a single parameter: the callback function. Inside the doSomethingWithCallback function, some work is done (in this case, a string is created), and then the callback function is invoked and passed the result of that work. When the doSomethingWithCallback function is invoked and passed the myCallback function, the code inside the myCallback function runs, and the string "Callback function invoked with data: Hello, Callback!" is printed to the console.

You will read the term async or asynchronous multiple times in this show. We will introduce it to you in a few chapters down but you can always read about it a bit and come back. Here is the chapter link:
https://www.showwcase.com/series/129/demystifying-javascript-asynchronous-programming-and-promises-a-new-way-to-learn?roadmapId=7

Callback Hell

Callback hell is a term used to describe a situation in JavaScript where the code becomes deeply nested and difficult to read due to multiple callback functions. This can happen when a callback function is invoked within another callback function, which is invoked within another callback function, and so on. Each callback function is typically invoked as the completion handler for an asynchronous operation, such as an HTTP request or a file read.

Here's an example of callback hell:


function doSomething(callback) {
    // Do something asynchronous
    setTimeout(function() {
        callback("First callback completed");
    }, 1000);
}

function doSomethingElse(callback) {
    // Do something else asynchronous
    setTimeout(function() {
        callback("Second callback completed");
    }, 2000);
}

function finalCallback(data) {
    console.log("Final callback completed with data: " + data);
}

doSomething(function(result1) {
    console.log(result1);
    doSomethingElse(function(result2) {
        console.log(result2);
        doSomething(function(result3) {
            console.log(result3);
            doSomethingElse(function(result4) {
                console.log(result4);
                finalCallback("All callbacks completed");
            });
        });
    });
});

In this example, the code is deeply nested, and it is hard to follow the flow of the program. To avoid callback hell, developers can use Promises, Async/Await or functional libraries such as async, lodash.flow, etc.

Callback alternatives

Several alternatives to JavaScript callbacks can help to avoid callback hell and make the code more readable and maintainable:

Promises: Promises are a built-in feature of JavaScript that allows for asynchronous programming in a more structured way. A promise represents the eventual outcome of an asynchronous operation and can be in one of three states: fulfilled, rejected, or pending. Promises can be chained together using the .then() method, which allows for cleaner, flatter code.
Async/Await: Async/await is a recent addition to JavaScript that allows developers to write asynchronous code that looks and behaves like synchronous code. The async keyword defines an asynchronous function, and the await keyword is used to wait for a promise to be fulfilled before moving on to the next line of code.
Functional libraries: There are several functional libraries, such as async, lodash.flow, rxjs etc, which provide utility functions for working with asynchronous code, such as map, filter, and reduce, can be used to avoid callback hell.
Generators: Generators are a feature of JavaScript that allows for more complex control flow, such as pausing and resuming a function, and are often used in conjunction with promises to simplify asynchronous code.

Using the above alternatives, developers can make their code more readable, maintainable, and less prone to errors.

What is The Callback Function in JavaScript?

Callback Hell

Callback alternatives

Further Reading

More Articles