Javascript, une boîte à outils pour manipuler les tableaux.
Lorsque vous faîtes des travaux, vous utilisez les bons outils au bon moment.
Si vous devez planter un clou, vous utilisez un marteau.
Si vous devez manipuler des boulons, vous pourrez utiliser une clé à molette.
Mais pourquoi n’utiliseriez-vous pas une clé à molette pour planter un clou ? Dans la réalité ça fonctionnerait mais c’est invraisemblable. Ca serait plus long et surtout vous abimeriez votre mur et vos outils.
En informatique c’est pareil, pour chaque tâche, il existe des outils spécifiques afin de ne pas faire de dégâts ailleurs.
Vous entendez sûrement souvent parler de programmation fonctionnelle. L’idée principale est de composer des fonctions pures et d’éviter la mutabilité et les effets de bords. Toute la logique que l’on va mettre en place se base sur ces principes : ne pas altérer les données en entrée et éviter d’interagir avec autre chose que ce dont on a besoin.
Commençons les choses concrètes. Il existe des règles assez simples pour déterminer quelle méthode utiliser au bon moment.
Dans tous les exemples qui suivront, nous utiliserons un tableau de ville. Chaque ville est constituée d‘un nom et d’un nombre d’habitants.
Toutes les méthodes présentées sont immutables, la plupart du temps elle renvoie quelque chose et n’altère pas le tableau manipulé.
Vous ne souhaitez rien renvoyer : forEach.
Commençons par un cas qui n’arrive pas très souvent. On utilise à tort la méthode forEach pour de nombreuses manipulations. Elle doit être utilisée seulement dans le cas où vous ne souhaitez rien renvoyer.
Vous voulez autant d’éléments en entrée qu’en sortie : map.
L’un des cas les plus courants est de transformer chaque élément de notre tableau et d’en créer un nouveau.
La méthode map est la plus adaptée. Map renverra un tableau de la même taille que celui que vous souhaitez manipuler et le remplira de ce que vous avez retourné à chaque itération.
Vous souhaitez filtrer votre tableau ou récupérer un élément en particulier : filter & find.
Je vois souvent passer du code qui combine une condition if et un forEach. Sur le principe ça fonctionne. Le problème ici est la mutabilité. On est obligé de prévoir un tableau que l’on viendra remplir à chaque itération grâce à la méthode push.
Ou encore pire, un if et un map :
Ici on voit que la solution n’est pas du tout adaptée car la réponse renvoyée par notre map est remplie d’undefined. Comme je l’ai expliqué plus tôt, map cherchera toujours à remplir le tableau à chaque itération, si vous ne retournez rien il retournera undefined.
L’idée ici est donc d’utiliser la méthode filter. Cette méthode renverra un nouveau tableau qui contiendra seulement les éléments qui remplissent la condition déterminée par le callback. Filter s’attend à recevoir une valeur truthy ou falsy, et renverra l’itération en cours seulement si elle reçoit une valeur truthy.
Bien plus simple de filtrer notre tableau avec un filter. On récupère ici seulement les villes qui contiennent plus de 5 000 000 d’habitants, comme dans les exemples de ce qu’il ne fallait pas faire mais en bien plus simple et clair !
La méthode find fonctionne dans le même principe mais ne renvoie pas un tableau mais le premier élément répondant à la condition.
Vous souhaitez savoir si votre tableau répond à certaines conditions : some & every.
Dans certains cas, vous souhaitez tester tous les éléments de votre tableau. Pour cela, il existe deux méthodes :
- some : au moins un élément répond à la condition
- every : tous les éléments répondent à la condition
Vous ne voulez pas un tableau en retour : reduce.
J’aime bien comparer le reduce à une balade en forêt. Chaque arbre serait une itération de notre tableau. Le reduce se compose de deux paramètres :
- un callback
- une valeur de démarrage
Le callback prend lui-même quatre arguments en entrée :
- l’accumulateur
- la valeur courante
- l’index
- le tableau que l’on manipule
Les deux premiers paramètres sont les plus importants. L’accumulateur peut être associé à un panier et la valeur courante, quelque chose que l’on découvrirait au pied de l’arbre, un champignon par exemple. On pourrait couper le pied de notre champignon avant de l’ajouter à notre panier, l’accumulateur. Evidemment, il ne faut pas oublier notre panier au pied d’un arbre, il faut donc penser à retourner l’accumulateur à chaque itération. Si on préfère utiliser un sac ou un autre champignon en valeur de départ c’est possible. Dans ce cas, on aura en valeur finale un sac ou un champignon.
Dans ces exemples, on a, par exemple, renvoyé des nombres avec soit la somme des habitants ou leur moyenne. Mais on a également transformé notre tableau en objet et on a renvoyé sous la forme d’une chaîne de caractères les villes ayant plus de 5 000 000 d’habitants, séparées par des virgules.
Reduce est très puissant mais difficile à maîtriser, il répond à de nombreux problèmes. Dès que vous pensez pouvoir l’utiliser, allez-y !
Trompez-vous, galérez mais surtout essayez et expérimentez ! C’est comme ça que vous maitriserez toutes ces méthodes et comment les utiliser au bon moment.
Evidemment, il existe des équivalents à ces méthodes dans d’autres langages.
S’il y a une chose à retenir c’est que si votre code est complexe, mutable, compliqué à tester, il y a de grandes chances que vous n’utilisiez pas les bonnes méthodes pour manipuler vos tableaux. A chaque situation, le bon outil !
Si vous souhaitez plus de détails ou si vous souhaitez aller plus loin, n’hésitez pas à jeter un oeil à cette présentation : https://js-developer-you-should-know-it.netlify.com/#/0
