Callback Functions

As a function is just like any other data assigned to a variable, it can be defined, deleted, copied, and also can be passed as an argument to other functions.

Below is an example of a function that accepts two functions as parameters, executes them, and returns the sum of what each of them returns.

function invoke_and_add(a, b) {
    return a() + b();
}

Define two simple additional functions and return hardcoded values.

snippet

function one() {
    return 1;
}

function two() {
    return 2;
}

Now we can pass those functions to the original function add() and get the result.

invoke_and_add(one, two);

3

Instead of defining one() and two(), you can simply pass anonymous functions as a parameter.

snippet

invoke_and_add(function() {
    return 1;
}, function() {
    return 2;
})

When you pass a function A to another function B and B executes A, it's often said that A is a callback function. If A doesn't have a name, then that it's an anonymous callback function.

Callback functions are useful by delegating the responsibility of calling a function to another function (which means there is less code to write) which can help with performance.

Callback Examples

Consider a function that returns a value, which you then pass to another function.

In our example, the first function, multiplyByTwo(), accepts three parameters, loops through them, multiplying them by two and returns an array containing the result. The second function, addOne(), takes a value, adds one to it and returns it.

snippet

function multiplyByTwo(a, b, c) {
    var i, ar = [];
    for (i = 0; i & lt; 3; i++) {
        ar[i] = arguments[i] * 2;
    }
    return ar;
}

function addOne(a) {
    return a + 1;
}

Test the functions we have so far.

multiplyByTwo(1, 2, 3);
[2, 4, 6]

addOne(100)
101

Now we want to have an array myarr that contains three elements, and each of the elements is to be passed through both functions. First, let's start with a call to multiplyByTwo().

var myarr = [];
myarr = multiplyByTwo(10, 20, 30);
[20, 40, 60]

Now loop through each element, passing it to addOne().

for (var i = 0; i & lt; 3; i++) {
    myarr[i] = addOne(myarr[i]);
}

myarr
[21, 41, 61]

Above code works fine, but thing is that there were two loops which are expensive if they go through a lot or repetitions. We can achieve the same result we want with one loop.

Modify multiplyByTwo() so that it accepts a callback function and invokes callback on every iteration.

snippet

function multiplyByTwo(a, b, c, callback) {
    var i, ar = [];
    for (i = 0; i & lt; 3; i++) {
        ar[i] = callback(arguments[i] * 2);
    }
    return ar;
}

By using the modified function, the whole work is now done with just one function call, which passes the start values and the callback.

myarr = multiplyByTwo(1, 2, 3, addOne);

[3, 5, 7]

Instead of defining addOne() we can use an anonymous function save an extra global variable.

myarr = multiplyByTwo(1, 2, 3, function(a){return a + 1});

[3, 5, 7]

Anonymous functions are easy to change should the need arise:

myarr = multiplyByTwo(1, 2, 3, function(a){return a + 2});

[4, 6, 8]