Une discussion approfondie sur les compétences en programmation fonctionnelle javascript_javascript

有时，优雅的实现是一个函数。不是方法。不是类。不是框架。只是函数。 
                      - John Carmack，游戏《毁灭战士》首席程序员

La programmation fonctionnelle consiste à décomposer un problème en une série de fonctions. En règle générale, les fonctions sont enchaînées, imbriquées les unes dans les autres, transmises et traitées comme des citoyens de première classe. Si vous avez utilisé un framework comme jQuery ou Node.js, vous avez probablement utilisé certaines de ces techniques sans vous en rendre compte.

On commence par un petit embarras de Javascript.

Supposons que nous ayons besoin d'une liste de valeurs qui seront attribuées aux objets ordinaires. Ces objets peuvent contenir n'importe quoi : des données, des objets HTML, etc.

var
  obj1 = {value: 1},
  obj2 = {value: 2},
  obj3 = {value: 3};
var values = [];
function accumulate(obj) {
 values.push(obj.value);
}
accumulate(obj1);
accumulate(obj2);
console.log(values); // Output: [obj1.value, obj2.value]

Ce code fonctionne mais est instable. N'importe quel code peut modifier l'objet de valeurs sans passer la fonction accumulate(). Et si on oublie d'attribuer un tableau vide [] aux valeurs, ce code ne fonctionnera pas du tout.

Mais si la variable est déclarée à l'intérieur de la fonction, elle ne sera modifiée par aucun code malveillant.

function accumulate2(obj) {
 var values = [];
 values.push(obj.value);
 return values;
}
console.log(accumulate2(obj1)); // Returns: [obj1.value]
console.log(accumulate2(obj2)); // Returns: [obj2.value]
console.log(accumulate2(obj3)); // Returns: [obj3.value]

Pas question ! Seule la valeur du dernier objet transmis est renvoyée.

Nous pourrons peut-être résoudre ce problème en imbriquant une fonction dans la première fonction.

var ValueAccumulator = function(obj) {
 var values = []
 var accumulate = function() {
  values.push(obj.value);
 };
 accumulate();
 return values;
};

Mais le problème existe toujours, et nous ne pouvons plus accéder à la fonction d'accumulation et à la variable de valeurs.

Ce dont nous avons besoin, c'est d'une fonction d'auto-appel

Fonctions et fermetures d'auto-appel

Et si nous pouvions renvoyer une expression de fonction qui à son tour renvoie un tableau de valeurs ? Les variables déclarées dans une fonction sont accessibles par tout le code de la fonction, y compris les fonctions auto-appelantes.

En utilisant les fonctions d'auto-appel, l'embarras précédent disparaît.

var ValueAccumulator = function() {
 var values = [];
 var accumulate = function(obj) {
  if (obj) {
   values.push(obj.value);
   return values;
  } else {
   return values;
  }
 };
 return accumulate;
};
//This allows us to do this:
var accumulator = ValueAccumulator();
accumulator(obj1);
accumulator(obj2);
console.log(accumulator());
// Output: [obj1.value, obj2.value]
ValueAccumulator = ->
 values = []
 (obj) ->
  values.push obj.value if obj
  values

Tout est une question de portée. Les valeurs des variables sont visibles dans la fonction interne accumulate(), même lorsque du code externe appelle cette fonction. C’est ce qu’on appelle la fermeture.

La fermeture en Javascript signifie que la fonction peut accéder à la portée parent, même si la fonction parent a terminé son exécution.

Les fermetures sont une caractéristique de tous les langages fonctionnels. Les langues impératives traditionnelles n'ont pas de fermetures.

Fonctions d'ordre supérieur

Les fonctions auto-appelantes sont en fait une forme de fonctions d'ordre supérieur. Les fonctions d'ordre supérieur sont des fonctions qui prennent d'autres fonctions en entrée ou renvoient une fonction en sortie.

Les fonctions d'ordre supérieur ne sont pas courantes dans la programmation traditionnelle. Alors que les programmeurs impératifs utilisent des boucles pour parcourir les tableaux, les programmeurs fonctionnels utilisent une approche complètement différente. Avec les fonctions d'ordre supérieur, chaque élément d'un tableau peut être appliqué à une fonction et renvoyer un nouveau tableau.

