0Pricing
JavaScript Academy · Leçon

map et filter — notions essentielles

Transformez et sélectionnez des données avec map et filter ; enchaînez-les et évitez les mutations pour un code plus sûr

map et filter — notions essentielles est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 2. 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 2 leçons au total.

Introduction à map et filter

Objectif : transformer les éléments avec map et sélectionner des éléments avec filter.

  • map : transformer
  • filter : sélectionner
  • Enchaîner map → filter
  • Aucune modification
map et filter — notions essentielles — illustration 1

Bases de map

map applique une fonction à chaque élément et renvoie un nouveau tableau de même longueur.

// map transforms each value and returns a new array
const nums = [1, 2, 3];

const doubled = nums.map(function (n) {
  return n * 2;
});

console.log("nums:", nums);
console.log("doubled:", doubled);
map et filter — notions essentielles — illustration 2

Bases de filter

filter renvoie uniquement les éléments pour lesquels votre fonction de rappel renvoie true (la longueur peut changer).

// filter keeps values that pass the test
const values = [1, 2, 3, 4, 5];

const evens = values.filter(function (n) {
  return n % 2 === 0;
});

console.log("values:", values);
console.log("evens:", evens);
map et filter — notions essentielles — illustration 3

Exemple d'enchaînement

Combinez les étapes : utilisez map pour transformer, puis filter pour sélectionner.

// Chain methods for clarity
const prices = [4, 7, 10];

// First add tax, then keep items over 8
const withTax = prices.map(function (p) {
  return p * 1.1;
});

const expensive = withTax.filter(function (p) {
  return p > 8;
});

console.log("withTax:", withTax);
console.log("expensive:", expensive);
map et filter — notions essentielles — illustration 4

Démonstration sans modification

Immutabilité : map/filter renvoient de nouveaux tableaux ; l'original reste inchangé.

// map and filter do not mutate the original array
const base = [2, 4, 6];

const plusOne = base.map(function (n) {
  return n + 1;
});

const small = base.filter(function (n) {
  return n < 5;
});

console.log("base:", base);
console.log("plusOne:", plusOne);
console.log("small:", small);
map et filter — notions essentielles — illustration 5

Conseils pour des tableaux clairs

Conseils :

  • Donnez des noms explicites aux petites fonctions de rappel (n, item).
  • Gardez les enchaînements courts (2 ou 3 étapes maximum).
  • Préférez des fonctions de rappel pures, sans effets de bord.
map et filter — notions essentielles — illustration 6

Quiz sur map et filter

Vérification rapide : transformer chaque élément.

map et filter — notions essentielles — illustration 7

Récapitulatif

Récapitulatif : utilisez map pour transformer les valeurs, filter pour en sélectionner certaines, puis enchaînez-les sans modifier le tableau d’origine.

map et filter — notions essentielles — illustration 8

Questions Fréquemment Posées

La leçon « map et filter — notions essentielles » est-elle gratuite ?

Oui — le texte complet de « map et filter — notions essentielles » 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 2 leçons au total.

Qu'est-ce que j'apprendrai dans « map et filter — notions essentielles » ?

Transformez et sélectionnez des données avec map et filter ; enchaînez-les et évitez les mutations pour un code plus sûr 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 1 sur 2.

Combien de temps prend la leçon « map et filter — notions essentielles » ?

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

  1. map et filter — notions essentielles
  2. reduce, some/every, find — modèles simples
← Retour à JavaScript Academy