6.4 Recherche d'éléments (Types de Références)

La recherche d'objets dans un tableau ne fonctionne pas comme celle des primitives. Tentons une comparaison naïve avec includes.

const courses = [
							  { id: 1, name: 'a' },
							  { id: 2, name: 'b' }
							];
							
							console.log(courses.includes({ id: 1, name: 'a' })); // false ! ?

Le résultat est false, ce qui peut surprendre. La raison : les objets sont des types de référence. L'objet qu'on passe à includes est un nouvel objet en mémoire, distinct de celui présent dans le tableau, même si leurs propriétés sont identiques. includes compare les références, pas le contenu, donc renvoie false.

La méthode find avec un prédicat

Pour chercher un objet par son contenu, JavaScript fournit find. Cette méthode prend en argument une fonction (un prédicat ou callback) qui sera exécutée pour chaque élément du tableau. Le prédicat doit retourner true quand on a trouvé ce qu'on cherche, false sinon.

const course = courses.find(function(course) {
							  return course.name === 'a';
							});
							console.log(course); // { id: 1, name: 'a' }

Si aucun élément ne correspond, find retourne undefined. La recherche s'arrête dès la première correspondance trouvée.

findIndex pour récupérer l'index

Si vous avez besoin de la position dans le tableau plutôt que de l'objet lui-même, utilisez findIndex. Le fonctionnement est identique, seul le retour change : index trouvé ou -1.

const idx = courses.findIndex(c => c.name === 'a');
							console.log(idx); // 0

Notez la syntaxe ramassée avec une arrow function — sujet de la prochaine vidéo. find et findIndex sont à manipuler dès qu'on travaille avec des tableaux d'objets, ce qui est le cas standard dans les applications web modernes.

En résumé

Cette leçon explique pourquoi la recherche dans un tableau d'objets (types de référence) diffère de celle sur les types primitifs. Le transcript démontre que la méthode `.includes()` échoue avec des objets car elle vérifie les références mémoire, puis présente `.find()` et `.findIndex()` comme solutions pour chercher des éléments basés sur des critères spécifiques. Ces méthodes acceptent une fonction callback (prédicat) pour déterminer si un élément correspond au critère recherché.

Points clés

Les objets sont des types de référence : deux objets identiques en contenu restent différents en mémoire
.includes() vérifie la référence exacte, donc ne fonctionne pas pour comparer des objets par valeur
.find() retourne le premier objet qui correspond au critère (ou undefined si absent)
.findIndex() retourne l'index de l'élément trouvé (-1 si absent)
La fonction callback (prédicat) reçoit l'élément et doit retourner true/false
Un nommage explicite du paramètre (ex: 'course' au lieu de 'element') améliore la lisibilité

Questions fréquentes

Pourquoi .includes() retourne-t-il false quand je cherche un objet présent dans mon tableau ?

Parce que .includes() vérifie la référence en mémoire, pas le contenu. Deux objets ayant les mêmes propriétés sont à des adresses mémoire différentes, donc considérés comme différents. Utilisez .find() à la place pour comparer par valeur.

Quelle est la différence entre .find() et .findIndex() ?

.find() retourne l'objet lui-même quand il correspond au critère (ou undefined), tandis que .findIndex() retourne la position de l'élément dans le tableau (ou -1 si absent).

Comment écrire correctement la fonction callback pour .find() ?

Passez une fonction qui reçoit chaque élément en paramètre et retourne true si le critère est respecté. Exemple : `courses.find(course => course.name === 'JavaScript')`. Le paramètre doit décrire son contenu pour plus de clarté.