Question

I’m learning lots of javascript these days, and one of the things I’m not quite understanding is passing functions as parameters to other functions. I get the concept of doing such things, but I myself can’t come up with any situations where this would be ideal.

My question is:

When do you want to have your javascript functions take another function as a parameter? Why not just assign a variable to that function’s return value and pass that variable to the function like so:

// Why not do this
var foo = doStuff(params);
callerFunction(foo);

//instead of this
callerFunction(doStuff);

I’m confused as to why I would ever choose to do things as in my second example.

Why would you do this? What are some use cases?

Thanks!!

Answer 1

There are several use cases for this:

1. “Wrapper” functions.

Lets say you have a bunch of different bits of code. Before and after every bit of code, you want to do something else (eg: log, or try/catch exceptions).

You can write a “Wrapper” function to handle this. EG:

function putYourHeadInTheSand(otherFunc) {
    try{
         otherFunc();
    } catch(e) { } // ignore the error
}

....

putYourHeadInTheSand(function(){
    // do something here
});
putYourHeadInTheSand(function(){
    // do something else
});

2. Callbacks.

Lets say you load some data somehow. Rather than locking up the system waiting for it to load, you can load it in the background, and do something with the result when it arrives.

Now how would you know when it arrives? You could use something like a signal or a mutex, which is hard to write and ugly, or you could just make a callback function. You can pass this callback to the Loader function, which can call it when it’s done.

Every time you do an XmlHttpRequest, this is pretty much what’s happening. Here’s an example.

function loadStuff(callback) {
    // Go off and make an XHR or a web worker or somehow generate some data
    var data = ...;
    callback(data);
}

loadStuff(function(data){
    alert('Now we have the data');
});

3. Generators/Iterators

This is similar to callbacks, but instead of only calling the callback once, you might call it multiple times. Imagine your load data function doesn’t just load one bit of data, maybe it loads 200.

This ends up being very similar to a for/foreach loop, except it’s asynchronous. (You don’t wait for the data, it calls you when it’s ready).

function forEachData(callback) {
    // generate some data in the background with an XHR or web worker
    callback(data1);
    // generate some more data in the background with an XHR or web worker
    callback(data2);
    //... etc
}

forEachData(function(data){
    alert('Now we have the data'); // this will happen 2 times with different data each time
});

4. Lazy loading

Lets say your function does something with some text. BUT it only needs the text maybe one time out of 5, and the text might be very expensive to load.

So the code looks like this

var text = "dsakjlfdsafds"; // imagine we had to calculate lots of expensive things to get this.
var result = processingFunction(text);

The processing function only actually needs the text 20% of the time! We wasted all that effort loading it those extra times.

Instead of passing the text, you can pass a function which generates the text, like this:

var textLoader = function(){ return "dsakjlfdsafds"; }// imagine we had to calculate lots of expensive things to get this.
var result = processingFunction(textLoader);

You’d have to change your processingFunction to expect another function rather than the text, but that’s really minor. What happens now is that the processingFunction will only call the textLoader the 20% of the time that it needs it. The other 80% of the time, it won’t call the function, and you won’t waste all that effort.

4a. Caching

If you’ve got lazy loading happening, then the textLoader function can privately store the result text in a variable once it gets it. The second time someone calls the textLoader, it can just return that variable and avoid the expensive calculation work.

The code that calls textLoader doesn’t know or care that the data is cached, it’s transparently just faster.

There are plenty more advanced things you can do by passing around functions, this is just scratching the surface, but hopefully it points you in the right direction 🙂