Understanding and using callback functions in JavaScript

Overview

In JavaScript, functions are first-class objects, which means that functions can be managed and used like first-class objects. Since functions are actually objects: they can be "stored" in variables, can be passed as function parameters, can be created within functions, and can be returned from functions.

Since functions are first class objects, we can use callback functions in JavaScript. In the following article, we will learn all about callback functions. Callback functions are probably the most used functional programming technique in JavaScript, and although they appear to be just a small piece of JavaScript or jQuery code, they remain a mystery to many developers. After reading this article you will understand how to use callback functions.

Callback functions are a concept derived from a programming paradigm called functional programming. Simply put, functional programming is using functions as variables. Functional programming was - and even now is not widely used - it was often seen as a secret skill of specially trained, master programmers.

Fortunately, functions are a programming skill that has now been explained enough that regular people like you and I can use it easily. One of the main techniques in functional programming is callback functions. In the following content, you will find that implementing a callback function is as simple as passing parameters to a normal function. This technique is so simple that I often wonder why it is often included in chapters on advanced JavaScript techniques.

What are callbacks or higher-order functions?

A callback function, also called a higher-order function, is a function that is passed as an argument to another function (here we call the other function otherFunction), where the callback function is called. A callback function is essentially a programming pattern (a solution created for a common problem), so using callback functions is also called the callback pattern.

Here is a simple and common example of using callback functions in jQuery:

//Note that the click method is a function rather than a variable. //It is the callback function $("#btn_1").click(function() {
    alert("Btn 1 Clicked");
});

As you can see in the previous example, we passed a function as a parameter to the click method. The click method calls (or executes) the function we pass to it. This is a typical use of callback functions in JavaScript, and it is used extensively in jQuery.

Here is another example of a typical callback function in JavaScript:

var friends = ["Mike", "Stacy", "Andy", "Rick"];

friends.forEach(function (eachName, index){
    console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

Again, notice that we passed an anonymous function (a function without a name) as a parameter to the forEach method.

So far, we have passed anonymous functions as arguments to another function or method. Before we look at more practical examples and write our own callback functions, let's first understand how callback functions work.

How do callback functions work?

Because functions are first-class objects in JavaScript, we treat functions like objects, so we can pass functions around like variables, return functions from functions, and use functions from other functions. When we pass a callback function as an argument to another function, we are only passing the function definition. We are not executing the function on the arguments. We don't pass the function with a pair of parentheses () like we normally do when executing a function.

It is important to note that the callback function is not executed immediately. It is called back (as its name suggests) at a specific point in time within the function that contains it. So even if the first jQuery example looks like this:

//Anonymous functions will not be executed in parameters //This is a callback function $("#btn_1").click(function(){
    alert("Btn 1 Clicked");
});

This anonymous function will be called later inside the function body. Even with a name, it is still accessible through the arguments object within the containing function.

Callback functions are closures

When you pass a callback function as a variable to another function, the callback function is executed at a certain point in the containing function, just as if the callback function was defined in the containing function. This means that a callback function is essentially a closure.

As we know, closures can enter the scope of the function that contains them, so the callback function can access the variables in the containing function, as well as the variables in the global scope.

The basic principle of implementing callback function

Callback functions are not complicated, but before we start creating and using callback functions, we should be familiar with several basic principles of implementing callback functions.

Using named or anonymous functions as callbacks

In the previous jQuery example and the forEach example, we used an anonymous function defined in the parameter position as the callback function. This is a common magic trick used in callback functions. Another common pattern is to define a named function and pass the function name as a variable to the function. For example, the following example:

//Global variables var allUserData = [];

//Ordinary logStuff function, prints the content to the console function logStuff (userData) {
    if ( typeof userData === "string"){
        console.log(userData);
    } else if ( typeof userData === "object"){
        for(var item in userData){
            console.log(item + ": " + userData[item]);
        }
    }
}

//A function that receives two parameters, the latter of which is a callback function function getInput (options, callback) {
    allUserData.push(options);
    callback(options);
}

//When we call the getInput function, we pass logStuff as a parameter to it //so logStuff will be called back (or executed) inside the getInput function
getInput({name:"Rich",speciality:"Javascript"}, logStuff);
//name:Rich
//speciality:Javascript

Passing parameters to callback function

