Array.find() en JavaScript : récupérer le premier élément qui correspond

Retrouver un client par son identifiant, la première commande impayée, la ligne d'un tableau qui porte un drapeau : à chaque fois, on cherche un élément et un seul, et on veut s'arrêter dès qu'il est trouvé.

find fait exactement cela, là où un filtre parcourrait tout le tableau pour n'en garder qu'une case.

Définition

find est une méthode d'Array (tableau) qui rend le premier élément pour lequel la fonction répond vrai, puis cesse le parcours. Si aucun élément ne passe, elle rend undefined.

const clients = [
  { id: 1, email: "ada@site.fr" },
  { id: 2, email: "alan@site.fr" },
];

console.log(clients.find((c) => c.id === 2).email);   // "alan@site.fr"
console.log(clients.find((c) => c.id === 99));        // undefined

Ce que find rend est l'élément lui-même, pas un tableau d'un élément. Écrire filter(...)[0] donne le même résultat, mais parcourt tout et fabrique un tableau intermédiaire au passage.

Traiter le cas absent

L'undefined rendu est la source d'erreur la plus fréquente : lire une propriété dessus lève aussitôt une TypeError. Deux opérateurs suffisent à s'en protéger.

const trouve = clients.find((c) => c.id === 99);

console.log(trouve?.email ?? "inconnu");   // "inconnu"

Le Chaînage optionnel (?.) arrête la lecture si la valeur est absente, et la Coalescence des nuls (??) fournit la valeur de repli. Sans eux, il faut un if explicite, ce qui reste préférable quand l'absence mérite un traitement propre.

La famille complète

La dernière ligne compare avec l'Égalité stricte (===), ce qui la réserve aux valeurs simples : sur des objets, elle ne retrouve que la référence exacte. Pour chercher sur un critère, il faut find ou findIndex.

findLast parcourt le tableau depuis la fin, ce qui évite de retourner une copie pour atteindre la dernière ligne d'un journal ou le dernier paiement accepté.

Questions fréquentes

C'est la limite de find : un tableau contenant réellement undefined rend la même chose dans les deux cas. Passez alors par findIndex, dont le -1 ne peut pas être confondu avec une valeur du tableau.

Cela dépend de ce dont vous avez besoin ensuite. some répond par oui ou non et suffit à un test, find rapporte l'élément. Les deux s'arrêtent au premier succès, donc le choix se joue sur la lisibilité, pas sur la vitesse.

Pas directement, un objet n'étant pas un tableau. On passe par Object.entries, qui rend un tableau de paires clé-valeur, puis on applique find sur la seconde case de chaque paire. Sur une collection consultée souvent, une structure Map évite ce détour et retrouve l'entrée sans parcourir quoi que ce soit.