Lately I’ve been writing a lot of Javascript, definitely a trend that I expect to continue for the foreseeable future. While working on a recent project I came across the following problem:

var condition = another_condition = true; // For this example to work!

function animate (callback)
{
    c = (typeof(callback) == 'function') ? callback : function () {};

    if (condition) {
        c = function () {
            c();
            console.log('bar');
        };
    }

    if (another_condition) {
        c = function () {
            // More functionality.
            console.log('baz');
            c();
        };
    }

    c();
}

animate(function () { console.log('foo'); });

My intent was to allow a function reference to be passed into animate(), and modify the reference so that additional functionality would be added depending on the evaluation of several conditions.

Assuming that both condition and another_condition evaluated true I had expected the output of the above to be:

baz foo bar

Of course this isn’t what happened. The output was something like:

baz baz baz baz baz baz baz …

…before my browser crashed.

What happened?

What happened was simple, yet it’s cause was an obscurity of Javascript closures; the variable c changed to reference 3 different functions during the course of this code execution. Initially it pointed to the function reference passed into animate, however when condition, and later another_condition evaluated true, c was reassigned once, then again to now be a reference to the later newly created anonymous function.

I was aware than due to the phenomenon that is closures that each newly created function would have full access to c and be able to call the function directly. What I didn’t expect was that this function reference would not be dynamic and not necessarily reference the function that c referenced at the time the function was created.

So when c was called, all it ended up doing was calling itself recursively, repeatedly logging ‘baz’, and eventually overflowing and crashing Firefox.

The Solution

Obviously references to c would need to be stored somewhere for later retrieval. The solution was to store a reference to the current value of c in a local anonymous namespace.

var condition = another_condition = true; // For this example to work!

function animate (callback)
{
    c = (typeof(callback) == 'function') ? callback : function () {};

    if (condition) {
        (function () {
            var oldC = c;
            c = function () {
                oldC();
                console.log('bar');
            };
        })();
    }

    if (another_condition) {
        (function () {
            var oldC = c;
            c = function () {
                console.log('baz');
                oldC();
            };
        })();
    }

    c();
}

animate(function () { console.log('foo'); });

Not the neatest Javascript example I’ve ever written, but nevertheless this is an very powerful javascript pattern.

My particular use case was a fairly complex animation routine in which sections of the routine could be turned on or off. The callback passed in would be augmented in this fashion in order to ensure it would execute when the animation was complete.

However the solution above isn’t very scaleable; the code repetition seems to suggest that a useful abstraction could be added.

Function.prototype.extendFn = function (fn) {
    var c = this;
    return function () { fn(c); };
};

// Alternative, for those who don't like modifying Function.prototype:
var extendFn = function (callback, fn) {
    var c = callback;
    return function () { fn(c); };
};

The original code can now be rewritten:

var condition = another_condition = true; // For this example to work!

function animate (callback)
{
    c = (typeof(callback) == 'function') ? callback : function () {};

    if (condition) {
        c = c.extendFn(function (c) {
            c();
            console.log('bar');
        });
    }

    if (another_condition) {
        c = c.extendFn(function (c) {
            console.log('baz');
            c();
        });
    }

    c();
}

animate(function () { console.log('foo'); });

And will work as expected, printing:

baz foo bar

Much better! This solution was perfect for my particular use case, and I can see it being a useful functional programming pattern.

Update: Apologies for not mentioning this earlier, but thanks to the folks on Freenode's #javascript IRC channel, in particular joekarma for his original solution and suggestions. This post came out of a conversation yesterday in which we discussed possible solutions similar to those given above.