Coding Dojo :
Programmation
Fonctionnelle

Apprenons le javascript 

• Un tableau vide en js :
  • ​var people = []
     
• ​Un objet en js :
  • ​var ben = {id:1, name: "Ben"}
  • ben.id et ben.name pour accéder aux propriétés​

Apprenons le javascript 

• Un tableau d’objet en js
  • ​var people= [{id:1,name:"Ben"}, {id:2,name:"Jafar"}, {id:3,name:"Matt"}]
     
• ​​Boucle en js :
  • ​for (var i = 0; i < people.length; i++) {
         var e = people[i];
         /*I can now use e.id and e.name*/
    } 

Apprenons le javascript 

• Déclarer et appeler une fonction :
  • ​function test(arg1, arg2) {
        /*I can now use arg1 and arg2*/
        return arg1 + " " + arg2
    }
  • test("Hello", "World") => "Hello World"
     
• ​Voici une fonction qu’on va utiliser ce soir
  • ​function display(e) { console.log(e) }; 

ForEach

• on ne comprend pas facilement ce qu’on fait dans une boucle...
  • ​var peopleNames= ["Ben", "Jafar","Matt"]
    for (var i = 0; i < peopleNames.length; j++) {
         display(peopleNames[i])
    }

ForEach

• => une boucle infinie qui affiche le premier nom...
   
• forEach = appliquer une fonction sur chaque élément d’une collection
  • ​peopleNames.forEach(display) 

ForEach : exercice

• afficher tous les noms à l’aide de display avec forEach
  • ​var people= [{id:1,name:"Ben"}, {id:2,name:"Jafar"}, {id:3,name:"Matt"}]

ForEach : exercice

• Solution possible :
  • ​function printName(p) { display(p.name); } people.forEach(printName)
     
• ​Petit soucis : la fonction printName fait 2 choses : elle extrait le nom et l’affiche 

Map

• Quand on travaille sur un élément d’une collection, on a souvent besoin de le transformer pour qu’il soit utilisable dans une autre fonction
  • ​=> Ca s’appelle effectuer une projection
  • ​function extractName(p) {
        return p.name
    }
  • => je projette le nom de la personne

Map

• map = appliquer une projection à tous les éléments d’une collection
  • [{id:1,name:"Ben"}].map(extractName) => ["Ben"] 

Map : exercice

• afficher tous les noms à l’aide de display avec forEach et map
  • ​var people= [{id:1,name:"Ben"}, {id:2,name:"Jafar"}, {id:3,name:"Matt"}]

Map : exercice

• Solution possible :
  • ​function extractName(p) { return p.name} people.map(extractName).forEach(display)
     
• ​Petit soucis : on ne peut pas choisir de ne pas traiter un élément 

Filter

• Quand on travaille sur une collection, on a souvent besoin de travailler sur certains éléments uniquement
  • ​=> Ca s’appelle effectuer un filtre
• Pour effectuer un filtre, on a besoin de respecter un prédicat
  • function isMale(p) {
        return p.gender == 'MALE'
    }
  • => prédicat pour filtrer les hommes

Filter

• ​Filter = appliquer un prédicat à tous les éléments d’une collection
  • [{id:1,gender:"MALE"}, {id:2,gender:"FEMALE"}]
    .filter(isMale)
    => [{id:1, gender:"MALE"}] 

Filter : exercice

• ​afficher tous les noms qui commence par
  un B à l’aide de display avec forEach et
  map et filter
  • ​var people= [{id:1,name:"Ben"},
    {id:2,name:"Jafar"}, {id:3,name:"Matt"}] 

Filter : exercice

• ​Solution possible :
  • ​function extractName(p) { return p.name}
    function hasNameStartingWithB(p) {
      return p.name[0] == 'B'
    }
    people.filter(hasNameStartingWithB)
        .map(extractName)
        .forEach(display)
• ​Petit soucis : faire la même chose avec les noms qui commencent par d’autres lettres oblige à refaire 26 fonctions 

Créer des fonctions 

• Quand on travaille avec des fonctions, on a parfois besoin de fabriquer des fonctions (en général avec moins d’arguments...​)

  • function adder(x) {
      return function(y) { return x+ y};
    }

  • => crée une fonction pour ajouter x 

