Filter JavaScript : Comment Filtrer un Tableau ?

Vous devez extraire des données d’un tableau JavaScript sans vous compliquer la vie ? La méthode `filter()` est la solution.

Ce guide vous apprend à filtrer n’importe quel tableau avec des exemples simples à copier-coller.

Exemple concret : filtrer les nombres d’un tableau

Avant d’entrer dans la théorie, voyons un exemple simple. Le but est de prendre un tableau de nombres et de créer un nouveau tableau contenant uniquement les valeurs supérieures à 10.

const nombres = [12, 5, 8, 130, 44];

const nombresFiltres = nombres.filter(function(nombre) {
  return nombre > 10;
});

// Affiche le résultat dans la console
console.log(nombresFiltres);
// Résultat attendu : [12, 130, 44]

Ici, la méthode `filter()` parcourt chaque élément du tableau `nombres`. Pour chaque nombre, elle exécute la fonction qu’on lui a donnée. Si la fonction renvoie `true` (ici, si `nombre > 10`), l’élément est conservé dans le nouveau tableau `nombresFiltres`.

Comprendre la syntaxe de array.filter()

La syntaxe de la méthode `filter()` est assez directe. Elle prend en argument une fonction, qu’on appelle « fonction de rappel » (ou callback).

array.filter(function(currentValue, index, arr), thisValue)

Cette `function` est le cœur du filtrage. C’est elle qui décide si un élément doit être gardé ou non.

Les paramètres en détail

La fonction de rappel reçoit trois arguments pour chaque élément du tableau :

• `currentValue` (requis) : C’est l’élément du tableau en cours de traitement. Dans notre premier exemple, c’était `nombre`.
• `index` (optionnel) : C’est la position (l’index) de l’élément `currentValue` dans le tableau d’origine.
• `arr` (optionnel) : C’est le tableau complet sur lequel la méthode `filter()` est appelée.

Il existe un second paramètre, plus rare, pour la méthode `filter()` elle-même :

• `thisValue` (optionnel) : Une valeur à utiliser comme `this` lorsque la `function` de rappel est exécutée. Par défaut, sa valeur est `undefined`.

La valeur de retour

La méthode `filter` ne change jamais le tableau de départ. Elle renvoie toujours quelque chose :

• Un nouveau tableau contenant uniquement les éléments qui ont passé le test.
• Une copie superficielle (shallow copy) des éléments qui correspondent.
• Un tableau vide si aucun élément ne correspond au critère de filtrage.

Exemples d’utilisation courants de `filter()`

Maintenant que la syntaxe est claire, voyons des cas pratiques. C’est en utilisant `filter` qu’on comprend vraiment sa puissance.

Filtrer un tableau d’objets

L’un des usages les plus fréquents est de filtrer un tableau d’objets en fonction de la valeur d’une de leurs propriétés. Imaginons une liste de personnages et nous voulons garder uniquement ceux de la maison Stark.

const personnages = [
  { nom: 'Jon Snow', maison: 'Stark' },
  { nom: 'Cersei Lannister', maison: 'Lannister' },
  { nom: 'Arya Stark', maison: 'Stark' },
  { nom: 'Daenerys Targaryen', maison: 'Targaryen' }
];

const starks = personnages.filter(function(personnage) {
  return personnage.maison === 'Stark';
});

console.log(starks);
/* Résultat attendu :
[
  { nom: 'Jon Snow', maison: 'Stark' },
  { nom: 'Arya Stark', maison: 'Stark' }
]
*/

La `function` de rappel accède simplement à la propriété `maison` de chaque objet `personnage` et vérifie si elle est égale à ‘Stark’.

Créer une fonction de recherche simple

La méthode `filter()` est parfaite pour implémenter une barre de recherche. On peut filtrer un tableau de chaînes de caractères pour trouver les éléments qui contiennent un certain mot, sans se soucier de la casse (majuscules/minuscules).

const fruits = ["Pomme", "Banane", "Raisin", "Mangue", "Orange"];
const recherche = 'an';

const resultatRecherche = fruits.filter(function(fruit) {
  // On met tout en minuscules pour une recherche insensible à la casse
  return fruit.toLowerCase().includes(recherche.toLowerCase());
});

console.log(resultatRecherche);
// Résultat attendu : ["Banane", "Mangue", "Orange"]

Ici, on combine `filter` avec deux autres méthodes :

• `toLowerCase()` : Pour que la recherche ne dépende pas de la casse.
• `includes()` : Pour vérifier si la chaîne de caractères contient le terme recherché.

Nettoyer un tableau de données

Quand on récupère des données depuis une API, elles sont souvent imparfaites. Il peut manquer des `id`, ou certaines valeurs peuvent être invalides (`null`, `undefined`). On peut utiliser `filter()` pour nettoyer ce tableau.

