An in-depth analysis of Currying of functions in JavaScript_javascript skills

Introduction
Let’s look at a small question first:
Someone posted a question in the group:
var s = sum(1)(2)(3) ....... Finally alert(s) comes out as 6
var s = sum(1)(2)(3)(4) ....... Finally alert(s) comes out as 10
Ask how to implement sum?
When I first saw the title, my first reaction was that sum returned a function, but it was not finally implemented. I had seen a similar principle in my mind, but I couldn't remember it clearly.

Later, a colleague said that this is called currying,
The implementation method is more clever:

function sum(x){ 
 var y = function(x){ 
  return sum(x+y) 
 } 
 y.toString = y.valueOf = function(){ 
  return x; 
 } 
 return y; 
} 

Let’s take a closer look at currying~

What is currying?

Currying is a conversion process that transforms a function that accepts multiple parameters into a function that accepts a single parameter (note: the first parameter of the original function). If other parameters are necessary, return to accept A new function that takes the remaining parameters and returns a result.

I guess currying sounds pretty simple when we put it that way. How is it implemented in JavaScript?
Suppose we want to write a function that accepts 3 parameters.

var sendMsg = function (from, to, msg) {
 alert(["Hello " + to + ",", msg, "Sincerely,", "- " + from].join("\n"));
};

Now, suppose we have a curried function that converts traditional JavaScript functions into curried functions:

var sendMsgCurried = curry(sendMsg); 
// returns function(a,b,c)
 
var sendMsgFromJohnToBob = sendMsgCurried("John")("Bob"); 
// returns function(c)
 
sendMsgFromJohnToBob("Come join the curry party!"); 
//=> "Hello Bob, Come join the curry party! Sincerely, - John"

Manual currying

In the above example, we assume that we have the mysterious curry function. I would implement such a function, but for now, let's first see why such a function is so necessary.
For example, manually currying a function is not difficult, but it is a bit verbose:

// uncurried
var example1 = function (a, b, c) {
 
// do something with a, b, and c
};
 
// curried
var example2 = function(a) {
 return function (b) {
  return function (c) {
   
// do something with a, b, and c
  };
 };
};

In JavaScript, even if you don't specify all the parameters of a function, the function will still be called. This is a very useful JavaScript feature, but it creates trouble for currying.

The idea is that every function is a function with one and only one parameter. If you want to have multiple parameters, you must define a series of functions nested within each other. Hate! Doing this once or twice is fine, but when you need to define a function that requires many parameters in this way, it becomes quite verbose and difficult to read. (But don’t worry, I’ll tell you a way right away)

Some functional programming languages, like Haskell and OCaml, have function currying built into their syntax. In these languages, for example, every function is a function that takes one argument, and only one argument. You might think that this restriction outweighs the benefits, but the syntax of the language being what it is, this restriction is almost imperceptible.

For example, in OCaml, you can define the above example in two ways:

let example1 = fun a b c ->
 
// (* do something with a, b, c *)
 
let example2 = fun a ->
 fun b ->
  fun c ->
   
// (* do something with a, b, c *)

It’s easy to see how these two examples are similar to the two examples above.

The difference, however, is whether the same thing is done in OCaml. OCaml, there are no functions with multiple parameters. However, declaring multiple parameters in one line is a "shortcut" to nesting single-parameter functions.

Similarly, we expect that calling a curried function will be syntactically similar to calling a multi-parameter function in OCaml. We expect to call the above function like this:

example1 foo bar baz
example2 foo bar baz

In JavaScript, we take a significantly different approach:

example1(foo, bar, baz);
example2(foo)(bar)(baz);

In languages ​​like OCaml, currying is built-in. In JavaScript, although currying is possible (higher-order functions), it is syntactically inconvenient. This is why we decided to write a curried function to do these tedious things for us and make our code simpler.

Create a curry helper function

Theoretically we hope to have a convenient way to convert plain old JavaScript functions (multiple parameters) into fully curried functions.

This idea is not unique to me, others have implemented it, such as the .autoCurry() function in the wu.js library (although what you are concerned about is our own implementation).

First, let’s create a simple helper function .sub_curry:

function sub_curry(fn 
/*, variable number of args */
) {
 var args = [].slice.call(arguments, 1);
 return function () {
  return fn.apply(this, args.concat(toArray(arguments)));
 };
}

