6.4 Finding Elements (References Types)

Searching reference types — objects, arrays, functions — is different from searching primitives. Take an array of course objects, each with an id and a name: 

const courses = [
  { id: 1, name: "a" },
  { id: 2, name: "b" }
];

courses.includes({ id: 1, name: "a" }); // false ❗

Even though the literal looks identical, includes returns false. The reason: objects are compared by reference. The object you pass to includes is a brand-new object stored at a different memory location than the one already inside the array.

find and findIndex

  • courses.find(predicate) — returns the first element for which the predicate function returns true, or undefined.
  • courses.findIndex(predicate) — returns the index of the first matching element, or -1.
  • The predicate (also called a callback) receives each element and returns a boolean.
const course = courses.find(function (course) {
  return course.name === "a";
});

const index = courses.findIndex(function (course) {
  return course.name === "xyz";
});
console.log(course, index);  // { id: 1, name: "a" }   -1

The predicate gets called once per element until it returns true; that element becomes the result. If no element matches, find returns undefined and findIndex returns -1. In the next video we'll rewrite this predicate using an arrow function — much shorter to write.

Summary

This lesson explores the difference between searching for primitive types versus reference types in JavaScript arrays. You'll learn why the `includes()` method fails when searching for objects in arrays, and discover how to use the `find()` and `findIndex()` methods with callback functions to properly locate objects based on their properties. These methods are essential for working with reference types since they compare object references rather than values.

Key points

  • Primitive vs Reference Types: The `includes()` method works for primitive types but fails for objects because objects are compared by reference, not by value—two objects with identical properties have different memory locations.
  • The find() Method: Returns the first object in an array that matches a given predicate function, or `undefined` if no match is found.
  • Callback Functions (Predicates): The `find()` method requires a callback function that evaluates each element and returns `true` or `false` to determine if it matches your criteria.
  • The findIndex() Method: Works exactly like `find()` but returns the index position of the matching element instead of the object itself, returning `-1` if not found.
  • Code Readability: When iterating through objects, naming the callback parameter explicitly (e.g., `course` instead of `element`) improves code clarity and understanding.

FAQ

Why does `includes()` return `false` when searching for objects?

Objects are reference types, so `includes()` compares object references in memory, not their contents. Two objects with identical properties are different references in memory, so `includes()` returns `false` even though the objects look the same.

What is the difference between `find()` and `findIndex()`?

`find()` returns the actual object that matches the predicate function, while `findIndex()` returns the index position. If no match is found, `find()` returns `undefined` and `findIndex()` returns `-1`.

What is a predicate function?

A predicate is a callback function passed to `find()` that evaluates each element in the array and returns a boolean value—`true` if the element matches your search criteria, `false` otherwise.