Le but : ne conserver que les objets qui ont un `id` numérique valide.

const data = [
  { id: 1, nom: 'Produit A' },
  { id: null, nom: 'Produit B' },
  { nom: 'Produit C' }, // pas de propriété id
  { id: 2, nom: 'Produit D' },
  { id: 'trois', nom: 'Produit E' } // id non numérique
];

const dataValide = data.filter(function(item) {
  // Number.isFinite vérifie que la valeur est un nombre et n'est pas Infinity
  return Number.isFinite(item.id);
});

console.log(dataValide);
/* Résultat attendu :
[
  { id: 1, nom: 'Produit A' },
  { id: 2, nom: 'Produit D' }
]
*/

On utilise ici `Number.isFinite()`, une méthode sûre pour vérifier si une valeur est bien un nombre fini. C’est une excellente pratique pour le nettoyage de données.

Cas d’usage avancés et comportements spécifiques

La méthode `filter()` a quelques particularités qu’il est bon de connaître pour des situations plus complexes.

`filter()` et les tableaux creux (sparse arrays)

Un tableau creux est un tableau avec des emplacements vides. La méthode `filter()` ignore simplement ces cases vides. La fonction de rappel n’est jamais exécutée pour elles.

// Attention à la virgule seule qui crée un emplacement vide
const tableauCreux = [1, , 3, undefined, 5];

console.log(tableauCreux.length); // Affiche 5

const resultat = tableauCreux.filter(function(element) {
  // Cette fonction sera appelée 4 fois, pas 5.
  console.log('Test sur :', element);
  return true; // On garde tout pour voir ce qui est traité
});

console.log(resultat);
// Résultat attendu : [1, 3, undefined, 5]

Utiliser `filter()` sur des objets qui ne sont pas des tableaux

La méthode `filter()` est dite « générique ». Elle ne fonctionne pas seulement sur les `array`. Elle peut être utilisée sur des objets qui ressemblent à des tableaux, c’est-à-dire qui ont une propriété `length` et des clés numériques.

Pour faire ça, on doit utiliser `Array.prototype.filter.call()`.

const objetSimilaireTableau = {
  length: 3,
  0: { nom: 'Alice', age: 30 },
  1: { nom: 'Bob', age: 17 },
  2: { nom: 'Charlie', age: 25 }
};

const personnesMajeures = Array.prototype.filter.call(objetSimilaireTableau, function(personne) {
  return personne.age >= 18;
});

console.log(personnesMajeures);
// Résultat attendu : [{ nom: 'Alice', age: 30 }, { nom: 'Charlie', age: 25 }]

Cette technique est plus avancée, mais elle montre que `filter` est flexible. Elle lit la propriété `length` et accède aux éléments via leurs clés numériques, comme elle le ferait pour un vrai `array`.

Aller plus loin : combiner `filter()` avec d’autres méthodes

La vraie force des méthodes de tableau en JavaScript vient de leur capacité à être enchaînées. `filter()` est souvent la première étape d’une série d’opérations.

Par exemple, on peut vouloir filtrer des utilisateurs actifs, puis extraire uniquement leurs noms.

const utilisateurs = [
  { nom: 'Sarah', actif: true },
  { nom: 'Marc', actif: false },
  { nom: 'Lucie', actif: true }
];

// On enchaîne filter() et map()
const nomsActifs = utilisateurs
  .filter(function(user) {
    return user.actif === true;
  })
  .map(function(user) {
    return user.nom;
  });

console.log(nomsActifs);
// Résultat attendu : ["Sarah", "Lucie"]

D’autres méthodes de tableau se combinent très bien avec `filter()` :

• `map()` : Pour transformer chaque élément du tableau filtré.
• `sort()` : Pour trier le tableau filtré.
• `reduce()` : Pour calculer une valeur unique à partir du tableau filtré.
• `every()` et `some()` : Pour vérifier si tous ou certains éléments du tableau filtré respectent une condition.

Ce qu’il faut retenir

La méthode `array.filter()` est un outil essentiel pour tout développeur JavaScript. Elle permet de manipuler des listes de données de manière claire et efficace.

Voici les points clés :

• Elle crée un nouveau tableau à partir d’un tableau existant.
• Elle ne modifie jamais le tableau d’origine.
• Elle utilise une fonction de rappel (`callback function`) pour tester chaque élément.
• Si la fonction de rappel renvoie `true`, l’élément est gardé ; sinon, il est écarté.
• Elle se combine parfaitement avec d’autres méthodes comme `map()`, `sort()` ou `reduce()`.

Maîtriser `filter` vous fera gagner beaucoup de temps et rendra votre code plus lisible et plus sûr.