Pourquoi utiliser map ?

.map() fait partie des méthodes fondamentales à connaître lorsqu’on travaille avec des tableaux (ou arrays) en JavaScript. Elle permet de transformer un tableau élément par élément, pour en produire un nouveau, de même longueur, selon une logique que vous définissez.

Contrairement à .reduce() (voir mon article ici), qui vise une seule valeur finale, .map() est utilisée quand on souhaite conserver la structure d’un tableau, mais en modifiant le contenu de ses éléments.

Syntaxe de base

array.map(callback);

Le callback est une fonction appelée pour chaque élément du tableau. Sa signature :

(valeurCourante, index, tableau) => nouvelleValeur;

• valeurCourante : l’élément actuel.
• index (optionnel) : sa position dans le tableau.
• tableau (optionnel) : le tableau d’origine.

.map() retourne un nouveau tableau, sans modifier celui d’origine.

Comment fonctionne map étape par étape

Prenons un exemple simple :

const nombres = [1, 2, 3];
const doublés = nombres.map((nombre) => nombre * 2);

Le paramètre du callback est généralement le singulier du nom de l’array. Ici, nous avons notre tableau nombres et nous appliquons donc une transformation pour chaque nombre (une multiplication par 2 dans notre exemple). Si notre array s’était nommé animaux, on aurait nommé notre paramètre animal. Vous pouvez l’appeler comme vous le souhaitez, mais c’est une convention qui rend le code lisible.

Étapes de transformation

Chaque élément est transformé, et le nouveau tableau est construit avec les valeurs retournées.

Cas d’usage concrets

Cas d’usage 1 : Transformer des nombres

const températuresC = [0, 10, 20];
const températuresF = températuresC.map((c) => (c * 9) / 5 + 32);

Résultat : [32, 50, 68]

Ici, chaque élément du tableau est multiplié par 9, divisé par 5 et 32 est ajouté.

Cas d’usage 2 : Extraire une propriété d’objets

const utilisateurs = [
  { prenom: "Alice", age: 25 },
  { prenom: "Bob", age: 30 },
];

const prenoms = utilisateurs.map((utilisateur) => utilisateur.prenom);

Résultat : ["Alice", "Bob"]

Là, on récupère une propriété spécifique de chaque objet. On part de notre tableau utilisateurs et pour chaque utilisateur on affiche le prénom.

Cas d’usage 3 : Formater des données

const fichiers = ["index.html", "style.css", "app.js"];

const avecExtension = fichiers.map((fichier) => {
  const extension = fichier.split(".").pop();
  return { nom: fichier, extension };
});

Résultat :

[
  { nom: "index.html", extension: "html" },
  { nom: "style.css", extension: "css" },
  { nom: "app.js", extension: "js" },
];

Exemple un peu plus technique ! Ici, on transforme chaque string du tableau en objet contenant plus d’infos. On a donc un array fichiers qui contient des noms de fichiers. On crée ensuite une constante extension : .split(".").pop() permet d’obtenir ce qui vient après le point. Donc respectivement pour chaque fichier html, css et js.

Enfin, on retourne un objet qui contient les clés nom (le nom complet du fichier) et extension pour chacun des fichiers.

Maintenant, à votre tour !

Le meilleur moyen de comprendre, c’est de pratiquer ! Je vous ai concocté quelques exercices pour que vous puissiez mettre en application ce que nous venons de voir.

Exercice 1 : Incrémenter chaque nombre

Utilisez .map() pour ajouter +1 à chaque nombre de l’array base.

const base = [1, 2, 3];
// Résultat attendu : [2, 3, 4]

const resultat = base.map((nombre) => nombre + 1);

Exercice 2 : Mettre en majuscules

Écrivez chaque prénom en majuscule.
Astuce : il vous faudra utiliser une méthode native Javascript qui s’applique aux strings.

const prénoms = ["alice", "bob", "charlie"];
// Résultat attendu : ["ALICE", "BOB", "CHARLIE"]

const majuscules = prenoms.map((prenom) => prenom.toUpperCase());

Exercice 3 : Ajouter un index comme ID

À partir d’un tableau contenant des prénoms, créez un nouvel array d’objets. Chaque objet devra contenir deux informations :

• une clé id correspondant au numéro du prénom dans la liste, en commençant par 1
• une clé prenom contenant le prénom

Astuce : rappelez-vous que dans un array, le premier élément a un index qui est 0. Pour que vos identifiants commencent à 1, il suffit d’ajouter 1 à cet index.

const prenoms = ["Luc", "Emma"];
// Résultat attendu : [{ id: 1, prenom: "Luc" }, { id: 2, prenom: "Emma" }]

const avecId = prenoms.map((prenom, index) => ({ id: index + 1, prenom }));

Exercice 4 : Reconstituer des phrases

Ajoutez “Bonjour” devant chaque prénom.

const prenoms = ["Alice", "Bob"];
// Résultat attendu : ["Bonjour Alice", "Bonjour Bob"]

const salutations = prenoms.map((prenom) => `Bonjour ${prenom}`);

Bonnes pratiques

• .map() doit retourner une valeur à chaque itération. Sinon, le tableau résultant contiendra des undefined.
• Préférez .map() à une boucle for lorsque vous voulez créer un nouveau tableau transformé à partir d’un tableau source.
  .map() ne modifie jamais le tableau d’origine : il retourne toujours un nouveau tableau.
• Ne modifiez pas les éléments du tableau original dans le callback. .map() doit être purement fonctionnelle.
• Un point fort de .map() (comme d’autres méthodes d’array) est qu’on peut chaîner plusieurs méthodes pour écrire du code plus expressif et lisible.

En résumé

.map() est un outil puissant et élégant pour transformer des tableaux. Elle vous permet d’écrire du code plus lisible, plus concis et souvent plus performant. Une fois bien comprise, elle devient un réflexe naturel pour toutes vos manipulations de données.

Prenez le temps de vous entraîner : les transformations de tableau sont omniprésentes en développement frontend, et .map() est souvent le point de départ idéal. Lorsque vous maîtriserez cette méthode, pourquoi ne pas apprendre à utiliser reduce ?