Guide de base de la programmation fonctionnelle dans JavaScript_Basics

Présentation

JavaScript est un langage de programmation puissant, mais incompris. Certains aiment dire qu'il s'agit d'un langage de programmation orienté objet ou d'un langage de programmation fonctionnel. D'autres aiment dire qu'il ne s'agit pas d'un langage de programmation orienté objet, ni d'un langage de programmation fonctionnel. D'autres pensent qu'il présente à la fois les caractéristiques d'un langage orienté objet et d'un langage fonctionnel, ou qu'il n'est ni orienté objet ni fonctionnel. Eh bien, laissons ces arguments de côté pour l'instant.

Supposons que nous partageons une mission : écrire des programmes utilisant autant de principes de programmation fonctionnelle que possible dans le cadre du langage JavaScript.

Tout d’abord, nous devons dissiper dans nos esprits ces idées fausses sur la programmation fonctionnelle.

Une programmation fonctionnelle (très) mal comprise dans le monde JS

Apparemment, de nombreux développeurs utilisent JavaScript dans un paradigme fonctionnel à longueur de journée. Je dirais quand même qu'il existe un plus grand nombre de développeurs JavaScript qui ne comprennent pas vraiment le vrai sens de cette prétention.

Je suis convaincu que cette situation est causée par le fait que de nombreux langages de développement web​​utilisés côté serveur sont dérivés du langage C, et le langage C n'est évidemment pas un langage de programmation fonctionnel.

Il semble y avoir deux niveaux de confusion. Utilisons l'exemple suivant qui est souvent utilisé dans jQuery pour illustrer le premier niveau de confusion :

$(".signup").click(function(event){
  $("#signupModal").show();
  event.preventDefault();
});

Hé, regarde attentivement. Je passe une fonction anonyme en paramètre, connue dans le monde JavaScript sous le nom de fonction "CallBack".

Est-ce que quelqu'un pense vraiment qu'il s'agit de programmation fonctionnelle ? Pas du tout!

Cet exemple démontre une fonctionnalité clé des langages fonctionnels : les fonctions en tant que paramètres. D'un autre côté, cet exemple de 3 lignes va également à l'encontre de presque tous les autres paradigmes de programmation fonctionnelle.

Le deuxième niveau de chaos est un peu plus subtil. Après avoir lu ceci, certains développeurs JS à la recherche de tendances réfléchissent secrètement.

D'accord, merde ! Mais je sais déjà tout ce qu'il y a à savoir sur la programmation fonctionnelle. J'utilise Underscore.js sur tous mes projets.

Underscore.js est une bibliothèque JavaScript populaire utilisée partout. Par exemple, j'ai un ensemble de mots et j'ai besoin d'obtenir un ensemble dans lequel chaque élément de l'ensemble correspond aux deux premières lettres de chaque mot. Implémenter cela avec Underscore.js est assez simple :

var firstTwoLetters = function(words){
  return _.map(words,function(word){
    return _.first(word,2);
  });
};

Regardez ! Voir Assistant JavaScript. J'utilise ces fonctions d'application fonctionnelles avancées telles que _.map et _.first. Y a-t-il autre chose que tu veux dire, Leland ?

Bien que les faits saillants et les fonctions comme _.map soient des éléments très précieux du paradigme fonctionnel, la façon dont le code est organisé comme celui utilisé dans cet exemple semble... verbeuse et trop difficile à comprendre pour moi. Avons-nous vraiment besoin de faire cela ?

Si nous commençons à penser avec une pensée un peu plus « fonctionnelle », nous pourrions peut-être changer l'exemple ci-dessus en ceci :

// ...一点魔法
var firstTwoLetters = map(first(2));

Réfléchissez bien, une ligne de code contient les mêmes informations que les cinq lignes de code ci-dessus. les mots et les mots ne sont que des paramètres/espaces réservés. Le cœur de cette méthode est de combiner la fonction map, la première fonction et la constante 2 d'une manière plus évidente.

JavaScript est-il un langage de programmation fonctionnel ?