C'est l'idée centrale de la programmation fonctionnelle. Les fonctions d'ordre supérieur ont la capacité de transmettre de la logique à des fonctions telles que des objets.

En Javascript, les fonctions sont traitées comme des citoyens de première classe, tout comme les fonctions classiques telles que Scheme et Haskell sont des langages. Cela peut paraître un peu bizarre, mais cela signifie en réalité que les fonctions sont traitées comme des types primitifs, tout comme les nombres et les objets. Si les nombres et les objets peuvent être échangés, les fonctions le peuvent également.

Venez voir par vous-même. Utilisez maintenant la fonction ValueAccumulator() dans la section précédente avec des fonctions d'ordre supérieur :
// Utilisez forEach() pour parcourir un tableau et appeler la fonction de rappel accumulator2
pour chaque élément var accumulateur2 = ValueAccumulator();
var objects = [obj1, obj2, obj3]; // Ce tableau peut être très grand
objets.forEach(accumulator2);
console.log(accumulator2());

Fonction pure

Les résultats de calcul renvoyés par les fonctions pures sont uniquement liés aux paramètres transmis. Les variables externes et l'état global ne seront pas utilisés ici et il n'y aura aucun effet secondaire. En d’autres termes, les variables transmises en entrée ne peuvent pas être modifiées. Par conséquent, seules les valeurs renvoyées par les fonctions pures peuvent être utilisées dans le programme.

Utilisez des fonctions mathématiques pour donner un exemple simple. Math.sqrt(4) renverra toujours 2, n'utilisera aucune information cachée telle que les paramètres ou l'état et ne provoquera aucun effet secondaire.

La fonction pure est une véritable interprétation d'une « fonction » mathématique qui est la relation entre l'entrée et la sortie. Leurs idées sont simples et faciles à réutiliser. Étant donné que les fonctions pures sont complètement autonomes, elles sont mieux adaptées pour être utilisées encore et encore.

Exemple pour comparer des fonctions impures et des fonctions pures.

// 把信息打印到屏幕中央的函数
var printCenter = function(str) {
 var elem = document.createElement("div");
 elem.textContent = str;
 elem.style.position = 'absolute';
 elem.style.top = window.innerHeight / 2 + "px";
 elem.style.left = window.innerWidth / 2 + "px";
 document.body.appendChild(elem);
};
printCenter('hello world');
// 纯函数完成相同的事情
var printSomewhere = function(str, height, width) {
 var elem = document.createElement("div");
 elem.textContent = str;
 elem.style.position = 'absolute';
 elem.style.top = height;
 elem.style.left = width;
 return elem;
};
document.body.appendChild(
printSomewhere('hello world',
window.innerHeight / 2) + 10 + "px",
window.innerWidth / 2) + 10 + "px"));

Les fonctions inappropriées s'appuient sur l'état de l'objet fenêtre pour calculer la largeur et la hauteur, tandis que les fonctions pures autosuffisantes nécessitent que ces valeurs soient transmises en tant que paramètres. En fait, il permet d’imprimer des informations n’importe où, ce qui rend cette fonction plus polyvalente.

La fonction impure semble être un choix plus facile car elle implémente en interne des éléments ajoutés au lieu de renvoyer des éléments. La fonction pure printSomewhere() qui renvoie une valeur fonctionnera mieux lorsqu'elle sera combinée avec d'autres techniques de programmation fonctionnelle.

var messages = ['Hi', 'Hello', 'Sup', 'Hey', 'Hola'];
messages.map(function(s, i) {
 return printSomewhere(s, 100 * i * 10, 100 * i * 10);
}).forEach(function(element) {
 document.body.appendChild(element);
});

当一个函数是纯的，也就是不依赖于状态和环境，我们就不用管它实际是什么时候被计算出来。 后面的惰性求值将讲到这个。

匿名函数

把函数作为头等对象的另一个好处是匿名函数。

