JavaScript Academy · Leçon

Transformation déclarative des données

Transformez les données avec map, filter et reduce.

Transformation déclarative des données est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Déclaratif ou impératif

Le code impératif indique HOW (boucles, compteurs, modifications). Le code déclaratif indique WHAT. Les méthodes de tableau comme map, filter et reduce permettent de décrire des transformations sans écrire manuellement de boucles.

const nums = [1, 2, 3, 4];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // [2, 4, 6, 8]

map : transformer chaque élément

map renvoie un nouveau tableau de même longueur, dont chaque élément est transformé par votre fonction. Le tableau original reste intact.

const names = ["ada", "bob"];
const upper = names.map((n) => n.toUpperCase());
console.log(upper); // ["ADA", "BOB"]
console.log(names); // unchanged

filter : conserver certains éléments

filter renvoie un nouveau tableau contenant uniquement les éléments pour lesquels votre prédicat renvoie une valeur considérée comme vraie.

const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0);
console.log(evens); // [2, 4, 6]

reduce : regrouper en une seule valeur

reduce réduit un tableau à une seule valeur par accumulation. Fournissez-lui une fonction de réduction et une valeur initiale.

const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

Chaîner les opérations

Comme chaque méthode renvoie un nouveau tableau, vous pouvez les enchaîner dans une chaîne de traitement lisible qui se parcourt de haut en bas.

const nums = [1, 2, 3, 4, 5, 6];
const result = nums
  .filter((n) => n % 2 === 0)
  .map((n) => n * 10);
console.log(result); // [20, 40, 60]

Une chaîne de traitement réaliste

Combinez filter, map et reduce pour répondre à une question sur un jeu de données dans une seule expression.

const orders = [
  { item: "pen", price: 3, paid: true },
  { item: "ink", price: 8, paid: false },
  { item: "pad", price: 5, paid: true }
];
const paidTotal = orders
  .filter((o) => o.paid)
  .map((o) => o.price)
  .reduce((a, p) => a + p, 0);
console.log(paidTotal); // 8

Transformer en nouvelles formes

map peut remodeler des objets, pas seulement des nombres. Projetez chaque enregistrement sur les champs qui vous intéressent.

const users = [{ id: 1, name: "Ada", age: 36 }];
const summary = users.map((u) => ({ id: u.id, label: u.name }));
console.log(summary); // [{ id: 1, label: "Ada" }]

reduce peut tout construire

reduce ne sert pas uniquement à calculer des sommes. Il peut construire des objets, regrouper des données ou même réimplémenter map et filter.

const words = ["a", "bb", "a", "ccc"];
const counts = words.reduce((acc, w) => {
  acc[w] = (acc[w] || 0) + 1;
  return acc;
}, {});
console.log(counts); // { a: 2, bb: 1, ccc: 1 }

L’ordre est important

Filtrer avant de transformer évite de transformer des éléments que vous allez supprimer. Placez les filtres peu coûteux au début de la chaîne pour gagner en clarté et en efficacité.

const data = [1, 2, 3, 4, 5];
const out = data
  .filter((n) => n > 2)   // shrink first
  .map((n) => n * n);     // then transform
console.log(out); // [9, 16, 25]

Aucune modification nulle part

Ces méthodes ne modifient jamais le tableau source. Les chaînes de traitement sont ainsi sûres et prévisibles, ce qui correspond parfaitement au style fonctionnel.

const src = [3, 1, 2];
const sorted = [...src].sort((a, b) => a - b);
console.log(sorted); // [1, 2, 3]
console.log(src);    // [3, 1, 2] untouched

flatMap pour les résultats imbriqués

Lorsqu’un map produit des tableaux, flatMap applique map et aplatit un niveau en une seule étape.

const pairs = [1, 2, 3].flatMap((n) => [n, n * 10]);
console.log(pairs); // [1, 10, 2, 20, 3, 30]

Vérification rapide

Transformations déclaratives.

Récapitulatif

Une transformation déclarative décrit WHAT, et non HOW. map transforme, filter sélectionne et reduce regroupe en une seule valeur ; enchaînez-les dans des chaînes de traitement lisibles. Aucune de ces méthodes ne modifie la source, filtrer tôt est efficace et reduce peut construire n’importe quelle structure. Utilisez flatMap lorsqu’un map produit des tableaux.

Questions Fréquemment Posées

La leçon « Transformation déclarative des données » est-elle gratuite ?

Oui — le texte complet de « Transformation déclarative des données » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Transformation déclarative des données » ?

Transformez les données avec map, filter et reduce. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Transformation déclarative des données » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy