Mastering Array.reduce

•

Array.reduce n'est pas assez utilisé... Pourtant, c'est juste un game changer quand tu le comprends 🚀 Je te donne toutes les clés pour le maîtriser dans ce thread 👇

C'est quoi reduce ? C'est une fonction des array ([].reduce) qui permet de réduire une liste à une valeur ! Le meilleur moyen de l'apprendre est la doc MDN : developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Mais je vais essayer d'encore plus vulgariser le sujet qu'eux !

En comparaison, avec .map un tableau de 7 éléments retournera toujours 7 éléments avec .filter le tableau sera toujours plus petit ou égal qu'avant avec .find ce sera toujours un élément du tableau et avec .reduce un tableau de 7 éléments fera un objet, une string ou un nombre

donc le but de reduce est de réduire un tableau à 1 nouvelle valeur ! .reduce est toujours appelé sur un tableau mais il peut retourner: un nombre une string un autre tableau un objet un boolean !?

Bref, il est ultra-libre Maintenant parlons de son API : Reduce prend 2 paramètres Le premier c'est le callback : la fonction qui va être appelée pour chaque entrée de ton tableau

Lui-même demande minimum 2 paramètres : 1. "accumulateur" (point 1) qui représente la valeur sauvegardée entre chaque itération (= acc) 2. "current value" (point 2) qui représente la valeur de l'itération courante Puis le point 3 se nomme la `valeurInitiale` !

C'est la valeur initiale de l'acc si elle est définie (car facultatif). Si aucun argument n'est donné, ce sera le premier élément de notre tableau comme valeur initiale et on va "skipper" la première valeur dans le callback.

[1,2,3] avec une valeur initiale de 0, cela revient à faire [0,1,2,3] donc il fait un tour de boucle en plus avec une valeur initiale à 0 ! Si tu regardes l'index, tu verras que sans initiale value l'index de départ = 1 donc un tour de boucle est déjà fait

assez normal car il prend l'index 0 pour le mettre comme initial value en conclusion : l'acc va accumuler des données sa valeur par défaut est définie par le second paramètre ou s'il est vide par le premier élément du tableau

si tu as un tableau vide et que tu ne mets pas de valeur par défaut, tu auras une erreur ! Logique car il prend le premier élément de rien !

🚀 Le meilleur moyen de le comprendre c'est de le refaire de A à Z. Dans BeginJavaScript, je me suis amusé à refaire faire au membre toutes les méthodes de tableau pour comprendre comment elle fonctionne. Reçois un cours gratuit sur les tableaux : codelynx.dev/beginjavascript/array

Analysons son fonctionnement ! Dans la première itération l'index est 0 et la valeur de l'acc est égale à la valeur de initialValue comme on l'a vu avant. Avec la valeur 0 ce tour de boucle est totalement inutile, mais pour que vous compreniez bien, je l'ai rajouté !

Donc 0 + 1 fait 1 et donc l'acc vaut 1 pour l'index 1 l'acc est additioné à 2, ce qui donne 3 dans l'index 2 on additionne 3 à 3 donc 6 puis, dans le dernier index on ajoute 4 ce qui donne 10 comme réponse finale

Bon voilà je pense que tu es encore perdu donc je referai la fonction reduce en js simple ! J'ai ajouté des explications sur l'image mais mon reduce fonctionne exactement comme le reduce par défaut ici ! Pas si complexe finalement hihi

3 exemples pour t'aider à comprendre ! Tu as envie d'additionner tous les nombres d'un tableau ? reduce !

tu veux transformer un tableau 2 dimensions avec 2 éléments par index en objet ? reduce !

Tu souhaites avoir créé le groupBy à la mysql ? Reduce ! (source: developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#regrouper_des_objets_selon_une_propri%C3%A9t%C3%A9 developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce#regrouper_des_objets_selon_une_propri%C3%A9t%C3%A9)

🚀 Même si je l'ai fais, le mieux c'est que tu refasses de ton côté la function reduce de A à Z. Reçois un cours gratuit sur les tableaux : codelynx.dev/beginjavascript/array