就像名字暗示的那样，匿名函数就是没有名字的函数。实际不止这些。它允许了在现场定义临时逻辑的能力。 通常这带来的好处就是方便：如果一个函数只用一次，没有必要给它浪费一个变量名。

下面是一些匿名函数的例子：

// 写匿名函数的标准方式
function() {
 return "hello world"
};

// 匿名函数可以赋值给变量
var anon = function(x, y) {
 return x + y
};

// 匿名函数用于代替具名回调函数，这是匿名函数的一个更常见的用处
setInterval(function() {
 console.log(new Date().getTime())
}, 1000);
// Output: 1413249010672, 1413249010673, 1413249010674, ...

// 如果没有把它包含在一个匿名函数中，他将立刻被执行，
// 并且返回一个undefined作为回调函数：
setInterval(console.log(new Date().getTime()), 1000)
// Output: 1413249010671

下面是匿名函数和高阶函数配合使用的例子

function powersOf(x) {
 return function(y) {
  // this is an anonymous function!
  return Math.pow(x, y);
 };
}
powerOfTwo = powersOf(2);
console.log(powerOfTwo(1)); // 2
console.log(powerOfTwo(2)); // 4
console.log(powerOfTwo(3)); // 8
powerOfThree = powersOf(3);
console.log(powerOfThree(3)); // 9
console.log(powerOfThree(10)); // 59049

这里返回的那个函数不需要命名，它可以在powersOf()函数外的任何地方使用，这就是匿名函数。

还记得累加器的那个函数吗？它可以用匿名函数重写

var
 obj1 = { value: 1 },
 obj2 = { value: 2 },
 obj3 = { value: 3 };
 
var values = (function() {
 // 匿名函数
 var values = [];
 return function(obj) {
  // 有一个匿名函数！
  if (obj) {
   values.push(obj.value);
   return values;
  } else {
   return values;
  }
 }
})(); // 让它自执行
console.log(values(obj1)); // Returns: [obj.value]
console.log(values(obj2)); // Returns: [obj.value, obj2.value]
obj1 = { value: 1 }
obj2 = { value: 2 }
obj3 = { value: 3 }

values = do ->
 valueList = []
 (obj) ->
  valueList.push obj.value if obj
  valueList
console.log(values(obj1)); # Returns: [obj.value]
console.log(values(obj2)); # Returns: [obj.value, obj2.value]

真棒！一个高阶匿名纯函数。我们怎么这么幸运？实际上还不止这些，这里面还有个自执行的结构， (function(){...})();。函数后面跟的那个括号可以让函数立即执行。在上面的例子里， 给外面values赋的值是函数执行的结果。

匿名函数不仅仅是语法糖，他们是lambda演算的化身。请听我说下去…… lambda演算早在计算机和计算机语言被发明的很久以前就出现了。它只是个研究函数的数学概念。 非同寻常的是，尽管它只定义了三种表达式：变量引用，函数调用和匿名函数，但它被发现是图灵完整的。 如今，lambda演算处于所有函数式语言的核心，包括javascript。
 由于这个原因，匿名函数往往被称作lambda表达式。

匿名函数也有一个缺点，那就是他们在调用栈中难以被识别，这会对调试造成一些困难。要小心使用匿名函数。

方法链

在Javascript中，把方法链在一起很常见。如果你使用过jQuery，你应该用过这种技巧。它有时也被叫做“建造者模式”。

这种技术用于简化多个函数依次应用于一个对象的代码。

// 每个函数占用一行来调用，不如……
arr = [1, 2, 3, 4];
arr1 = arr.reverse();
arr2 = arr1.concat([5, 6]);
arr3 = arr2.map(Math.sqrt);

// ……把它们串到一起放在一行里面
console.log([1, 2, 3, 4].reverse().concat([5, 6]).map(Math.sqrt));
// 括号也许可以说明是怎么回事
console.log(((([1, 2, 3, 4]).reverse()).concat([5, 6])).map(Math.sqrt));

