# Gettin’ Freaky Functional w/Curried JavaScript

####
Posted on
*
by
Erin Swenson-Healey in Development *

Partial application refers to the practice of filling in a functions parameters with arguments, deferring others to be provided at a later time. JavaScript libraries like Underscore facilitate partial function application – but the API isn’t for everyone. I, for one, feel icky sprinkling calls to `_.partial`

and `_.bind`

throughout my application.

Curried functions (found in Haskell and supported by Scala, among others) can be partially-applied with little ceremony; no special call format is required. In this blog post, I’ll demonstrate an approach to currying JavaScript functions at the time of their definition in a way that enables partial function application without introducing lots of annoying parens and nested function expressions.

### Currying in JavaScript: Usually a Huge Pain

A function can be said to have been “curried” if implemented as a series of evaluations of nested unary functions (representing each “parameter”) instead of as a single, multiple-arity function (currying a unary function isn’t all that interesting).

This binary function:

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

…could be rewritten as a curried function like this:

// // Number → Number → Number // function sum(x) { return function(y) { return x + y; }; } var addTen = sum(10); // type: Number → Number addTen(20); // 30 addTen(55); // 65

This approach starts to become unwieldy as the number of values to be provided by the caller grows:

// // type: Number → Number → Number → Number → Number // function sumFour(w) { return function (x) { return function (y) { return function (z) { return w + x + y + z; } } } } sumFour(1)(2)(10)(20); // 33 var addTen = sumFour(3)(3)(4); addTen(20); // 30

Yuck. We get partial application – but with a very low signal-to-noise ratio. Four sets of parens are required to call `sumFour`

– and its implementation requires three nested function expressions.

### Higher-Order Currying for the Lazy

As luck may have it (thanks, Brendan Eich), we can write a higher-order currying function that can be applied to a fixed-arity function, returning a curried version of the original. Making things even sweeter, our curried function can be called like an idiomatic JavaScript function (one set of parens and comma-separated arguments) instead of like the `sumFour`

mess above – all without losing the ability to perform low-ceremony partial application.

We’ll jump straight into the implementation:

function curry(fx) { var arity = fx.length; return function f1() { var args = Array.prototype.slice.call(arguments, 0); if (args.length >= arity) { return fx.apply(null, args); } else { return function f2() { var args2 = Array.prototype.slice.call(arguments, 0); return f1.apply(null, args.concat(args2)); } } }; }

Calling `curry`

with a multiple arity function produces a new function which, when called, either returns a partially applied version of the original or the result of full application. Leveraging `Function.prototype.length`

, we can compare the number of provided arguments (which we cache in `args`

after each function call) with the arity of the original. If we’ve received enough arguments to fully apply, the original function is called. If not, we recurse into our helper (`f1`

)… returning a new, partially applied function.

Let’s see what it looks like to call this function – and how to interact with the resulting function.

var sumFour = curry(function(w, x, y, z) { return w + x + y + z; });

The name `sumFour`

is now bound to a curried function returned from our call to `curry`

in which we passed an anonymous, four-parameter function expression. Calling the resulting function will either result in a value (the sum of all four numbers) or a new function with some of its parameters filled in with values provided by the caller.

var f1 = sumFour(10), // returns a function awaiting three arguments f2 = sumFour(1)(2, 3), // returns a function awaiting one argument f3 = sumFour(1, 2, 7), // returns a function awaiting one argument x = sumFour(1, 2, 3, 4); // sumFour has been fully applied; x is equal to 1+2+3+4=10 x2 = sumFour(1)(2)(3)(4); // fully applied; x2 equals 10

There are a few things of importance in this last example:

- Our curried function can be applied to multiple arguments without the need for multiple sets of parameters
- Our curried function can be partially applied with library support (beyond what was required to create the function bound to
`sumFour`

- The result of partially applying our curried function to arguments results in a function that is also curried

Cool, right?

In hopes of illustrating how this crazy function works, let’s walk through the evaluation of the expression `(sumFour(1)(2, 3, 4))`

:

- Evaluate the subexpression
`sumFour(1)`

, which (you guessed it) applies`sumFour`

to`1`

- Call
`f1`

with a single argument`1`

- Check to see if
`f1`

has been called with a number of arguments greater or equal to the number of parameters expressed in the anonymous function passed to`curry`

(four: w, x, y, and z). The predicate returns false and`f2`

is returned. `f2`

is called with three arguments`2`

and`3`

and`4`

- Concatenate the first argument
`1`

with new arguments and apply`f1`

to all four - Check number of arguments (now 4) against arity of original function (4) which satisfies predicate. The original function is then (fully) applied to all four arguments.

### In Summary

JavaScript implementations don’t make things easy for programmers that want to work with partially-applied and curried functions (lots of parens, nested function expressions). In this blog post, you’ve seen a demonstration of how one might roll a higher-order currying function that allows for partial function application without a ton of hassle.

### Related Reads

- Composing Asynchronous with Synchronous Functions in JavaScript
- Tidying Up a JavaScript Application with Higher-Order Functions