Find dans un array JavaScript : syntaxe et exemples

Quand je travaille sur un projet front-end ou back-end en Node.js, je passe une bonne partie de mon temps à chercher des éléments dans des tableaux. Avant ES6, il fallait écrire des boucles for ou utiliser des bibliothèques comme Lodash pour trouver un élément précis. Depuis l’arrivée de la méthode find(), tout est devenu beaucoup plus simple et lisible.

Dans ce guide, je vous montre comment utiliser find in array javascript de façon concrète, avec des exemples que vous pourrez copier directement dans vos projets. Que vous débutiez ou que vous cherchiez à approfondir vos connaissances, vous trouverez ici tout ce qu’il faut pour maîtriser cette méthode essentielle. Si vous souhaitez consolider vos bases, je vous recommande de consulter mon guide pour apprendre JavaScript en 2026.

Syntaxe complète de la méthode find()

La méthode Array.prototype.find() parcourt un tableau et retourne le premier élément qui satisfait la fonction de test fournie en paramètre. Si aucun élément ne correspond, elle renvoie undefined. C’est un point fondamental à retenir : find() s’arrête dès qu’elle trouve une correspondance.

Voici la syntaxe officielle telle que décrite dans la documentation MDN sur Array.find() :

array.find(function(element, index, array) {
  // condition de recherche
}, thisArg);

La fonction callback reçoit trois paramètres :

• element : l’élément en cours de traitement dans le tableau
• index (optionnel) : l’index de l’élément courant
• array (optionnel) : le tableau sur lequel find() a été appelée

Le second argument thisArg est rarement utilisé en pratique. Il permet de définir la valeur de this à l’intérieur du callback. Dans la grande majorité des cas, j’utilise une arrow function qui rend le code bien plus concis :

const resultat = monTableau.find(element => element > 10);

Cette écriture avec les fonctions fléchées est celle que je recommande systématiquement. Elle est plus courte, plus lisible et évite les problèmes de contexte liés à this.

Utiliser find sur des valeurs primitives

Commençons par les cas les plus simples. Chercher une valeur dans un tableau de nombres ou de chaînes de caractères est le scénario de base pour découvrir find().

Trouver un nombre dans un tableau

const nombres = [3, 7, 12, 5, 22, 8];

// Trouver le premier nombre supérieur à 10
const premierGrand = nombres.find(n => n > 10);
console.log(premierGrand); // 12

// Trouver un nombre pair
const premierPair = nombres.find(n => n % 2 === 0);
console.log(premierPair); // 12

// Chercher un nombre absent
const absent = nombres.find(n => n > 100);
console.log(absent); // undefined

Notez bien que dans le deuxième exemple, le résultat est 12 et non 8. La méthode find() retourne le premier élément qui correspond, pas le dernier. Ce comportement est déterministe : elle parcourt le tableau de l’index 0 à la fin.

Chercher une chaîne de caractères (javascript find string in array)

La recherche de texte dans un tableau fonctionne exactement de la même façon. On peut combiner find() avec des méthodes de chaînes comme includes(), startsWith() ou des expressions régulières :

const fruits = ['pomme', 'banane', 'cerise', 'framboise', 'mangue'];

// Correspondance exacte
const exact = fruits.find(f => f === 'cerise');
console.log(exact); // 'cerise'

// Recherche partielle (contient 'an')
const partiel = fruits.find(f => f.includes('an'));
console.log(partiel); // 'banane'

// Recherche insensible à la casse
const villes = ['Paris', 'Lyon', 'MARSEILLE', 'Toulouse'];
const ville = villes.find(v => v.toLowerCase() === 'marseille');
console.log(ville); // 'MARSEILLE'

Pour une correspondance exacte sur une valeur simple, vous pouvez aussi utiliser includes() directement sur le tableau. Mais dès que la condition devient un peu plus complexe (recherche partielle, insensibilité à la casse), find() est la solution la plus flexible.

Find dans un array d’objets JavaScript

C’est ici que find() montre toute sa puissance. En développement réel, on manipule rarement des tableaux de simples nombres. La plupart du temps, on travaille avec des tableaux d’objets provenant d’une API ou d’une base de données. Si vous souhaitez approfondir la manipulation des objets, mon article sur les objets en JavaScript vous sera utile.

