Javascript callback programming?

Question

In javascript it's very popular for libraries/frameworks to let us define a callback function for post-processing of data.

eg.

load("5", function(element) {
    alert(element.name);
});

I wonder how the load() function looks like to be able to let the user provide a callback?

Are there good tutorials for this?

Answer 1

Functions are just like normal types and can be passed as arguments:

function load(param1, callback) {
    // call the callback parameter one second later
    setTimeout(function() {
        callback(param1);
    }, 1000);
}

Answer 2

function load(foo, callback) {
    blah(foo);
    callback();
}

Answer 3

function load( number, callback){

    // do something

    if (callback) {
        callback();
    }

}

Answer 4

Well, the load function could look like this:

function load(arg, callback) {

  var element = { name: "foo " + arg }; // something to pass

  if (typeof callback == 'function') {
    callback(element);
  }
}

With the typeof check we make sure that the callback argument is an object that we can invoke, a function.

Then your example:

load("5", function(element) {
    alert(element.name); // Will show `"foo 5"`.
});

Answer 5

In JavasScript functions are first-class objects. That pretty much means they act like other built in types. You can assign them to variables, pass them into functions, etc.

This article is a helpful link explaining how functions as first-class objects work in JavaScript: http://helephant.com/2008/08/functions-are-first-class-objects-in-javascript/

Joel Spolsky has a detailed and interesting explanation on some of the interesting things/ways you can use functions as first class objects in JavaScript: http://www.joelonsoftware.com/items/2006/08/01.html

Finally, since they're first class objects, functions can very easily accept other functions as parameters:

var load = function(callback) {
  // load something here
  callback();
}

Answer 6

function(callback,argumentArray) {
    var result = callback.apply(this,argumentArray);
}

Points to be noted:

• this can be null. In that case if this is used in the callback implementation then it would point to the Global object.
• argumentArray is actually a JavaScript Array of arguments required by the callback method.