Finding Elements: indexOf, includes, find

Med

JavaScript provides multiple ways to search arrays: indexOf/lastIndexOf for primitive searches, includes for presence checking, and find/findIndex for predicate-based searches. Understanding the differences between strict equality (for primitives) and reference equality (for objects) is crucial for correct array searching.

Interactive Visualization

mutation Methods

1
2
3

Key Points

  • indexOf/lastIndexOf - search by value, returns index or -1
  • includes - search by value, returns boolean
  • find/findIndex - search by predicate function
  • All use strict equality (===) for comparison
  • Object comparison is by reference, not value
  • find returns element, findIndex returns index

Code Examples

indexOf and includes

const fruits = ['apple', 'banana', 'cherry', 'banana'];

// indexOf - returns first match index or -1
console.log(fruits.indexOf('banana'));      // 1
console.log(fruits.indexOf('grape'));       // -1
console.log(fruits.lastIndexOf('banana'));  // 3

// includes - returns boolean
console.log(fruits.includes('apple'));   // true
console.log(fruits.includes('grape'));   // false

// From index
console.log(fruits.indexOf('banana', 2));  // 3 (start at index 2)

// NaN behavior (special case)
console.log([NaN].indexOf(NaN));      // -1 (bug!)
console.log([NaN].includes(NaN));     // true (fixed!)

indexOf returns index, includes returns boolean. includes fixes NaN comparison.

Object Reference Problem

const obj = { id: 1, name: 'Alice' };
const users = [obj, { id: 2, name: 'Bob' }];

// Searching by reference works
console.log(users.indexOf(obj));  // 0
console.log(users.includes(obj)); // true

// Searching by "equal value" does NOT work
const searchFor = { id: 1, name: 'Alice' };
console.log(users.indexOf(searchFor));  // -1
console.log(users.includes(searchFor)); // false

// Objects are compared by reference, not value!
console.log(obj === searchFor);  // false (different objects)

Objects are compared by reference. Two objects with same properties are not equal.

find and findIndex with Objects

const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Carol' }
];

// find - search by predicate
const bob = users.find(user => user.name === 'Bob');
console.log(bob);  // { id: 2, name: 'Bob' }

const dave = users.find(user => user.name === 'Dave');
console.log(dave);  // undefined

// findIndex
const bobIndex = users.findIndex(user => user.id === 2);
console.log(bobIndex);  // 1

// Practical: update if found
const targetId = 2;
const user = users.find(u => u.id === targetId);
if (user) {
  user.name = 'Bobby';
}

Use find/findIndex with predicate functions to search objects by property values.

Common Mistakes

  • Using indexOf/includes to find objects by value (compares reference)
  • Not handling undefined return from find()
  • Forgetting that NaN !== NaN with indexOf
  • Not using find when searching objects

Interview Tips

  • Know indexOf vs includes difference
  • Understand reference equality for objects
  • Use find/findIndex for object searches
  • Know the NaN indexOf bug