17 Oct 2016

_.chain et _.reduce sont sur un bâteau…

Bonjour à tous,

Dans l’article précédent sur le Currying, nous parlions un peu de la librairie lodash. J’affectionne cette librairie car elle est très riche et très simple d’utilisation.

Avec cette dernière, vous avez énormément de possibilités : isEmpty, isFunction, ltfind, filter, head, map, includes, forEach, … et je suis LOIN d’être exhaustif.

A l’occasion, un dojo sur cette librairie pourrait être intéressant ! Mais revenons à nos js, avec cet article, je vous propose d’aller à la rencontre de certaines de ces méthodes.

I. Notre “use case”

Nous avons une liste de bières et nous souhaitons retrouver le nom de notre bière préférée : elle était blonde, belge et alcoolisée correctement…

La liste des bières est :

Bon déjà, nous ajoutons un identifiant à chacun de ces objets :

Comme vous pouvez le voir pour le moment on utilise les méthodes de Array.

Bien sur, nous ne conservons que les bières belges :

et les bières blondes :

et celles dont le ° d’alcool reste correcte :

et comme nous voulons présenter le résultat proprement, nous trions :

Ça y est, nous avons retrouvé les bières qui correspondent à notre recherche :

Bon, on tente de la refaire en plus synthétique ?

II. Retravailler des données : _.chain / _.map / _.filter

Notre ami lodash va nous y aider. Grâce à lui, on va combiner sur la même liste de données plusieurs traitements :

  1. Ajouter des identifiants,
  2. Filter les données,
  3. Trier les données

.map peut s’écrire :

.filter peut s’écrire :

Mais que s’est-il passé ? En fait, lodash via l’appel à _.chain va nous permettre d’enchaîner les traitements sur les données en passant d’un traitement à l’autre les le résultat du traitement précédent. A la fin, .value() va nous permettre de sortir le résultat sous une liste classique.

Certains se disent qu’on pourrait faire autrement… en effet, il existe plein de méthodes différentes pour retravailler ces données et pourquoi pas avec _.reduce

III. Une autre possibilité : _.reduce

L’idée ici est de parcourir notre tableau et d’en contrôler les éléments que nous voulons conserver.

Par exemple, nous pourrions avoir besoin de faire la somme des éléments d’un tableau :

Le résultat sera forcément 15. Comme vous le devinez reduce va réaliser l’opération a+b sur les éléments de notre tableau. A chaque itération, il va ajouter le résultat de l’opération précédente (0 sinon) à l’élément courant.

Vous pouvez bien sur parcourir la liste dans le sens contraire avec le _.reduceRight.

Les plus vigilants d’entre vous soulignerons le fait que nous allons rencontrer un soucis avec le tri _.sortBy( beers, ‘name’), et c’est bien vu.

Revenons à nos bières et essayons d’utiliser le _.reduce :

Tout ceci est à consommer avec modération ! En effet, il faudra choisir l’algorithme dont les performances répondent le mieux à votre “use case”.

Merci, à bientôt.

Share
  • Pierre Fiorelli

    Je conseille l’utilisation de Lazy.js ou RxJS (utilisé dans Angular2) à la place de Lodash, tout simplement car Lodash recré un tableau entre chaque opération, alors que les 2 autres n’en créent pas avant l’appel à une méthode générant un itérable (toArray() pour l’un, subscribe() pour l’autre). Les performances sont donc carrément meilleures!

    • Cyril Lakech

      lodash memoize pour de nombreuses méthodes par défaut ^^