Map

Définition

Map à été intégré avec la cinquième version du standard ECMA-262 (ECMAScript 5). C’est une fonction qui s’applique sur un tableau.

L’idée est le que la fonction de callback fourni en argument de Map s’applique sur chacun des éléments du tableau d’origine. Sur chaque éléments de ce tableau, une opération est effectué, ainsi, au fur et à mesure que les opérations de callback se produisent sur chaque élément du tableau d’origine, chaque résultats devient un élément du nouveau tableau.

Syntaxe

var newArray = OldArray.map(callback[,thisArg])

Paramètre

Callback
La fonction de callback utilisé pour créer un élément du nouveau tableau. Cette fonction prends en paramètre 3 arguments :

  1. Valeur courante
    La valeur de l’élément courant du tableau d’origine sur lequel on applique map.
  2. Index courant [Facultatif]
    L’index de l’élément courant du tableau d’origine.
  3. Tableau d’origine [Facultatif]
    Tableau d’origine sur lequel on appel la methode map.

ThisArg
C’est la valeur à utiliser pour le context This lors de l’execution de la fonction de callback. Attention, la fonction de callback doit être écrite sous forme de fonction anonyme.
En d’autres termes, si le callback est une lambda expression, la valeure de This sera ignorée et retournera toujours le contexte global window.

Exemples

  • Callback – Utilisation de valeur et index courant
    Double les éléments situés à un indice pair et renvoi le nouveau tableau modifié.

     
    var array = [0,1,2,3,4,5,6] 
    var mappedArray = array.map((elt,i)=>(i%2===0)?elt*2:elt) 
    console.log(mappedArray) 
    //Output : [0,1,4,3,8,5,12] 
    
  • Modifier le format d’objet du tableau d’origine.

    var employees = [
    { age: 20, name: 'Dgibril Diop' },
    { age: 24, name: 'Jean Edouard' },
    { age: 56, name: 'Youssef Ziad' },
    { age: 88, name: 'John Smith' }
    ];
    
    var newEmployees = employees.map(elt=>{
    var obj = {}
    obj[elt.age]=elt.name
    return obj
    })
    console.log(newEmployees)
    //Output : 
    [ { '20': 'Dgibril Diop' },
      { '24': 'Jean Edouard' },
      { '56': 'Youssef Ziad' },
      { '88': 'John Smith' } ]
    
  • Map – utilisation de ThisArg
    Reprenons l’exemple précédent.
    En second paramètre de Map, passons un objet ayant pour propriété ‘x’ et pour valeur ‘My name is’.
    On constate que This a pour context la propriété passés en paramètre.

    var employees = [
    { age: 20, name: 'Dgibril Diop' },
    { age: 24, name: 'Jean Edouard' },
    { age: 56, name: 'Youssef Ziad' },
    { age: 88, name: 'John Smith' }
    ];
    
    var newEmployees = employees.map(function(elt){
    var obj = {}
    obj[elt.age]=this.x+elt.name
    return obj
    },{x:"My name is "})
    console.log(newEmployees)
    
    //Output :
    [ { '20': 'My name is Dgibril Diop' },
    { '24': 'My name is Jean Edouard' },
    { '56': 'My name is Youssef Ziad' },
    { '88': 'My name is John Smith' } ]
    

Array reduce

Avant d’aborder quelques exemples sur le sujet, faisons une petite synthèse de la méthode reduce, en exposant ses différents paramètres.

Définition

La méthode reduce applique une opération à chaque éléments d’un tableau.
Le résultat est stocké dans un accumulateur.

Qu’est ce qu’un accumulateur?
Nous savons que reduce s’applique sur un tableau initial qui contient sa propre liste de données.
A chaque itérations, la dernière valeur précédemment calculé est accumulé.
Le résultat final sera la dernière valeur calculé par le dernier appel de la fonction callback.

Syntaxe

array.reduce(callback,valeurInitiale[Facultatif])

Paramètres

Callback : La fonction de callback est le premier paramètre.
Celui ci se décline en 4 autres paramètres :

    1. Accumulateur
      Valeur finale à retourner
    2. Elément courant
      Valeur de l’élément courant du tableau d’origine
    3. Indice de l’élément courant [Facultatif]
      Indice de la valeur de l’élément courant du tableau d’origine.
    4. Le tableau d’origine [Facultatif]
      Le tableau d’origine sur lequel on a appelé la méthode reduce.

Valeur initiale [Facultatif]
Si la valeur initiale est fourni, alors reduce exécutera la fonction de callback à partir de l’indice 0.
Si au contraire la valeur initial n’est pas fourni, alors reduce exécutera la fonction de callback à partir de l’indice 1, (l’indice 0 sera considéré comme valeur initiale)

Exemples

    • Somme d’un tableau (reduce sans valeur initial en paramètre)
       
      var array = [2,4,6,8] 
      var result = array.reduce((accumulator,currentItem)=>accumulator+currentItem)
      //Output : 20 
      
    • Somme d’un tableau (reduce avec valeur initial)
       
      var array = [2,4,6,8]
      var initialValue = 100
      var result = array.reduce((accumulator,currentItem)=>accumulator+currentItem,InitialValue) 
      //Output : 120 
      
    • Dernier fichier d’un repertoire.
      Récupérons le fichier le plus récent d’un répertoire MyFolder.

      //GetMaxFile Get most recent file stored in MyFolder
      function GetMaxFile(){
      var files = fs.readdirSync(MyFolder)
      return files.reduce((item,max)=>item>max?item:max)
      }
      
    • Suites de Fibonacci
       
      function Fibonacci(sequenceSize){
          return new Array(sequenceSize).fill(0).reduce(
           (arr,_,i)=>{arr.push((i>=1)?i:arr[i-2]+arr[i-1])
           return arr},[])
          );
      }
      
      console.log(Fibonacci(7))
      //Output : [0,1,1,2,3,5,8]
      

      Suite Fibonacci 2

       
      function Fibonacci_1(sequenceSize){ 
      const fibo = new Array(sequenceSize).fill(0) fibo.reduce((_,__,i)=>(fibo[i]=(i>=1)?i:fibo[i-2]+fibo[i-1])) 
      return fibo 
      } 
      

Note : Les caractères simples, et doubles underscores (parfois mis en paramètre des callback) illustrent le fait que je  survole ces paramètres.