• ​On parle de fonction d'ordre supérieur currifiée

Créer des fonctions 

• Particulièrement utile avec map et filter bien sûr

• [1, 2, 3, 4].map(adder(2)) => [3, 4, 5, 6]

• [1, 2, 3, 4].filter(isModulo(2)) => [2, 4]

• people
  .filter(hasNameStartingWith('C'))
  .map(extractName)
  .forEach(display)

Créer des fonctions :exercice

• var NASDAQ = [
  {name: "ANGI", price: 31.22, stamp: new Date(2011,11,15) },
  {name: "MSFT", price: 32.32, stamp: new Date(2011,11,15) },
  {name: "GOOG", price: 150.43, stamp: new Date(2011,11,15)},
  {name: "ANGI", price: 28.44, stamp: new Date(2011,11,16)},
  {name: "GOOG", price: 199.33, stamp: new Date(2011,11,16)}

  ];

• Afficher le prix des actions de X (ex: "GOOG" ) en date du Z (ex: 2011-11-16) 

  • ​comparer 2 dates en JS :
    d1.getTime() == d2.getTime()

Créer des fonctions :exercice

• Solution possible
  function isActionOf(tm) { return function(a) { return a.name == tm;} }
  function isActionAt(y, m, d) {
          return function(a) { return new Date(y, m, d).getTime() == a.stamp.getTime(); }
  }
  function extractPrice(a) { return a.price; }
• pricesNASDAQ
      .filter(isActionOf("GOOG"))
      .filter(isActionAt(2011,11,16))
      .map(extractPrice)
      .forEach(display)
• Petit soucis : c'est lisible mais... 

DSL

• On aimerait pouvoir lire le code comme
  on lit de l’anglais
• Cela est possible si on arrive à créer un
  ​Domain Specific Language
  • new Prices(nasdaq)
      .of("GOOG")
      .at(2011,11,16)
      .forEach(display) 

Les classes en JS

• En JS, on peut créer des classes !
  • ​function MyC(arg) {
      this.prop = arg;
    }
    MyC.prototype.myfn = function (arg) {
        return this.prop + arg;
    } 

DSL : exercice

• Ecrire une classe Prices qui permet de faire
• new Prices(nasdaq)
      .of("GOOG")
      .at(2011,11,16)
      .forEach(display)

DSL : exercice

• Solution possible
• function Prices(list) { this.list = list; }
  Prices.prototype.of = function (tm) { 
           return new Prices(this.list.filter(isActionOf(tm)))
  }
  Prices.prototype.at = function (year, month, day) {
           return new Prices(this.list.filter(isActionAt(year, month, day)))
  }
  Prices.prototype.forEach = function(fn) { this.list.forEach(fn); }
• Bon ce n'est toujours pas de l'anglais ...
  • ​new Prices(nasdaq).of("GOOG").at(2011,11,16).forEach(display)

DSL : en vrai !

• Dans un "vrai" langage fonctionnel, les parenthèses, les virgules, les points et les new sont optionnels (le compilateur les déduit) 

  • new Prices(NASDAQ).of("GOOG").at(2011,11,16) 
    Est équivalent à
    Prices NASDAQ of "GOOG" at 2011 11 16

• => c’est quasiment de l’anglais !!!

Autres utilisations ?

• La FP n’est pas seulement idéale pour manipuler les collections, elle est également idéale pour les traitements asynchrones.
• function every(t, fn) { setTimeout(fn, t); }
  function combine(f1, f2) { return f2(f1()); }
  //exo : combiner n fonctions
• every(SECOND(1), combine(sensor.read, display))
  every(SECOND(1), combine(sensor.read, extractTemp, display)) 

Autres utilisations ?

• La FP est également utile pour l’écriture de GUI
• Lancer une recherche quand l’utilisateur a tapé au moins 3 caractères sans lancer 2 fois la même recherche
• Rx.fromEvent(input, ‘keyup’) // créer une collection d’évènements

.map(e => e.target.value) //retenir la valeur du champ texte
.filter(q => q.length > 2) //seulement si au moins 3 caractères .distinctUntilChanged() //seulement si différent du précédent .flatMapLatest(searchAndDisplay) //et envoyer le dernier à la fonction