Il n’existe pas de formule magique pour déterminer si un langage est un langage « fonctionnel ». Certains langages sont clairement fonctionnels, tout comme d'autres langages ne le sont clairement pas, mais il existe de nombreux langages qui se situent quelque part entre deux ambiguïtés.

Voici donc quelques "ingrédients" couramment utilisés et importants des langages fonctionnels (JavaScript peut utiliser des symboles en gras)

• Les fonctions sont des « citoyens de première classe »
• Les fonctions peuvent renvoyer des fonctions
• Prend en charge lexicalement les fermetures
• Les fonctions doivent être « pures »
• Récursion fiable
• Aucun statut de mutation

Ceci n'est en aucun cas une liste exclusive, mais nous aborderons au moins une par une les trois fonctionnalités les plus importantes de Javascript qui nous permettent d'écrire des programmes de manière fonctionnelle.

Regardons chacun d’eux de plus près :

Les fonctions sont des « citoyens de première classe »

Celui-ci est probablement le plus évident de tous les ingrédients, et probablement le plus courant dans de nombreux langages de programmation modernes.

Les variables locales en JavaScript sont définies via le mot-clé var.

var foo = "bar";

Il est très simple de définir des fonctions comme variables locales en JavaScript.

var add = function (a, b) { return a + b; };
var even = function (a) { return a % 2 === 0; };

Ce sont tous des faits, des variables : variable add et variable établissent même une relation de référence avec la définition de la fonction en se voyant attribuer une valeur. Cette relation de référence peut être modifiée à tout moment si nécessaire.

// capture the old version of the function
var old_even = even; 
 
// assign variable `even` to a new, different function
even = function (a) { return a & 1 === 0; };

Bien sûr, cela n’a rien de spécial. Mais la caractéristique importante d’être un « citoyen de premier ordre » nous permet de passer une fonction à une autre fonction en tant que paramètre. Par exemple :

var binaryCall = function (f, a, b) { return f(a, b); };

这是一个函数，他接受了一个二元函数f，和两个参数a，b，然后调用这个二元函数f，该二元函数f以a、b为输入参数。

add(1,2) === binaryCall(add, 1, 2); 
// true

这样做看起来有点笨拙，但是当把接下来的函数式编程“配料”合并考虑的时候，牛叉之处就显而易见了…

函数能返回函数（换个说法“高阶函数”）

事情开始变的酷起来。尽管开始比较简单。函数最终以新的函数作为返回值。举个例子：

var applyFirst = function (f, a) { 
 return function (b) { return f(a, b); };
};

这个函数（applyFirst）接受一个二元函数作为其中一个参数，可以把第一个参数（即二元函数）看作是这个applyFirst函数的“部分操作”，然后返回一个一元（一个参数）函数，该一元函数被调用的时候返回外部函数的第一个参数（f）的二元函数f(a, b)。返回两个参数的二元函数。

让我们再谈谈一些函数，例如mult(乘法)函数：

var mult = function(a, b) { return a * b; };

依循mult(乘法)函数的逻辑，我们可以写一个新的函数double(乘方)：

var double = applyFirst(mult, 2);
 
double(32); 
// 64
double(7.5); 
// 15

这就是偏函数，在FP中经常会用到。（译注：FP全名为 Functional Programming 函数式程序设计 ）

我们当然可以像applyFirst那样定义函数：

var curry2 = function (f) {
 return function (a) {
  return function (b) {
   return f(a, b);
  };
 };
};

现在，我想要一个double（乘方）函数，我们换种方式做：

var double = curry2(mult)(2);

这种方式被称作“函数柯里化”。有点类似partial application（偏函数应用），但是更强大一点。

准确的说，函数式编程之所以强大，大部分因于此。简单和易理解的函数成为我们构筑软件的基础构件。当拥有高水平的组织能力、很少重用的逻辑的时候，函数能够被组合和混合在一起用来表达出更复杂的行为。

高阶函数可以得到的乐趣更多。让我们看两个例子：

