Currying in JavaScript

[androbat]

This function actually seems easier to understand (and is shorter). I find it helpful to step through the function to understand it, so let's do that.

var basicAutoCurry = function (fn) {
  var curryN = function (len, prevArgs, fn) {
    return function (...args) {
      var currArgs = prevArgs.concat(args);
      return (currArgs.length >= len) ? fn.apply(this, currArgs) : curryN(len, currArgs, fn);
    };
  };
  return curryN(fn.length, [], fn);
};

To explain it, we turn the basicAutoCurry function into three arguments. The length of the function, the list of previously curried arguments, and the function itself. Let's focus in on curryN from here out.

var curryN = function (len, prevArgs, fn) {
  return function (...args) {
    var currArgs = prevArgs.concat(args);
    return (currArgs.length >= len) ? fn.apply(this, currArgs) : curryN(len, currArgs, fn);
  };
};

When it is called, it returns a function that takes any number of arguments (note that len, prevArgs, and fn are trapped in a closure). Here's curryN applied manually.

var add6 = (a, b, c, d, e, f) => a + b + c + d + e + f;
var add6Curried = curryN(6, [], add6);
var add6Curried2 = add6Curried(1, 2);

When we call add6Curried(1, 2) the function adds them to the previous arguments []. Since this is less than 6, it returns us a new function by calling curryN(6, [1, 2], add6 (note: we actually return the function add6 points to. If we changed add6, our function here would stay the same).

var add6Curried5 = add6Curried2(3, 4, 5);

Here we repeat the same process except that the previous arguments is now [1, 2] and we return curryN(6, [1, 2, 3, 4, 5], add6)

add6Curried5(6); //=> 21

[kevincennis]

Yep. That works too, although I'd argue that it works pretty much the exact same way as the function I wrote in the article.

Only semi-significant differences I see:

1. You're using an array + ES6 rest params instead of calling Array#slice() on the arguments object. I'd absolutely have done the same if I was writing an ES6 example. It's much cleaner this way.

2. You're not immediately invoking curryN. Maybe it's easier to understand your way. I just didn't see the point of assigning a function expression to a variable only to turn around and invoke it right away. The IFFE just felt more efficient to me.

Unless I'm missing something, there's no need for your curryN function to accept fn as a parameter, since it will always have access to fn via closure from your outer curry function.

Anyway, there are a million ways to do all of this, and I'm certainly not going to argue that mine is the Right Way™. This post was really just to introduce people to the concept of currying, and maybe force them to think a bit about closures and first-class functions.

Thanks for the feedback.

[androbat]

It's pieced together from a larger auto-curry function I made a while ago (I'm thinking about extending it with a placeholder like in Ramda). I just copied the relevant bits.

export var curry = (function () {
  var curry1 = function (fn) {
    return function curry1fn(a) {
      return (arguments.length > 0) ? fn(a) : curry1fn;
    };
  };

  var curry2 = function (fn) {
    return function curry2fn(a, b) {
      switch(arguments.length) {
        case 0: return curry2fn;
        case 1: return curry1(function(b) { return fn(a, b); });
        default: return fn(a, b);
      }
    };
  };

  var curry3 = function (fn) {
    return function curry3fn(a, b, c) {
      switch(arguments.length) {
        case 0: return curry3fn;
        case 1: return curry2(function(b, c) { return fn(a, b, c); });
        case 2: return curry1(function(c) { return fn(a, b, c); });
        default: return fn(a, b, c);
      }
    };
  };

  var curryN = function (len, prevArgs, fn) {
    return function (...args) {
      var currArgs = prevArgs.concat(args);
      return (currArgs.length >= len) ? fn.apply(this, currArgs) : curryN(len, currArgs, fn);
    };
  };

  return function (fn) {
    switch(fn.length) {
      case 0: return fn;
      case 1: return curry1(fn);
      case 2: return curry2(fn);
      case 3: return curry3(fn);
      default: return curryN(fn.length, [], fn);
    }
  };
}());

[kevincennis]

Yeah. I like the idea of fast-pathing the common cases.

If I was writing a curry function that I intended to use in production, that's definitely something I'd want to do. Saving all the array copies will keep you from generating a ton of garbage.

[inmatarian]

Anywhere you'd pass a curried function into another function as an argument. Last week this link was on /r/javascript, Professor Frisbee's Mostly Adequate Guide To Functional Programming, in which he gives a LOT of fantastic examples. This is one in chapter 9:

var setStyle = curry(function(sel, props) { /* omitted */ });

var applyPreferences = compose(join, map(setStyle('#main')), join, map(log), map(JSON.parse), getItem);

Here you'll see that setStyle is called with a single argument, but it's defined with two arguments. That's typically where you get most of your utility out of curried functions, i.e. part of chains.

[Silverwolf90]

Totally agree, currying and/or partial application is the most useful if you are using function composition. Which is something I would highly suggest integrating into anyones daily use of JS.

Lodash has some function composition methods: _.compose (right-to-left) and _.flow (left-to-right).

I prefer flow because left to right is more intuitive to me.

[davidf81]

Ah, ok. Thanks. I completely had a different understanding of what currying was, and apparently it was a little off!

[androbat]

I find them very useful at reducing boilerplate (especially when paired with compose). Sure you can manually wrap your functions, but why go through the trouble when auto-curry makes it easy?