Since the callback function is just a normal function when it is executed, we can pass it parameters. We can pass any property of the containing function (or global property) as an argument to the callback function. In the previous example, we passed options as a parameter to the callback function. Now we pass a global variable and a local variable:

//Global variables var generalLastName = "Cliton";

function getInput (options, callback) {
    allUserData.push (options);
    //Pass the global variable generalLastName to the callback function callback(generalLastName,options);
}

Make sure the callback is a function before executing it

It is wise to check that the callback passed as an argument is indeed a function before calling it. Also, this is a great time to implement conditional callbacks.

Let's refactor the getInput function in the example above to ensure that the check is appropriate.

function getInput(options, callback){
    allUserData.push(options);
    
    // Make sure callback is a function if (typeof callback === "function") {
        //Call it, now that we've established it's callable callback(options);
    }
}

Without proper checking, our code will result in a runtime error if getInput does not have a callback function as an argument or if the callback function passed is not actually a function.

Problems when using methods of this object as callback functions

When the callback function is a method of the this object, we must change the method of executing the callback function to ensure the context of the this object. Otherwise if the callback is passed to a global function, the this object will either refer to the global window object (in a browser). Either points to an object containing a method.

We illustrate this in the following code:

//Define an object with some properties and a method //We will then pass the method as a callback to another function var clientData = {
    id: 094545,
    fullName "Not Set",
    //setUsrName is a method in the clientData object setUserName: function (firstName, lastName) {
        //This refers to the fullName property in the object this.fullName = firstName + " " + lastName;
    }
} 

function getUserInput(firstName, lastName, callback){
    //Do something here to confirm firstName/lastName
    //Now store the names
    callback(firstName, lastName);
}

In your code example below, when clientData.setUsername is executed, this.fullName does not set the fullName property in the clientData object. Instead, it will set the fullName property in the window object because getUserInput is a global function. This is because the this object in the global function points to the window object.

getUserInput("Barack","Obama",clientData.setUserName);
console.log(clientData,fullName); //Not Set
//The fullName property will be initialized in the window object console.log(window.fullName); //Barack Obama

Use Call and Apply functions to save this

We can use Call or Apply function to fix your problem above. So far, we know that every function in JavaScript has two methods: Call and Apply. These methods are used to set the this object inside the function and pass variables to the function.

The first argument received by call is the object used as this inside the function, and the arguments passed to the function are passed one by one (separated by commas of course). The first argument of the Apply function is also the object that is used as this inside the function, while the last argument is an array of values ​​that are passed to the function.

It sounds complicated, so let's see how simple it is using Apply and Call. To fix the problem in the previous example, I will use the Apply function in your example below:

//Notice that we added a new parameter as the callback object, called "callbackObj"
function getUserInput(firstName, lastName, callback.callbackObj){
    //Do something here to confirm the name callback.apply(callbackObj, [firstName, lastName]);
}

With the Apply function setting the this object correctly, we now correctly execute the callback and correctly set the fullName property in the clientData object:

// We use the clientData.setUserName method and the clientData object as parameters. The clientData object will be used by the Apply method to set the this object getUserName("Barack", "Obama", clientData.setUserName, clientData);

//The fullName property in clientData is set correctly console.log(clientUser.fullName); //Barack Obama

We can also use the Call function, but in this example we use the Apply function.

Allow multiple callback functions

We can pass more than one callback function as an argument to a function, just like we can pass more than one variable. Here is an example of AJAX in jQuery:

