Partial Application in JavaScript using Bind

Posted by Patrick Orrell

JavaScript is a multi-paradigm language, but its functional aspect is predominant. One feature of a functional language is the concept of partial application. This refers to supplying an incomplete argument set to a function to return a function with those arguments pre-filled. In JavaScript this can be achieved several ways, but one of the most convenient is by the use of bind().

bind() was added in ES5 as a Function prototype method, meaning all functions prototypically inherit it. The form of this function is:

Function.prototype.bind(scope, args...)

The purpose of bind is to bind a scope to the this keyword, thus the function scope. This is the first argument of bind. A function created by bind() cannot be bound itself.


var objectA = {
  x: 5,
  getX: function getX() {
      return this.x;
  }
}

var objectB = {
  x: 10
}

var boundFunction = objectA.getX.bind(objectB);

> objectA.getX();
5
> boundFunction();
10

Everything after the first argument is an argument that you want to pass to the function, from left to right.

var objectA = {
    x: 5,
    getXWithLabel: function getXWithLabel(label) {
        return label + this.x;
    }
}

var objectB = {
    x: 10
}

var boundFunction = objectA.getXWithLabel.bind(objectB, 'From Object B: ');

> objectA.getXWithLabel('From Object A: ');
'From Object A: 5'
> boundFunction();
'From Object B: 10'

Here we can see boundFunction has not only had its this value bound to objectB, but also its argument bound to From Object B:. It is this feature of bind that lets you use partial application in ES5+ functions. The key aspect about these bound arguments is that you do not need to provide all the arguments: you can partially apply them, leaving the rest to be provided when the function is called.

Let us take the function of form:

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

> sum(10, 5);
15

Let us say we wish to perform a large number of sums where we simply add 10. We can use partial application to create a new function where the first argument is already filled in with 10. In this case we do not want to rebind this, so we simply pass null and it is left alone.

var sum10 = sum.bind(null, 10);

> sum10(5);
15
> sum10(10);
20

We can see here that the arguments have been partially applied, with x being ‘pre-filled’, leaving y to be provided.

Note that the arguments you pass to bind move from left to right. Here is a function with three parameters:

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

// PartialTriple now contains triple with x and y assigned to 10 and 11
var partialTriple = triple.bind(null, 10, 11);

One useful practical application of this method is in pre-created callback functions, which allow you to ‘pass a variable to a callback’.

function errorMessage(serviceName, err) {
  console.log('Error ' + err.msg + ' occured in ' + serviceName);
}

// Meanwhile in the httpService
var httpErrorHandler = errorMessage.bind(null, 'HTTPService');

httpLibrary.httpCall(httpSuccessHandler, httpErrorHandler);

//Or depending on your views on readability:

httpLibrary.httpCall(httpSuccessHandler,
                     errorMessage.bind(null, 'HTTPService'));

This shows the very useful and elegant usage of partial application. This enables you to create pure functions, which are more robust and less likely to leak memory via accidental closure.