Let’s take a moment to look at what this function does. Quite simple. sub_curry accepts a function fn as its first argument, followed by any number of input arguments. What is returned is a function. This function returns the execution result of fn.apply. The parameter sequence combines the parameters initially passed in to the function, plus the parameters passed in when fn is called.

See example:

var fn = function(a, b, c) { return [a, b, c]; };
 
// these are all equivalent
fn("a", "b", "c");
sub_curry(fn, "a")("b", "c");
sub_curry(fn, "a", "b")("c");
sub_curry(fn, "a", "b", "c")();
//=> ["a", "b", "c"]

Obviously, this is not what we want, but it seems a bit currying. Now we will define the currying function curry:

function curry(fn, length) {
 
// capture fn's # of parameters
 length = length || fn.length;
 return function () {
  if (arguments.length < length) {
   
// not all arguments have been specified. Curry once more.
   var combined = [fn].concat(toArray(arguments));
   return length - arguments.length > 0 
    &#63; curry(sub_curry.apply(this, combined), length - arguments.length)
    : sub_curry.call(this, combined );
  } else {
   
// all arguments have been specified, actually call function
   return fn.apply(this, arguments);
  }
 };
}

This function accepts two parameters, a function and the number of parameters to be "curried". The second parameter is optional. If omitted, the Function.prototype.length property is used by default, just to tell you how many parameters this function defines.

Ultimately, we can demonstrate the following behavior:

var fn = curry(function(a, b, c) { return [a, b, c]; });
 
// these are all equivalent
fn("a", "b", "c");
fn("a", "b", "c");
fn("a", "b")("c");
fn("a")("b", "c");
fn("a")("b")("c");
//=> ["a", "b", "c"]

我知道你在想什么…

等等…什么？！

难道你疯了？应该是这样！我们现在能够在JavaScript中编写柯里化函数，表现就如同OCaml或者Haskell中的那些函数。甚至，如果我想要一次传递多个参数，我可以向我从前做的那样，用逗号分隔下参数就可以了。不需要参数间那些丑陋的括号，即使是它是柯里化后的。

这个相当有用，我会立即马上谈论这个，可是首先我要让这个Curry函数前进一小步。

柯里化和“洞”(“holes”)

尽管柯里化函数已经很牛了，但是它也让你必须花费点小心思在你所定义函数的参数顺序上。终究，柯里化的背后思路就是创建函数，更具体的功能，分离其他更多的通用功能，通过分步应用它们。

当然这个只能工作在当最左参数就是你想要分步应用的参数！

为了解决这个，在一些函数式编程语言中，会定义一个特殊的“占位变量”。通常会指定下划线来干这事，如过作为一个函数的参数被传入，就表明这个是可以“跳过的”。是尚待指定的。

这是非常有用的，当你想要分步应用（partially apply）一个特定函数，但是你想要分布应用（partially apply）的参数并不是最左参数。

举个例子，我们有这样的一个函数：

var sendAjax = function (url, data, options) { 
/* ... */
 }

也许我们想要定义一个新的函数，我们部分提供SendAjax函数特定的Options,但是允许url和data可以被指定。

当然了，我们能够相当简单的这样定义函数：

var sendPost = function (url, data) {
 return sendAjax(url, data, { type: "POST", contentType: "application/json" });
};

或者，使用使用约定的下划线方式，就像下面这样：

var sendPost = sendAjax( _ , _ , { type: "POST", contentType: "application/json" });

注意两个参数以下划线的方式传入。显然，JavaScript并不具备这样的原生支持，于是我们怎样才能这样做呢？

回过头让我们把curry函数变得智能一点…

首先我们把我们的“占位符”定义成一个全局变量。

var _ = {};

我们把它定义成对象字面量{},便于我们可以通过===操作符来判等。

不管你喜不喜欢，为了简单一点我们就使用_来做“占位符”。现在我们就可以定义新的curry函数，就像下面这样：

