# La méthode JavaScript .map

La méthode JavaScript `.map()` vous donne la possibilité 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 JavaScript `.map()` ?

La méthode JavaScript `.map()` crée un nouveau tableau en appliquant une **fonction *callback*** à chaque élément du tableau original. La méthode transforme chaque valeur du tableau initial, le résultat étant enregistré 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 **transformer 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 ajustements. Ainsi, `.map()` est pratique lorsqu’une modification non destructive des données est souhaitée et assure un code propre et compréhensible.

## Syntaxe de JavaScript `.map()`

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

```javascript
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 :

```javascript
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 à JavaScript `.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 JavaScript `.map()` permet d’effectuer une multitude d’opérations 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 lesquelles la condition donnée est vraie.

```javascript
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 appliquons 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 divisibles par 2. Le résultat intermé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 bibliothèques JavaScript

React fait partie des frameworks et bibliothèques JavaScript les plus populaires. La fonction `.map()` est utile pour représenter des listes dans React. Notez que React utilise la syntaxe **JSX**.

```javascript
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 différents noms de couleurs. Le **composant fonctionnel React** `ListeCouleurs` utilise la méthode JavaScript `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 caractères à volonté.

```javascript
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 minuscules. Le résultat est le nouveau tableau `nomsFormates`, qui contient les noms en minuscules. Le tableau original `noms` reste inchangé.


This is a markdown version of: [https://www.ionos.com/fr-be/digitalguide/sites-internet/developpement-web/javascript-map/](https://www.ionos.com/fr-be/digitalguide/sites-internet/developpement-web/javascript-map/) for AI/LLM consumption.