这只有在函数是目标对象所拥有的方法时才有效。如果你要创建自己的函数，比如要把两个数组zip到一起， 你必须把它声明为Array.prototype对象的成员.看一下下面的代码片段：
Array.prototype.zip = function(arr2) {
  // ...
}

这样我们就可以写成下面的样子
arr.zip([11,12,13,14).map(function(n){return n*2});
// Output: 2, 22, 4, 24, 6, 26, 8, 28

递归

递归应该是最著名的函数式编程技术。就是一个函数调用它自己。

当函数调用自己，有时奇怪的事情就发生了。它的表现即是一个循环，多次执行同样的代码，也是一个函数栈。

使用递归函数时必须十分小心地避免无限循环（这里应该说是无限递归）。就像循环一样，必须有个停止条件。 这叫做基准情形（base case）。

下面有个例子

var foo = function(n) {
 if (n < 0) {
  // 基准情形
  return 'hello';
 } else {
  // 递归情形
  return foo(n - 1);
 }
}
console.log(foo(5));

译注：原文中的代码有误，递归情形的函数调用缺少return，导致函数执行得最后没有结果。这里已经纠正。

递归和循环可以相互转换。但是递归算法往往更合适，甚至是必要的，因为有些情形用循环很费劲。

一个明显的例子就是遍历树。

var getLeafs = function(node) {
 if (node.childNodes.length == 0) {
  // base case
  return node.innerText;
 } else {
  // recursive case:
  return node.childNodes.map(getLeafs);
 }
}

分而治之

递归不只是代替for和while循环的有趣的方式。有个叫分而治之的算法，它递归地把问题拆分成更小的情形， 直到小到可以解决。

历史上有个欧几里得算法用于找出两个数的最大公分母

function gcd(a, b) {
 if (b == 0) {
  // 基准情形 (治)
  return a;
 } else {
  // 递归情形 (分)
  return gcd(b, a % b);
 }
}

console.log(gcd(12,8));
console.log(gcd(100,20));

gcb = (a, b) -> if b is 0 then a else gcb(b, a % b)

理论上来说，分而治之很牛逼，但是现实中有用吗？当然！用Javascript的函数对数组排序不是很好， 它不但替换了原数组，也就是说数据不是不变的，并且它还不够可靠、灵活。通过分而治之，我们可以做得更好。

全部的实现代码大概要40行，这里只展示伪代码：

var mergeSort = function(arr) {
 if (arr.length < 2) {
  // 基准情形: 只有0或1个元素的数组是不用排序的
  return items;
 } else {
  // 递归情形: 把数组拆分、排序、合并
  var middle = Math.floor(arr.length / 2);
  // 分
  var left = mergeSort(arr.slice(0, middle));
  var right = mergeSort(arr.slice(middle));
  // 治
  // merge是一个辅助函数，返回一个新数组，它将两个数组合并到一起
  return merge(left, right);
 }
}

译注：关于用分而治之的思路进行排序的一个更好的例子是快排，使用Javascript也只有13行代码。 具体请参考我以前的博文 《优雅的函数式编程语言》

惰性求值

惰性求值，也叫做非严格求值，它会按需调用并推迟执行，它是一种直到需要时才计算函数结果的求值策略， 这对函数式编程特别有用。比如有行代码是 x = func()，调用这个func()函数得到的返回值会赋值给x。 但是x等于什么一开始并不重要，直到需要用到x的时候。等到需要用x的时候才调用func()就是惰性求值。

这一策略可以让性能明显增强，特别是当使用方法链和数组这些函数式程序员最喜爱的程序流技术的时候。 惰性求值让人兴奋的一个优点是让无限序列成为可能。因为在它实在无法继续延迟之前，什么都不需要被真正计算出来。 它可以是这个样子：

// 理想化的JavaScript伪代码:
var infinateNums = range(1 to infinity);
var tenPrimes = infinateNums.getPrimeNumbers().first(10);

这为很多可能性敞开了大门，比如异步执行、并行计算、组合，这只列举了一点。

然而，还有个问题，Javascript本身并不支持惰性求值，也就是说存在让Javascript模拟惰性求值的函数库， 这是第三章的主题。