Currying Functions in JavaScript, Recursively

The goal of this post is to be able to modify any JavaScript function so that it can be partially applied. This process is also known as currying. An example of currying could be a simple add:

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

We would like to be able to do the following:

// yields a function that needs 2 more arguments
let partialAdd = add(1)// yields 6
let result = partialAdd(2, 3)

It means that we can call the function however we want (fully or partially). If the function is partially called, it returns a function that expects the remaining arguments:

add(1, 2, 3) // yields 6
add(1)(2)(3) // yields 6

Starting point

We will start by looking at a function found online here.

function schonfinkelize(fn) {
     var slice = Array.prototype.slice,
        stored_args = slice.call(arguments, 1);
     return function () {
        var new_args = slice.call(arguments),
              args = stored_args.concat(new_args);
        return fn.apply(null, args);
     };
}

This is an interesting function and a good attempt at making functions partially in JavaScript. The basic idea of this function is that it takes the original arguments and returns a function that waits for the remaining arguments.

You can use it this way:

// yields a function
let addSecondHalf = schonfinkelize(add, 1)// yields 6
addSecondHalf(2, 3)

The issue with this function is that we can’t do something like:

// Doesn't work
schonfinkelize(add, 1)(2)(3)

The reason it doesn’t work is because schonfinkelize is not called recursively by looking if we have enough arguments to call the function. In order to make the function work, we would have to do something like the following:

// yields 6
schonfinkelize(schonfinkelize(add, 1)(2))(3)

Solving it recursively

The first thing we need to ask ourselves is how we know if we have enough arguments to call the function. It turns out JavaScript has this built-in. Every function in JavaScript has the attribute length, which returns the number of arguments a function is expecting. So in our case:

// yields 3
add.length

With this information, we know that the base case of our recursive call will be called if we have enough arguments to call the function. With this in mind, let’s look at the first solution:

function partialApply(fn) {
    let slice = Array.prototype.slice
    let curr_args = slice.call(arguments, 1)    if (fn.length > curr_args.length) {
        return function() {
            let new_args = slice.call(arguments)
            let args = curr_args.concat(new_args)
            return partialApply.apply(null, [fn].concat(args))
        }
    }
        
    return fn.apply(null, curr_args)
}

So what does this function do exactly? We recursively call partialApply as long as we don’t have enough arguments. This ensures that we will wait until enough arguments are passed before computing any result. The base case is reached when enough arguments have been passed through one or many calls. Since we return in the recursive if statement, we can simply return the result at the end (that satisfies the base case).

This function allows us to do something like:

partialApply(add, 1)(1)(2) // yields 4
partialApply(add)(1)(1)(2) // yields 4
partialApply(add)(1, 1)(2) // yields 4
partialApply(add, 1, 1, 2) // yields 4

Using the function prototype

This is great, but it feels awkward to have to pass the function as a parameter. It would be great if we could curry directly on the function:

add.partialApply(1)(1)(2) // yields 4
add.partialApply(1, 1)(2) // yields 4
add.partialApply(1, 1, 2) // yields 4

This solution is very similar to the one above but it will be bound to the function prototype. Here is the final implementation of currying properly in JavaScript:

Function.prototype.partialApply = function() {
    let fn = this
    let slice = Array.prototype.slice
    let curr_args = slice.call(arguments)    if (fn.length > curr_args.length) {
        return function () {
            let new_args = slice.call(arguments)
            let args = curr_args.concat(new_args)
            return fn.partialApply.apply(fn, args)
        }
    }
        
    return fn.apply(null, curr_args)
}

In this function, we utilize the fact the JavaScript functions are first-class objects. This means that any function is an instance of the Function prototype and therefore will have access to our function partialApply. The this keyword in JavaScript refers to the instance calling that function.

The base case remains unchanged (it simply computes according to the original function definition). It gets interesting when we look at the recursive call because we need to ensure that context is properly passed.

return fn.partialApply.apply(fn, args)

We can’t simply call partialApply. We need to apply it because we only have access to the arguments in the form of an array. The other interesting part of this line is that we have to pass in fn as the first argument, since it defines what this (the context) will be in the function call. If we simply did:

return fn.partialApply.apply(null, args)

It would yield the error (“Cannot read property ‘apply’ of undefined”), since we would not bind this to the right function in the recursive call.

Usage

So now, how can I make it so all my functions can be partially applied? You can simply call .partialApply() on any function declaration you make. It looks like this.

let add = function(x, y, z) {
    return x + y + z
}.partialApply()let a = add(1, 2, 3) // yields 6
let b = add(1)(2)(3) // yields 6
let c = add(1)(2, 3) // yields 6

So this is how you curry your functions in JavaScript!

This article was originally published on Medium.