3.2 Rafraîchissement des fonctions de tableau

Après avoir vu les types référence et primitifs, nous faisons un rafraîchissement sur une catégorie de fonctions JavaScript que vous rencontrerez constamment dans React : les fonctions de manipulation de tableau. La plus emblématique d'entre elles est la méthode map, qui permet de transformer chaque élément d'un tableau en un nouvel élément.

La méthode map en bref

  • map() exécute une fonction sur chaque élément du tableau.
  • Elle renvoie un nouveau tableau (l'original reste intact).
  • Très utilisée en React pour afficher des listes.
  • La fonction passée reçoit l'élément en argument.

Imaginons un tableau [1, 2, 3] et l'envie de doubler chaque élément pour obtenir [2, 4, 6]. Au lieu d'écrire une boucle for, on utilise map avec une fonction fléchée qui retourne element * 2. Le tableau original reste inchangé (programmation immutable), et map nous renvoie un nouveau tableau avec les valeurs transformées. 

const numbers = [1, 2, 3];
const doubleNumbers = numbers.map(num => num * 2);

console.log(numbers);        // [1, 2, 3]    (inchangé)
console.log(doubleNumbers);  // [2, 4, 6]    (transformé)

En React, vous utiliserez map en permanence pour transformer un tableau de données (par exemple une liste de dépenses) en un tableau de composants JSX à afficher. C'est la façon idiomatique de rendre des listes dynamiques. D'autres méthodes comme filter, reduce ou find suivent le même principe : elles prennent une fonction et l'exécutent sur chaque élément du tableau. À très bientôt pour la suite du cours.

En résumé

Cette leçon couvre les fonctions de tableau en JavaScript, avec un focus sur la méthode .map() qui permet de transformer chaque élément d'un tableau. Vous apprendrez à utiliser les fonctions flèche pour appliquer une opération (par exemple doubler les nombres) à chaque élément, et à comprendre que .map() retourne un nouveau tableau sans modifier l'original. La leçon clarifie aussi que ces fonctions ne sont pas des features "prochaine génération" mais du JavaScript standard et classique.

Points clés

  • La méthode .map() est une fonction intégrée JavaScript qui transforme chaque élément d'un tableau
  • Les fonctions flèche simplifient la syntaxe : array.map(element => element * 2) pour doubler les nombres
  • .map() crée et retourne un nouveau tableau sans modifier le tableau d'origine
  • La fonction passée à .map() reçoit chaque élément et doit retourner la valeur transformée
  • Ces fonctions de tableau sont du JavaScript standard, pas une feature de prochaine génération

Questions fréquentes

Qu'est-ce que la méthode .map() en JavaScript ?

.map() est une méthode intégrée qui prend une fonction en entrée, l'exécute sur chaque élément du tableau et retourne un nouveau tableau contenant les valeurs transformées. Par exemple, numbers.map(n => n * 2) crée un nouveau tableau avec tous les nombres doublés.

Comment utiliser une fonction flèche avec .map() ?

La syntaxe est array.map(element => action). L'élément représente chaque valeur du tableau, et vous retournez la nouvelle valeur souhaitée. Par exemple, pour doubler : [1, 2, 3].map(x => x * 2) produit [2, 4, 6].

.map() modifie-t-il le tableau original ?

Non, .map() crée et retourne un nouveau tableau. Le tableau d'origine reste inchangé. C'est un point important à retenir quand vous manipulez des données en JavaScript.