Recherche par propriété

const utilisateurs = [
  { id: 1, nom: 'Alice', age: 28 },
  { id: 2, nom: 'Bob', age: 34 },
  { id: 3, nom: 'Charlie', age: 22 },
  { id: 4, nom: 'Diana', age: 31 }
];

// Trouver par identifiant
const utilisateur = utilisateurs.find(u => u.id === 3);
console.log(utilisateur); // { id: 3, nom: 'Charlie', age: 22 }

// Trouver par nom
const bob = utilisateurs.find(u => u.nom === 'Bob');
console.log(bob.age); // 34

Ce pattern est celui que j’utilise quotidiennement dans mes projets. Quand une API renvoie un tableau d’éléments et que je dois en isoler un par son identifiant, find() est toujours mon premier réflexe.

Recherche avec conditions multiples

On peut combiner plusieurs critères dans le callback pour affiner la recherche :

const produits = [
  { nom: 'Laptop', prix: 999, stock: 5 },
  { nom: 'Souris', prix: 29, stock: 0 },
  { nom: 'Clavier', prix: 79, stock: 12 },
  { nom: 'Écran', prix: 349, stock: 3 }
];

// Produit en stock et coûtant moins de 100 euros
const abordable = produits.find(p => p.prix < 100 && p.stock > 0);
console.log(abordable); // { nom: 'Clavier', prix: 79, stock: 12 }

Notez que la souris correspond au critère de prix mais pas au critère de stock. La méthode find() évalue l’ensemble de la condition avant de retourner un résultat.

Recherche dans des structures imbriquées

const commandes = [
  { id: 'CMD001', client: { nom: 'Dupont', ville: 'Paris' }, total: 150 },
  { id: 'CMD002', client: { nom: 'Martin', ville: 'Lyon' }, total: 280 },
  { id: 'CMD003', client: { nom: 'Durand', ville: 'Paris' }, total: 95 }
];

const commandeLyon = commandes.find(c => c.client.ville === 'Lyon');
console.log(commandeLyon.id); // 'CMD002'

Quand je travaille avec des données imbriquées, j’ajoute souvent une vérification pour éviter les erreurs si une propriété est absente. L’opérateur de chaînage optionnel ?. est parfait pour cela :

const safe = commandes.find(c => c.client?.ville === 'Marseille');
console.log(safe); // undefined (pas d'erreur)

Find vs filter, indexOf et includes : comparatif

JavaScript offre plusieurs méthodes pour chercher dans un tableau. Chacune a son cas d’usage. Voici un comparatif détaillé pour vous aider à choisir la bonne méthode selon votre besoin. Si vous manipulez des collections sans doublons, pensez aussi à l’objet Set en JavaScript qui offre des performances supérieures.

find() vs filter()

La différence majeure est que find() retourne un seul élément et s’arrête immédiatement, tandis que filter() parcourt tout le tableau et retourne un nouveau tableau contenant tous les éléments correspondants. Si vous cherchez un élément unique (par ID par exemple), find() est plus performant car elle court-circuite le parcours.

const nombres = [1, 5, 12, 8, 15, 3, 20];

// find : retourne 12 (le premier > 10)
nombres.find(n => n > 10);    // 12

// filter : retourne [12, 15, 20] (tous les > 10)
nombres.filter(n => n > 10);  // [12, 15, 20]

find() vs indexOf()

indexOf() utilise l’égalité stricte (===) et ne peut pas prendre de callback personnalisé. Pour des valeurs primitives simples, indexOf() fonctionne bien. Mais pour des objets ou des conditions complexes, find() est indispensable :

// indexOf fonctionne pour les primitives
['a', 'b', 'c'].indexOf('b'); // 1

// Mais échoue pour les objets (références différentes)
const objs = [{ id: 1 }, { id: 2 }];
objs.indexOf({ id: 1 }); // -1 (référence différente !)

findIndex() et findLast() : les méthodes complémentaires

La méthode find() fait partie d’une famille de méthodes de recherche qu’il est utile de connaître pour couvrir tous les cas.

findIndex() : obtenir la position

Quand j’ai besoin de l’index plutôt que l’élément, j’utilise findIndex(). La syntaxe est identique à find(), mais elle retourne l’index de l’élément trouvé, ou -1 si rien ne correspond :

const taches = [
  { id: 1, titre: 'Design', terminee: true },
  { id: 2, titre: 'Développement', terminee: false },
  { id: 3, titre: 'Tests', terminee: false }
];

const indexPremierNonTermine = taches.findIndex(t => !t.terminee);
console.log(indexPremierNonTermine); // 1

// Utile pour modifier ou supprimer l'élément
taches[indexPremierNonTermine].terminee = true;

Cette approche est très pratique quand on veut modifier un élément en place dans le tableau, car on a directement accès à son index.

findLast() et findLastIndex() : chercher depuis la fin

Introduites en ES2023, ces méthodes parcourent le tableau en sens inverse. Elles sont supportées par tous les navigateurs modernes depuis fin 2023 selon la spécification ECMAScript officielle :

const transactions = [
  { date: '2026-01-15', montant: 50 },
  { date: '2026-03-22', montant: 120 },
  { date: '2026-05-10', montant: 75 },
  { date: '2026-06-01', montant: 200 }
];

// Dernière transaction supérieure à 100 euros
const derniere = transactions.findLast(t => t.montant > 100);
console.log(derniere); // { date: '2026-06-01', montant: 200 }

// Index de la dernière transaction supérieure à 100
const dernierIndex = transactions.findLastIndex(t => t.montant > 100);
console.log(dernierIndex); // 3

Avant findLast(), il fallait combiner reverse() et find(), ce qui modifiait le tableau original ou nécessitait une copie. Cette nouvelle méthode est plus propre et performante.

Erreurs courantes avec find() et comment les éviter

En plus de dix ans de développement, j’ai vu (et commis) ces erreurs à de nombreuses reprises. Voici les pièges les plus fréquents avec javascript find in array.

Erreur 1 : oublier de gérer undefined

C’est l’erreur la plus classique. Si find() ne trouve rien, elle retourne undefined. Accéder à une propriété sur undefined provoque une TypeError :

const users = [{ id: 1, nom: 'Alice' }];

// DANGER : TypeError si l'utilisateur n'existe pas
const nom = users.find(u => u.id === 99).nom; // TypeError!

// SOLUTION 1 : chaînage optionnel
const nomSafe = users.find(u => u.id === 99)?.nom; // undefined

// SOLUTION 2 : vérification explicite
const user = users.find(u => u.id === 99);
if (user) {
  console.log(user.nom);
} else {
  console.log('Utilisateur non trouvé');
}

Erreur 2 : confondre find() et filter()

J’ai souvent vu des développeurs utiliser filter()[0] au lieu de find(). Ce n’est pas faux, mais c’est inutilement coûteux car filter() parcourt tout le tableau même si le premier élément correspond :

// À éviter (parcourt tout le tableau)
const resultat = monTableau.filter(e => e.id === 5)[0];

// Préférer (s'arrête au premier trouvé)
const resultat2 = monTableau.find(e => e.id === 5);

Erreur 3 : comparer des objets par référence

En JavaScript, deux objets ayant les mêmes propriétés ne sont pas égaux par référence. Il faut comparer les propriétés individuellement :

const panier = [{ id: 1, nom: 'Laptop' }];

// NE FONCTIONNE PAS (comparaison par référence)
panier.find(p => p === { id: 1, nom: 'Laptop' }); // undefined

// FONCTIONNE (comparaison par propriété)
panier.find(p => p.id === 1 && p.nom === 'Laptop'); // { id: 1, nom: 'Laptop' }

Erreur 4 : utiliser find() sur des valeurs nullables

Si votre variable peut être null ou undefined, appeler find() dessus provoquera une erreur. Protégez-vous avec une vérification préalable ou l’opérateur ?? :

// La réponse API peut être null
const data = reponseAPI?.resultats ?? [];
const item = data.find(d => d.actif === true);

Cas pratiques avancés avec find()

Voyons maintenant des exemples concrets tirés de situations réelles que je rencontre dans mes projets professionnels.

Recherche dans un tableau imbriqué (nested array)

Pour chercher un élément dans un tableau de tableaux, il faut combiner find() avec d’autres méthodes. Ce cas se présente souvent quand on gère des catégories contenant des sous-éléments :

