Currying JavaScript Functions

Currying a function is the act of transforming a function that takes n arguments into a function that takes n - 1 arguments. Essentially, currying is the act of binding the first argument of a function to a specific value, creating a new function that takes the remaining arguments. Here's a simple example:

function add(x, y) {
    return x + y;
}

// produces 7
add(3, 4);

// produces a function with x bound to 3 that takes y as an argument
var add3 = curry(add, 3);

// produces 7
add3(4);

In this example, we curry the add(x, y) function to produce the add3(y) function that always adds 3 to its only argument. While this may seem useless initially, currying is very useful in the context of Ajax callbacks. For example, say you want to add a constant amount 4 to a counter every time a button is clicked? Just curry!

button.onclick = curry(callback(this, addToTotal), 4);

Thanks to the functional parts of JavaScript and the ability to access JavaScript function arguments as an array with the arguments variable, implementing the curry function is easy, as this recipe illustrates:

function curry(method) {
    var curried = [];
    for (var i = 1; i < arguments.length; i++) {
        curried.push(arguments[i]);
    }
    return function() {
        var args = [];
        for (var i = 0; i < curried.length; i++) {
            args.push(curried[i]);
        }
        for (var i = 0; i < arguments.length; i++) {
            args.push(arguments[i]);
        }
        return method.apply(null, args);
    }
}

This curry function is more flexible than the formal definition of the term: you can bind as many arguments as you want when you call curry, like this example, where we bind the first two arguments of a function to produce a function that only takes one argument:

function add(x, y, z) {
    return x + y + z;
}

var add3 = curry(add, 2, 1); // binds x to 2 and y to 1
add3(5); // produces 8

See the example