Comment utiliser .map() en JavaScript

JavaScript prend en charge plusieurs méthodes pour itérer sur des tableaux. Les développeurs utilisent souvent la boucle for traditionnelle et la méthode moins courante .forEach(). Cependant, la méthode la plus populaire est .map(). Cette méthode crée un nouveau tableau en appelant une fonction sur chaque élément du tableau d’origine. Elle évite les mutations et génère des tableaux vraiment « propres ».

Cela diffère des méthodes basées sur la mutation, qui modifient inévitablement le tableau d’origine d’une manière ou d’une autre. Dans cet article, nous allons explorer quatre façons d’utiliser .map() en JavaScript (bien qu’il en existe beaucoup d’autres).

Méthode 1 : Appeler des fonctions sur des éléments individuels du tableau

Lors de l’utilisation de .map() en JavaScript, la fonction de rappel est traitée comme un argument. La valeur de l’élément du tableau au moment de l’exécution devient un paramètre obligatoire de cette fonction. Vous pouvez l’utiliser pour modifier des valeurs ou créer des fonctions.

Exemple :

const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2;
});
console.log(sweeterArray);

Résultat :

[12, 14, 22, 26, 40]

Vous pouvez simplifier et rendre le code plus clair :

const makeSweeter = sweetItem => sweetItem * 2;
const sweetArray = [6, 7, 11, 13, 20];
const sweeterArray = sweetArray.map(makeSweeter);
console.log(sweeterArray);

Résultat :

[12, 14, 22, 26, 40]

L’utilisation de sweetArray.map(makeSweeter) rend le code plus lisible par rapport à la première version.

Méthode 2 : Convertir des chaînes en tableaux

Vous pouvez utiliser la méthode .map() du prototype Array pour convertir des chaînes. Au lieu de travailler directement avec des tableaux, nous utilisons .call() pour appliquer .map() à une chaîne. Gardez à l’esprit qu’en JavaScript, les chaînes peuvent être traitées comme des tableaux de caractères, permettant l’accès à certaines méthodes de tableau.

Exemple :

const name = "Hostman";
const map = Array.prototype.map;
const newName = map.call(name, eachLetter => {
    return `${eachLetter}e`;
});
console.log(newName);

Résultat :

["He", "oe", "se", "te", "me", "ae", "ne"]

Dans cet exemple, .map() est utilisé pour transformer chaque caractère de la chaîne en y ajoutant un « e ». Cela fonctionne de manière similaire à .split() et à d’autres méthodes qui opèrent sur les caractères de chaîne avant de les retransformer en tableau.

Méthode 3 : Rendu de listes dans les bibliothèques JavaScript

Ce cas d’utilisation est courant dans les frameworks JavaScript comme React. Vous aurez besoin de la syntaxe JSX, car .map() y est utilisée. Par exemple :

import React from "react";
import ReactDOM from "react-dom";

const names = ["cloud", "dbaas", "vps", "storage", "kubernetes"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}>{name}</li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

Dans cet exemple, le composant React rend un <div> contenant une liste. La méthode .map() de JavaScript est utilisée pour itérer sur le tableau de noms et générer des éléments de liste individuels. Le rendu est géré par ReactDOM.render sur un élément du DOM ayant l’ID root.

Méthode 4 : Transformer des formats d’objets de tableau

Un autre cas d’utilisation de .map() en JavaScript consiste à transformer chaque objet d’un tableau et à renvoyer un nouveau tableau d’objets modifiés. Cela fonctionne de manière similaire au traitement classique des données.

Exemple :

const myUsers = [
    { name: 'cloud', likes: 'scalability' },
    { name: 'devops', likes: 'automation' },
    { name: 'kube', likes: 'orchestration' }
];
const usersByLikes = myUsers.map(item => {
    const container = {};
    container[item.name] = item.likes;
    container.popularity = item.name.length * 12;
    return container;
});
console.log(usersByLikes);

Résultat :

[
  { cloud: 'scalability', popularity: 60 },
  { devops: 'automation', popularity: 72 },
  { kube: 'orchestration', popularity: 48 }
]

Dans cet exemple, chaque objet du tableau est modifié à l’aide de la notation entre crochets et des affectations de propriétés d’objet. Cette approche est utile pour transformer et condenser les données avant de les utiliser dans des applications côté client.

Conclusion

Nous avons examiné quatre principales façons d’utiliser la méthode .map() en JavaScript. Vous pouvez étendre ses capacités en la combinant avec d’autres méthodes. Pour plus d’informations détaillées, consultez la documentation officielle.