const categories = [
  { nom: 'Électronique', produits: ['TV', 'Laptop', 'Téléphone'] },
  { nom: 'Vêtements', produits: ['T-shirt', 'Jean', 'Veste'] },
  { nom: 'Alimentation', produits: ['Pain', 'Lait', 'Fromage'] }
];

// Trouver la catégorie contenant 'Jean'
const categorie = categories.find(c => c.produits.includes('Jean'));
console.log(categorie.nom); // 'Vêtements'

Trouver avec une recherche dynamique

Dans un vrai projet, la valeur recherchée vient souvent d’une variable externe : un paramètre d’URL, un champ de formulaire ou une prop React :

function trouverUtilisateurParEmail(utilisateurs, email) {
  return utilisateurs.find(
    u => u.email.toLowerCase() === email.toLowerCase()
  );
}

const users = [
  { id: 1, email: '[email protected]' },
  { id: 2, email: '[email protected]' }
];

const resultat = trouverUtilisateurParEmail(users, '[email protected]');
console.log(resultat); // { id: 1, email: '[email protected]' }

Combiner find() avec la déstructuration

Une technique que j’affectionne particulièrement est de déstructurer le résultat directement. Cela rend le code très expressif :

const employes = [
  { id: 1, prenom: 'Marie', poste: 'Designer', salaire: 42000 },
  { id: 2, prenom: 'Paul', poste: 'Développeur', salaire: 48000 },
  { id: 3, prenom: 'Lucie', poste: 'Chef de projet', salaire: 52000 }
];

const { prenom, poste } = employes.find(e => e.id === 2) ?? {};
console.log(`${prenom} est ${poste}`); // 'Paul est Développeur'

L’opérateur ?? {} garantit que la déstructuration ne provoque pas d’erreur si find() renvoie undefined.

Utiliser find() avec des Map et des Set

Les structures Map et Set ne possèdent pas de méthode find() native, mais on peut convertir leurs entrées en tableau pour en bénéficier :

const maMap = new Map([
  ['fr', { langue: 'Français', actif: true }],
  ['en', { langue: 'Anglais', actif: false }],
  ['de', { langue: 'Allemand', actif: true }]
]);

const entree = [...maMap.entries()].find(([, val]) => val.actif && val.langue.startsWith('A'));
console.log(entree); // ['de', { langue: 'Allemand', actif: true }]

Pour manipuler des collections sans doublons, pensez à utiliser directement les méthodes de Set en JavaScript qui sont optimisées pour la recherche.

Performances et bonnes pratiques

En termes de complexité algorithmique, find() a une complexité de O(n) dans le pire des cas, car elle parcourt potentiellement tout le tableau. Voici mes recommandations après des années de pratique.

Quand find() est le bon choix

• Tableaux de petite à moyenne taille (jusqu’à quelques milliers d’éléments)
• Recherches occasionnelles sur un critère variable
• Quand la lisibilité du code prime sur la micro-optimisation

Quand envisager une alternative

Si vous effectuez des recherches répétées par identifiant sur un grand tableau, il vaut mieux indexer vos données dans un objet ou une Map :

// Plutôt que de faire find() à chaque fois
const users = [/* milliers d'utilisateurs */];

// Créer un index une seule fois
const userParId = new Map(users.map(u => [u.id, u]));

// Recherche en O(1) au lieu de O(n)
const user = userParId.get(42);

Cette technique d’indexation est celle que j’applique systématiquement dans mes projets Symfony quand je manipule des collections Doctrine côté JavaScript. La différence de performance est significative dès que le tableau dépasse quelques centaines d’éléments et que les recherches sont fréquentes.

Règles que je m’impose

• Toujours gérer le cas undefined avec ?. ou une vérification conditionnelle
• Préférer find() à filter()[0] pour une recherche d’élément unique
• Utiliser findIndex() quand j’ai besoin de modifier l’élément dans le tableau original
• Passer à une Map ou un objet indexé quand les recherches sont fréquentes sur de grands ensembles
• Écrire des fonctions utilitaires typées en TypeScript pour les recherches récurrentes dans le projet

Pour gérer des opérations asynchrones autour de vos recherches, comme des appels API suivis d’un find(), vous pouvez combiner cette méthode avec des intervalles en JavaScript ou des délais d’attente selon votre besoin.