function successCallback(){
    //Do something before sending }
  
function successCallback(){
//Do something after the message is successfully received}

function completeCallback(){
//Do something after completion}

function errorCallback(){
    //Do something when an error occurs}

$.ajax({
    url:"upload/2022/web/favicon.png",
    success:successCallback,
    complete:completeCallback,
    error:errorCallback
});

The "Callback Hell" Problem and Its Solution

When executing asynchronous code, no matter what order the code is simply executed, it often becomes a situation where many levels of callback functions are piled up so that the code becomes the following situation. This mess of code is called callback hell because there are too many callbacks and it becomes very difficult to understand the code. I took an example from node-mongodb-native, a MongoDB driver for Node.js. The following code will fully illustrate callback hell:

var p_client = new Db('integration_tests_20', new Server("127.0.0.1", 27017, {}), 
                 {'pk':CustomPKFactory});
p_client.open(function(err, p_client) {
    p_client.dropDatabase(function(err, done) {
        p_client.createCollection('test_custom_key', function(err, collection) {
            collection.insert({'a':1}, function(err, docs) {
                collection.find({'_id':new ObjectID("aaaaaaaaaaaaa")}, 
                function(err, cursor) {
                    cursor.toArray(function(err, items) {
                        test.assertEquals(1, items.length);
                        // Let's close the db
                        p_client.close();
                    });
                });
            });
        });
    });
});

You don't want to run into this kind of problem in your code, but if you do run into this problem,

• You will encounter this situation from time to time
• Here are two solutions to this problem.
• Give your functions names and pass them as callbacks instead of defining anonymous functions as arguments to the main function.
• Modularity separates your code into modules so that you can single out a piece of code to do a specific job. Then you can import the module in your mega-app.

Creating your own callback functions

Now that you fully understand everything there is to know about callbacks in JavaScript (which I think you do, if you didn’t just reread it quickly), and you’ve seen how simple and powerful using callbacks is, you should look through your code to see if there are any places where you could use callbacks. The callback function will help you in the following ways:

• Avoid duplication of code (DRY - Don't Repeat Yourself)
• Better abstraction where you have more multi-purpose functions (still keeping all the functionality)
• Make the code more maintainable
• Makes code easier to read
• Writing more specialized functions

Creating your callback function is very simple. In the following example, I will create a function that reads the user's information, creates a generic poem with the data, and welcomes the user. This would have been a very complex function because it would contain many if/else statements and it would have many limitations and incompatibilities in calling the functions that the user data required.

Instead, I implemented the added functionality using callback functions so that the main function that gets the user information can do whatever it wants by simply passing the user's full name and gender as parameters to the callback function and executing it.

In short, the getUserInput function is multifunctional: it can execute a callback function with various functions.

//First, create a generic poem generator function; it will be used as the callback function of the getUserInput function below function genericPoemMaker(name, gender) {
    console.log(name + " is finer than fine wine.");
    console.log("Altruistic and noble for the modern time.");
    console.log("Always admirably adorned with the latest style.");
    console.log("A " + gender + " of unfortunate tragedies who still manages a perpetual smile");
}

//callback, the last parameter will be the genericPoemMaker function we defined above function getUserInput(firstName, lastName, gender, callback) {
    var fullName = firstName + " " + lastName;
    // Make sure the callback is a function
    if (typeof callback === "function") {
    // Execute the callback function and pass the parameters to it
    callback(fullName, gender);
    }
}

Call the getUserInput function and use the genericPoemMaker function as the callback function:

getUserInput("Michael", "Fassbender", "Man", genericPoemMaker);
// Output /* Michael Fassbender is finer than fine wine.
Altruistic and noble for the modern time.
Always admirably adorned with the latest style.
A Man of unfortunate tragedies who still manages a perpetual smile.
*/

Since the getUserInput function is only responsible for extracting data, we can pass any callback function to it. For example, we could pass a greetUser function:

unction greetUser(customerName, sex) {
    var salutation = sex && sex === "Man" ? "Mr." : "Ms.";
    console.log("Hello, " + salutation + " " + customerName);
}

// Use greetUser as a callback function getUserInput("Bill", "Gates", "Man", greetUser);

// This is the output Hello, Mr. Bill Gates

We call the exact same getUserInput function, but this time it accomplishes a completely different task.

As you can see, callback functions are magic. Even though the previous example was relatively simple, imagine how much work you could save and how much more abstract your code would become, just by starting to use destroy functions. Use it boldly.

Callbacks are often used in several ways in JavaScript programming, especially in modern web application development as well as libraries and frameworks:

• Asynchronous calls (such as reading a file, making an HTTP request, etc.)
• Event Listener/Handler
• setTimeout and setInterval Methods
• General: Streamline your code

Conclusion

JavaScript callback functions are wonderful and powerful, and they provide many benefits to your web applications and code. You should use it when necessary; or refactor your code to use callbacks for the sake of abstraction, maintainability, and readability.

The above is the details of understanding and using callback functions in JavaScript. For more information about JavaScript, please pay attention to other related articles on 123WORDPRESS.COM!