Partially Applied Functions in JavaScript

First of all, what are partially applied functions? There’s a little bit of theory here. The concept of partially applying functions stems from the functional way of programming. There it’s tightly linked with a concept called currying. Currying says that every function can be written as a function with only one parameter. By currying and un-currying you can achieve this goal. If this sounds very hard and complex, do not fear, in essence it’s quite simple.

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

We can then curry the add function to the following function

     
var add = function (x) { 
    return function (y) { 
        return x + y; 
    } 
}

Now the add function only takes one parameter. But what is happening here? The add function is actually only creating a new function that takes another parameter. We could say that the add-function is a sort of factory for the add-functionality.

How would we use this function?

console.log(add(1)(2));

This might look strange to you… and you are right, because this is not the way we are going to use these functions. If you’re having trouble finding a real life example, that’s okay, I’ll give you one right now.

Imagine that you fetch a list of customers (with a property “name”) from a backend service. We show that list and allow the user of the application to filter that list by name (starts with) with a partial name.

function filterByPartialName (partialName) {
    return customers.filter(function (customer) {
        return customer.name.startsWith(partialName);
    });
}

What if we wanted to centralise the filter method so we can use it again?

function partialNameFilter(customer) {
    return customer.name.startsWith(partialName);
}

function filterByPartialName (partialName) {
    return customers.filter(partialNameFilter);
}

This code won’t work because in the external function, the partialName parameter is not available. But if we add the partialName as a parameter in the partialNameFilter function, the [].filter() function is unable to pass along the partialName variable. This is because the filter function feeds you the element as first parameter.

So does that mean we can’t do this? No. We partially apply the partialName and return the function that is needed for the filter like this:

function partialNameFilter(partialName) {
    return function (customer) {
        return customer.name.startsWith(partialName);
    };
}

function filterByPartialName (partialName) {
    return customers.filter(partialNameFilter(partialName));
}

Now we can feed the partialName to the partialNameFilter which returns the function that will be used in the filter. We have partially applied the partialName parameter. We can also reuse the filter in any other functions we see fit.

You can also use the Function.prototype.bind functionality for this problem. But it is nice to see how we can overcome this problem just with some functional programming knowledge.