La méthode Ja­vaS­cript .map

La méthode Ja­vaS­cript .map() vous donne la pos­si­bi­lité d’itérer à travers chaque élément d’un tableau et d’effectuer certaines actions. Le tableau d’origine est ainsi conservé.

Qu’est-ce que Ja­vaS­cript .map() ?

La méthode Ja­vaS­cript .map() crée un nouveau tableau en ap­pli­quant une fonction callback à chaque élément du tableau original. La méthode trans­forme chaque valeur du tableau initial, le résultat étant en­re­gis­tré dans un tableau séparé. Un aspect clé est la non-mutation, ce qui signifie que le tableau d’origine reste inchangé.

La méthode .map() est souvent utilisée pour trans­for­mer tous les éléments d’un tableau. Par exemple, elle peut mettre des éléments au carré, formater des textes, filtrer des objets ou effectuer une multitude d’autres ajus­te­ments. Ainsi, .map() est pratique lorsqu’une mo­di­fi­ca­tion non des­truc­tive des données est souhaitée et assure un code propre et com­pré­hen­sible.

Syntaxe de Ja­vaS­cript .map()

La syntaxe de la méthode .map() consiste en un appel de fonction (fonction callback) sur un tableau :

const newArr = originalArr.map(function(element, index, array) {
    // Code
});

• originalArr : il s’agit du tableau auquel s’applique la méthode .map().
• element : c’est l’élément courant qui est traité pendant l’itération.
• index (optionnel) : c’est l’index de l’élément courant dans le tableau.
• array (optionnel) : il s’agit du tableau d’origine.

Voici un exemple concret :

const nombres = [1, 2, 3, 4, 5];
const nombresAuCarre = nombres.map(function(nombre) {
    return nombre * nombre;
});
console.log(nombresAuCarre); // Résultat : [1, 4, 9, 16, 25]

La fonction callback, passée en argument à Ja­vaS­cript .map(), prend chaque élément du tableau initial nombres et le met au carré. Nous obtenons un nouveau tableau composé des carrés des éléments du tableau initial.

Exemples concrets de .map()

La méthode Ja­vaS­cript .map() permet d’effectuer une multitude d’opé­ra­tions sur les éléments d’un tableau. Voici quelques-uns des scénarios les plus courants :

Filtrer les données

En combinant .map() avec la méthode .filter(), on crée un tableau qui ne contient que les valeurs pour les­quelles la condition donnée est vraie.

const numbers = [1, 2, 3, 4, 5];
const evenNumbersTimesTwo = numbers.filter(num => num % 2 === 0).map(num => num * 2);
// Sortie : [4, 8]

Dans cet exemple, le tableau numbers possède les valeurs de 1 à 5. Nous ap­pli­quons ensuite la méthode .filter(). Le critère de filtrage détermine que le nombre modulo 2 doit être égal à 0, ce qui est vrai pour les nombres pairs. Le résultat est un nouveau tableau qui ne contient que les éléments di­vi­sibles par 2. Le résultat in­ter­mé­diaire est donc [2, 4]. Ensuite, nous utilisons la méthode .map() sur le tableau pour doubler chaque élément. Le résultat final est un tableau dont les éléments peuvent être divisés deux fois par 2, c’est-à-dire [4, 8].

Rendu des listes dans les bi­blio­thèques Ja­vaS­cript

React fait partie des fra­me­works et bi­blio­thèques Ja­vaS­cript les plus po­pu­laires. La fonction .map() est utile pour re­pré­sen­ter des listes dans React. Notez que React utilise la syntaxe JSX.

import React from "react";
import ReactDOM from "react-dom";
const couleurs = ["rouge", "vert", "bleu", "jaune", "orange"];
 
const ListeCouleurs = () => (
  <div>
    <ul>{couleurs.map(couleur => <li key={couleur}>{couleur}</li>)}</ul>
  </div>
);
const elementRacine = document.getElementById("root");
ReactDOM.render(<ListeCouleurs />, elementRacine);

Nous importons les modules React et ReactDOM et créons un tableau appelé couleurs avec dif­fé­rents noms de couleurs. Le composant fonc­tion­nel React ListeCouleurs utilise la méthode Ja­vaS­cript map() pour créer un élément <li> pour chaque couleur. L’attribut key permet une mise à jour efficace par React. Enfin, le composant ListeCouleurs est rendu dans le DOM avec ReactDOM.render et le résultat est ajouté à l’élément DOM avec l’ID root.

Formater les éléments du tableau

La méthode .map() est un moyen simple de formater des éléments comme des chaînes de ca­rac­tères à volonté.

const noms = ["Alice", "Lucas", "Charles"];
const nomsFormates = noms.map(nom => nom.toLowerCase());
// Résultat : ["alice", "lucas", "charles"]

Ici, nous combinons .map() avec la méthode toLowerCase() pour convertir chaque nom en mi­nus­cules. Le résultat est le nouveau tableau nomsFormates, qui contient les noms en mi­nus­cules. Le tableau original noms reste inchangé.