JavaScript (both the language itself and libraries such as Underscore) provides many functions that use closures. A closure is a block of code that is passed as an argument to a function or returned from a function. In JavaScript you pass in that code in the form of a function.

Consider the following example for calculating the 20% tip of an array of checks.

[120, 90, 180].map(function tip(check) {
  return check * 0.2
})
> [24,18,36]

The map function accepts a closure that in the example returns a 20% tip.

Rather than using an inline tip function it makes sense to pass a reference to a defined function, so we can reuse the tip function.

function tip(check) { return check * 0.2 }
tip(100)
> 20
[120, 90, 180].map(tip)
> [24,18,36]

Probably you don’t always want to tip 20%. Sometimes you want to tip a little more, other times you may want to tip a little less. Therefore you want to pass in the percentage to tip as an argument rather than tipping 20% all the time.

function tip(percentage, check) {
  return check * percentage
}

Adding the percentage as argument is of course simple. But now we can no longer pass the tip function into map since it needs an extra argument that map ain’t going to provide. Rather than using an inline function that calls tip with 20%, let’s explore another possibility.

Partial Functions

Partial functions is a functional programming concept. A partial function takes a function and fewer arguments than normal. It returns a function that takes the remaining arguments. When called the returned function call the original function with both sets of arguments.

As JavaScript is a dynamic language that can create functions on the fly, it should be possible to implement this feature.

We need a function partial that takes a function and a variable number of arguments for its input. That’s pretty easy considering that any function in JavaScript takes a variable number of arguments. These arguments can be accessed from the arguments array.

[arguments is not an actual array but an object that supports array lookups. It lacks most array functions (like map), but we can call the functions from the array prototype using arguments as their context.]

Then partial must return a function that takes the remaining arguments and, as invoked, calls the original function with the combined argument arrays. Since partial can only access arguments in form of an array we cannot call the original function (i.e. using parentheses or call) but must apply it instead. This way the array of arguments we pass to apply is mapped to arguments of the original function.

function partial(f) {
  var args = Array.prototype.slice.call(arguments, 1)
  return function() {
    var remainingArgs = Array.prototype.slice.call(arguments)
    return f.apply(null, args.concat(remainingArgs))
  }
}

Using partial the general tip function can be passed into map as a 20%-tip function like this.

[120, 90, 180].map(partial(tip, 0.2))
> [24,18,36]

This partial function only works for pure functions and not for a function that gets needs some state of the object it is in. This is due to the function being applied without a context.

Partial functions can offer a great deal of flexibility and can prevent a lot of adapter functions. Pay attention to the order of your arguments as JavaScript binds arguments by the order they are passed in. The example with the tip function obviously wouldn’t have worked out if the percentage argument was last.