1.翻转二元函数参数顺序

// flip the argument order of a function
var flip = function (f) {
 return function (a, b) { return f(b, a); };
};
 
divide(10, 5) === flip(divide)(5, 10); 
// true

2.创建一个组合了其他函数的函数

// return a function that's the composition of two functions...
// compose (f, g)(x) -> f(g(x))
var compose = function (f1, f2) {
 return function (x) {
  return f1(f2(x));
 };
};
 
// abs(x) = Sqrt(x^2)
var abs = compose(sqrt, square);
 
abs(-2); 
// 2

这个例子创建了一个实用的函数，我们可以使用它来记录下每次函数调用。

var logWrapper = function (f) {
 return function (a) {
  console.log('calling "' + f.name + '" with argument "' + a);
  return f(a);
 };
};

var app_init = function(config) { 
/* ... */
 };
 
if(DEBUG) {
 
// log the init function if in debug mode
 app_init = logWrapper(app_init);
}
 
// logs to the console if in debug mode
app_init({
 
/* ... */
});

词法闭包+作用域

我深信理解如何有效利用闭包和作用域是成为一个伟大JavaScript开发者的关键。
那么…什么是闭包？

简单的说，闭包就是内部函数一直拥有父函数作用域的访问权限，即使父函数已经返回。61bc4fd3a408f9b7fe12fc5564f7379b
可能需要个例子。

var createCounter = function () {
 var count = 0;
 return function () {
  return ++count;
 };
};
 
var counter1 = createCounter();
 
counter1(); 
// 1
counter1(); 
// 2
 
var counter2 = createCounter();
 
counter2(); 
// 1
counter1(); 
// 3

一旦createCounter函数被调用，变量count就被分配一个新的内存区域。然后，返回一个函数，这个函数持有对变量count的引用，并且每次调用的时候执行count加1操作。

注意从createCounter函数的作用域之外，我们是没有办法直接操作count的值。Counter1和Counter2函数可以操作各自的count变量的副本，但是只有在这种非

常具体的方式操作count（自增1）才是被支持的。

在JavaScript，作用域的边界检查只在函数被声明的时候。逐个函数，并且仅仅逐个函数，拥有它们各自的作用域表。（注：在ECMAScript 6中不再是这样，因为let的引入）

一些进一步的例子来证明这论点：

// global scope
var scope = "global";
 
var foo = function(){
 
// inner scope 1
 var scope = "inner";
 var myscope = function(){
  
// inner scope 2
  return scope;
 };
 return myscope;
};
 
console.log(foo()()); 
// "inner"
 
console.log(scope); 
// "global"

关于作用域还有一些重要的事情需要考虑。例如，我们需要创建一个函数，接受一个数字（0-9），返回该数字相应的英文名称。

简单点，有人会这样写：

// global scope...
var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
var digit_name1 = function(n){
 return names[n];
};

但是缺点是，names定义在了全局作用域，可能会意外的被修改，这样可能致使digit_name1函数所返回的结果不正确。
那么，这样写：

var digit_name2 = function(n){
 var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
 return names[n];
};

这次把names数组定义成函数digit_name2局部变量.这个函数远离了意外风险，但是带来了性能损失，由于每次digit_name2被调用的时候，都将重新为names数组定义和分配空间。换个例子如果names是个非常大的数组，或者可能digit_name2函数在一个循环中被调用多次，这时候性能影响将非常明显。

// "An inner function enjoys that context even after the parent functions have returned."
var digit_name3 = (function(){
 var names = ['zero','one','two','three','four','five','six','seven','eight','nine'];
 return function(n){
  return names[n];
 };
})();

这时候我们面临第三个选择。这里我们实现立即调用的函数表达式，仅仅实例化names变量一次，然后返回digit_name3函数，在 IIFE (Immediately-Invoked-Function-Expression 立即执行表达式)的闭包函数持有names变量的引用。
这个方案兼具前两个的优点，回避了缺点。搞定！这是一个常用的模式用来创建一个不可被外部环境修改“private”（私有）状态。