function curry (fn, length, args, holes) {
 length = length || fn.length;
 args = args || [];
 holes = holes || [];
 return function(){
  var _args = args.slice(0),
   _holes = holes.slice(0),
   argStart = _args.length,
   holeStart = _holes.length,
   arg, i;
  for(i = 0; i < arguments.length; i++) {
   arg = arguments[i];
   if(arg === _ && holeStart) {
    holeStart--;
    _holes.push(_holes.shift()); 
// move hole from beginning to end
   } else if (arg === _) {
    _holes.push(argStart + i); 
// the position of the hole.
   } else if (holeStart) {
    holeStart--;
    _args.splice(_holes.shift(), 0, arg); 
// insert arg at index of hole
   } else {
    _args.push(arg);
   }
  }
  if(_args.length < length) {
   return curry.call(this, fn, length, _args, _holes);
  } else {
   return fn.apply(this, _args);
  }
 }
}

实际代码还是有着巨大不同的。 我们这里做了一些关于这些“洞”(holes)参数是什么的记录。概括而言，运行的职责是相同的。

展示下我们的新帮手，下面的语句都是等价的：

var f = curry(function(a, b, c) { return [a, b, c]; });
var g = curry(function(a, b, c, d, e) { return [a, b, c, d, e]; });
 
// all of these are equivalent
f("a","b","c");
f("a")("b")("c");
f("a", "b", "c");
f("a", _, "c")("b");
f( _, "b")("a", "c");
//=> ["a", "b", "c"]
 
// all of these are equivalent
g(1, 2, 3, 4, 5);
g(_, 2, 3, 4, 5)(1);
g(1, _, 3)(_, 4)(2)(5);
//=> [1, 2, 3, 4, 5]

疯狂吧？！

我为什么要关心？柯里化能够怎么帮助我？

你可能会停在这儿思考…

这看起来挺酷而且…但是这真的能帮助我编写更好的代码？

这里有很多原因关于为什么函数柯里化是有用的。

函数柯里化允许和鼓励你分隔复杂功能变成更小更容易分析的部分。这些小的逻辑单元显然是更容易理解和测试的，然后你的应用就会变成干净而整洁的组合，由一些小单元组成的组合。

为了给一个简单的例子，让我们分别使用Vanilla.js, Underscore.js, and “函数化方式” (极端利用函数化特性)来编写CSV解析器。

Vanilla.js (Imperative)

//+ String -> [String]
var processLine = function (line){
 var row, columns, j;
 columns = line.split(",");
 row = [];
 for(j = 0; j < columns.length; j++) {
  row.push(columns[j].trim());
 }
};
 
//+ String -> [[String]]
var parseCSV = function (csv){
 var table, lines, i; 
 lines = csv.split("\n");
 table = [];
 for(i = 0; i < lines.length; i++) {
  table.push(processLine(lines[i]));
 }
 return table;
};
Underscore.js

//+ String -> [String]
var processLine = function (row) {
 return _.map(row.split(","), function (c) {
  return c.trim();
 });
};
 
//+ String -> [[String]]
var parseCSV = function (csv){
 return _.map(csv.split("\n"), processLine);
};

函数化方式

//+ String -> [String]
var processLine = compose( map(trim) , split(",") );
 
//+ String -> [[String]]
var parseCSV = compose( map(processLine) , split("\n") );

所有这些例子功能上是等价的。我有意的尽可能的简单的编写这些。

想要达到某种效果是很难的，但是主观上这些例子，我真的认为最后一个例子，函数式方式的，体现了函数式编程背后的威力。

关于curry性能的备注

一些极度关注性能的人可以看看这里，我的意思是，关注下所有这些额外的事情？

通常，是这样，使用柯里化会有一些开销。取决于你正在做的是什么，可能会或不会，以明显的方式影响你。也就是说，我敢说几乎大多数情况，你的代码的拥有性能瓶颈首先来自其他原因，而不是这个。

有关性能，这里有一些事情必须牢记于心：

• 存取arguments对象通常要比存取命名参数要慢一点
• 一些老版本的浏览器在arguments.length的实现上是相当慢的
• 使用fn.apply( … ) 和 fn.call( … )通常比直接调用fn( … ) 稍微慢点
• 创建大量嵌套作用域和闭包函数会带来花销，无论是在内存还是速度上
• 在大多是web应用中，“瓶颈”会发生在操控DOM上。这是非常不可能的，你在所有方面关注性能。显然，用不用上面的代码自行考虑。