La Programmation
fonctionnelle en JavaScript
AMINE EL HARRAK
Sommaire
• Rappel sur les paradigmes de programmation
• Concept, avantage PF
• Quelques méthodes et exemples
• Bibliothèqu...
La Programmation fonctionnelle en JavaScript
Rappel sur les paradigmes de programmation
• la programmation impérative : To...
La Programmation fonctionnelle en JavaScript
Pourquoi ce paradigme n'a pas été plus utilisé plus tôt ?
Obstacles technique...
Pourquoi en avons nous besoin ?
• Aujourd’hui, de plus en plus de machines sont dotées de plusieurs microprocesseurs. De p...
La Programmation fonctionnelle en JavaScript
Concepts et avantages
• Immutabilité
• Fonctions d’ordre supérieur
• Lambda
•...
La Programmation fonctionnelle en JavaScript
Immutabilité
Ce concept permet de s'assurer de la valeur des variables du déb...
La Programmation fonctionnelle en JavaScript
Fonctions d'ordre supérieur
• Fonction qui prend au moins une autre fonction ...
La Programmation fonctionnelle en JavaScript
Fonctions d'ordre supérieur
// fonctions d'ordre supérieur
function add(a){
r...
La Programmation fonctionnelle en JavaScript
Les lambdas
Les lambdas, aussi appelées fonctions anonymes, sont des fonction...
La Programmation fonctionnelle en JavaScript
Reprenons l'exemple de isEven().
// utilisation d'une lambda en JavaScript
va...
La Programmation fonctionnelle en JavaScript
Récursivité
Il est possible d'utiliser la programmation fonctionnelle de mani...
La Programmation fonctionnelle en JavaScript
function factorial(num){
// If the number is less than 0, reject it.
if (num ...
La Programmation fonctionnelle en JavaScript
Closures
• L'exécution d'une closure "ressemble" à l'instance d'un
objet
• Sc...
La Programmation fonctionnelle en JavaScript
On va voir quelques concepts de FP qui peuvent s'appliquer à
JavaScript, et c...
La Programmation fonctionnelle en JavaScript
Disponibilité
 Certains concepts ne sont utilisables (correctement) que dans...
La Programmation fonctionnelle en JavaScript
var array = [1,2,3,4,5,6];
for (var i=0; i < array.length; i++) {
array[i] = ...
La Programmation fonctionnelle en JavaScript
var str = '12345';
[].map.call(str, function(x) {
return x;
}).reverse()
.joi...
La Programmation fonctionnelle en JavaScript
var array = [1,2,3,4,5,6];
// retourne true si la variable est pair, false si...
La Programmation fonctionnelle en JavaScript
Grep()
Natif
var allStarCast = [
{ firstName: "Zack", lastName: "Morris" },
{...
La Programmation fonctionnelle en JavaScript
var array = [1,2,3,4,5,6];
var sum = 0;
for (var i=0; i < array.length; i++) ...
La Programmation fonctionnelle en JavaScript
(Récapitulatif)
Si vous avez un tableau et que vous voulez :
• Appliquer une ...
La Programmation fonctionnelle en JavaScript
Conclusion
• Écrire du code qui fonctionne ne suffit pas
• Utiliser des mécan...
La Programmation fonctionnelle en JavaScript
COMMENT APPRENDRE ?
Casser ses habitudes
• Le plus simple pour y parvenir est...
La Programmation fonctionnelle en JavaScript
Ressources
• Learn You A Haskell For Great Good : LE livre pour débuter Haske...
QUESTION ?
Prochain SlideShare
Chargement dans…5
×

La programmation fonctionnelle en javascript / PF

1 315 vues

Publié le

Publié dans : Ingénierie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 315
Sur SlideShare
0
Issues des intégrations
0
Intégrations
236
Actions
Partages
0
Téléchargements
22
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

La programmation fonctionnelle en javascript / PF

  1. 1. La Programmation fonctionnelle en JavaScript AMINE EL HARRAK
  2. 2. Sommaire • Rappel sur les paradigmes de programmation • Concept, avantage PF • Quelques méthodes et exemples • Bibliothèque à utiliser / Comment apprendre ? • Conclusion
  3. 3. La Programmation fonctionnelle en JavaScript Rappel sur les paradigmes de programmation • la programmation impérative : Tout tourne autours du temps. On commence par créer une variable, on assigne une valeur à cette variable, on utilise des boucles for et while pour réaliser des actions on fait des test avec if then. Ces variables sont muables (mutable en anglais), c’est à dire qu’on peut leur donner de nouvelles valeurs dans le temps. • la programmation logique : associe des règles de logique. Elle est particulièrement adaptée au monde de l’intelligence artificielle. • la programmation fonctionnelle : utilise comme objet principal des fonctions. Les fonctions peuvent retourner des fonctions, prendre d’autres fonctions en paramètre. Les variables sont immuables (Les langages fonctionnels existent depuis toujours ! ~1950 )
  4. 4. La Programmation fonctionnelle en JavaScript Pourquoi ce paradigme n'a pas été plus utilisé plus tôt ? Obstacles techniques • Puissance des machines • Utilisation mémoire • Processeur mono-cœur Scientifique et académique • Application dans la recherche • Utilisé pour dans l'enseignement Application industrielle spécifique • Programmation concurrente et distribuée • Fault-tolerant systems Renaissance  Contraintes de scalabilité de plus en plus forte (Google, Twitter ..)  Multi-coeurs, parallèlisme  Introduction des concepts dans les langages impératifs les plus utilisés  Montée en puissance de langages fonctionnels (Scala, Erlang, Clojure ...)
  5. 5. Pourquoi en avons nous besoin ? • Aujourd’hui, de plus en plus de machines sont dotées de plusieurs microprocesseurs. De plus avec l’émergence du cloud computing, il est très aisé d’avoir plusieurs machines à sa disposition. • D’autre part, de nombreuses applications ont besoin d’une grande capacité de calcul. • Twitter par exemple doit gérer plusieurs centaines de milliers de tweets par seconde. • C’est là que la programmation parallèle et la programmation concurrente entrent en jeu. Or il est compliqué dans un langage impératif de gérer plusieurs threads. Il faut notamment faire attention aux fameux points de blocages (deadlocks). De plus, en programmation parallèle avec des types muables , des phénomènes non- déterministes apparaissent… • C’est ici que la force de la programmation fonctionnelle et ses types immuables entre en jeu. • La programmation fonctionnelle est déjà utilisée par les plus grandes startups webs, comme Twitter et Linkedin justement pour gérer les problématiques de croissance (scalability en anglais).
  6. 6. La Programmation fonctionnelle en JavaScript Concepts et avantages • Immutabilité • Fonctions d’ordre supérieur • Lambda • Récursivité
  7. 7. La Programmation fonctionnelle en JavaScript Immutabilité Ce concept permet de s'assurer de la valeur des variables du début à la fin de nos actions. • code plus robuste • code plus stable • moins de bugs • moins de maintenances Une fonction ne doit pas modifier les variables qui lui sont passées en paramètre.
  8. 8. La Programmation fonctionnelle en JavaScript Fonctions d'ordre supérieur • Fonction qui prend au moins une autre fonction en paramètre pour fournir un résultat • Réduit la quantité de code • Compositions • Développement plus haut niveau
  9. 9. La Programmation fonctionnelle en JavaScript Fonctions d'ordre supérieur // fonctions d'ordre supérieur function add(a){ return function(b){ return a+b } }; add(3)(4) 7 var bump=add(1); bump(3) 4
  10. 10. La Programmation fonctionnelle en JavaScript Les lambdas Les lambdas, aussi appelées fonctions anonymes, sont des fonctions utilisées de manière ponctuelle et n'effectuant généralement qu'une opération.
  11. 11. La Programmation fonctionnelle en JavaScript Reprenons l'exemple de isEven(). // utilisation d'une lambda en JavaScript var evens = array. functionX(function(v) { return v % 2 == 0; }); // utilisation d'une lambda en CoffeeScript var evens = array.functionX((v) -> v % 2 == 0);
  12. 12. La Programmation fonctionnelle en JavaScript Récursivité Il est possible d'utiliser la programmation fonctionnelle de manière récursive. • Pas de "variables" donc boucle itérative impossible. Cela va permettre d'avoir un code plus lisible et plus court. De plus, le code s'auto documenter de lui-même.
  13. 13. La Programmation fonctionnelle en JavaScript function factorial(num){ // If the number is less than 0, reject it. if (num < 0) { return -1; } // If the number is 0, its factorial is 1. else if (num == 0) { return 1; } var tmp = num; while (num-- > 2) { tmp *= num; } return tmp; } var result = factorial(8); factorial Récursivité function factorial(num) { // If the number is less than 0, reject it. if (num < 0) { return -1; } // If the number is 0, its factorial is 1. else if (num == 0) { return 1; } // Otherwise, call this recursive procedure again. else { return (num * factorial(num - 1)); } } var result = factorial(8);
  14. 14. La Programmation fonctionnelle en JavaScript Closures • L'exécution d'une closure "ressemble" à l'instance d'un objet • Scope de la fonction parente conservée après exécution • Une closure ressemble à une fonction, mais est bien plus puissante. Elle peut être assignée à une variable, passée comme argument ou encore retournée par une autre fonction. On parle alors de high-order function.
  15. 15. La Programmation fonctionnelle en JavaScript On va voir quelques concepts de FP qui peuvent s'appliquer à JavaScript, et comment ça améliore le code !
  16. 16. La Programmation fonctionnelle en JavaScript Disponibilité  Certains concepts ne sont utilisables (correctement) que dans des langages fonctionnels  D'autres sont parfaitement utilisables dans un langage (moderne) impératif • Natif avec ECMAScript 5 • Partout avec underscore.js
  17. 17. La Programmation fonctionnelle en JavaScript var array = [1,2,3,4,5,6]; for (var i=0; i < array.length; i++) { array[i] = array[i] +1; } // retourne [2,3,4,5,6,7]; map() Natif var array = [1,2,3,4,5,6]; array.map(function(a) {return a + 1} ); underscorejs var array = [1,2,3,4,5,6]; _.map(array , function(a){ return a+1; });
  18. 18. La Programmation fonctionnelle en JavaScript var str = '12345'; [].map.call(str, function(x) { return x; }).reverse() .join(''); // Output: '54321‘ // Bonus: use '===' to test if original string was a palindrome La méthode call() réalise un appel à une fonction avec une valeur this et les arguments fournis individuellement.
  19. 19. La Programmation fonctionnelle en JavaScript var array = [1,2,3,4,5,6]; // retourne true si la variable est pair, false sinon. var isEven = function(v) { return v % 2 == 0; }; var evens = []; for (var i=0; i < array.length; i++) { if (isEven(array[i])) { evens.push(array[i]); } } // retourne [2, 4, 6] Natif var array = [1,2,3,4,5,6]; var evens = array.filter(isEven); filter() Underscorejs var array = [1,2,3,4,5,6]; var evens = _.filter([1, 2, 3, 4, 5, 6], function(num){ return num % 2 == 0; });
  20. 20. La Programmation fonctionnelle en JavaScript Grep() Natif var allStarCast = [ { firstName: "Zack", lastName: "Morris" }, { firstName: "Kelly", lastName: "Kapowski" }, { firstName: "Lisa", lastName: "Turtle" }, { firstName: "Screech", lastName: "Powers" }, { firstName: "Jessie", lastName: "Spano" }, { firstName: "Richard", lastName: "Belding" } ] var worldsCutestCouple = $.grep(allStarCast, function(actor) { return (actor.firstName === "Zack" || actor.firstName === "Kelly"); }); console.log(worldsCutestCouple);  [Object { firstName="Zack", lastName="Morris"},  Object { firstName="Kelly", lastName="Kapowski"}]
  21. 21. La Programmation fonctionnelle en JavaScript var array = [1,2,3,4,5,6]; var sum = 0; for (var i=0; i < array.length; i++) { Sum = sum +array[i]; } // output : 21 Natif var array = [1,2,3,4,5,6]; var sum = array .reduce(function(memo, a) { return memo + a } ); reduce() / reduceRight() Underscorejs var array = [1,2,3,4,5,6]; var sum = _.reduce(array , function(memo, num){ return memo + num; }, 0);
  22. 22. La Programmation fonctionnelle en JavaScript (Récapitulatif) Si vous avez un tableau et que vous voulez : • Appliquer une transformation sur chacune de ses cases (en conservant leur ordre/nombre) : • Supprimer certaines cases (en conservant l’ordre et le contenu des autres) : • Parcourir pour construire une nouvelle structure de données : map filter reduce
  23. 23. La Programmation fonctionnelle en JavaScript Conclusion • Écrire du code qui fonctionne ne suffit pas • Utiliser des mécanismes qui facilitent le raisonnement : • transparence référentielle • fonctions d’ordre supérieur • évaluation paresseuse • immuabilité • systèmes de types avancés • ... • La programmation fonctionnelle offre de belles manières d'écrire des programmes fiables et maintenables.
  24. 24. La Programmation fonctionnelle en JavaScript COMMENT APPRENDRE ? Casser ses habitudes • Le plus simple pour y parvenir est de s'imerger • Apprendre avec un langage à tendance fonctionnelle très importante le(s)quel(s) ? Scala Penser différemment Construire son programme avec un maximum de fonctions pures La logique métier est fiable, sans surprise et aisément testable. Isoler les fonctions qui ont des effets de bord On sait quelles fonctions ont des effets de bord, ce qui permet d’être prudent lorsqu’on les manipule.
  25. 25. La Programmation fonctionnelle en JavaScript Ressources • Learn You A Haskell For Great Good : LE livre pour débuter Haskell ; il est très accessible (traduction FR non officielle) • JavaScript Alongé : un livre avancé sur JavaScript ; il explique et met en place certains concepts que nous avons survolés ici • Lo-Dash : une bibliothèque JavaScript qui propose notamment des fonctions d'ordre supérieur très intéressantes pour manipuler les collections • Bacon.js : une bibliothèque JavaScript qui permet de faire de la programmation fonctionnelle réactive • Underscore.js • Is your programming language unreasonable? or, why predictability is important
  26. 26. QUESTION ?

×