SiteCrafting, Inc.

A nice feature of JavaScript is that functions are objects. As such, they do not need a name if they are used right away. But what if you need a short anonymous recursive function? arguments.callee becomes your new best friend.

Before I go into the details, let me start off by quickly explaining what I'm talking about. In JavaScript, you can define a function that without giving it a name or variable if it is to be used immediately, similar to numbers, strings or booleans. Because there is no name for your function it is considered anonymous. Recursion is where a function calls itself and is used a good deal in trees so this method applies well since the DOM is just a big tree.

But wait! How can you call a function if it has no name?

Simple! JavaScript 1.4 added a way to find out what function you are in (actually, 1.2, but it's done in a deprecated way). This is done with arguments.callee. This a local variable that is set once you start a function and allows you to throw arguments into it make a call to a function that has no name.

And this is useful?

Why yes, yes it is! Often when running Ajax queries, you assign an anonymous function to occur once the request is returned. Prototypes and other JavaScript frameworks also put you in a position of frequently using anonymous functions. I've found anonymous recursion handy when using timers and other events.

So, show us the example already!

The first example is a very simple recursive power function. It just takes the value of X to the power of Y. Yes, there is a function already to do this, and yes it is far more efficient, but this example does show a simple use of recursion.

The second example is a bad fade script. (A) It doesn't deal with IE opacity, and (B) it uses the $() function at each iteration. Nonetheless, I believe it shows a point when many developers wish they had direct access to the function for recursion.

UPDATE: Dec. 17th, 2010

After almost three years, it looks like we have lost the example files. So I rewrote the first example below. Since this post, arguments.callee has been declared deprecated in the newest version of JavaScript, ECMAScript 5. That doesn't mean it's going away, it just means you should think twice about using it. Since all major browsers still support it (it's the only way to dynamically access arguments after all), it is still fine to use it.

var num = (function (x, y) {
  if(y == 1) {
    return x;
  } else {
    return x * arguments.callee(x, y-1);
  }
})(3, 4);

num === 81; // true

In the example above, "num" will have the value of 3⁴ (or 81) after running. For kicks, the next example is an anonymous function that wraps an anonymous function to work as a cache. It will calculate factorials of X.

var factorial = (function () {
  var cache = {};
  return function (x) {
    if(cache[x]){
      return cache[x];
    } else if(x == 1) {
      return 1;
    } else {
      return cache[x] = x * arguments.callee(x-1);
    }
  };
})();

factorial(6) === 720; // true