The indexOf() method is a fundamental JavaScript tool used to locate the position of a specific element within an array. It performs a linear search from the beginning of the array to the end.

1. Basic Syntax

array.indexOf(searchElement, fromIndex)
  • searchElement: The item you are looking for.
  • fromIndex (Optional): The position to start the search from. If this is a negative number, it counts back from the end of the array.

2. Examples

Finding a Value

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

console.log(fruits.indexOf('apple'));  // 0 (returns the FIRST occurrence)
console.log(fruits.indexOf('mango'));  // -1 (not found)

Using a Start Position

You can skip elements by providing a starting index.

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

console.log(fruits.indexOf('apple', 1)); // 3 (starts search at 'banana')

3. Key Characteristics

A. Return Values

  • Returns the first index where the element is found.
  • Returns -1 if the element is not found.

B. Strict Equality (===)

indexOf() compares searchElement to elements of the Array using strict equality. This means it checks both the value and the type.

const arr = [10, "10", 20];

console.log(arr.indexOf(10));   // 0
console.log(arr.indexOf("10")); // 1

C. Finding the First Occurrence Only

If an element appears multiple times, indexOf() stops as soon as it finds the first match.

const letters = ['a', 'b', 'c', 'a', 'b'];
console.log(letters.indexOf('b')); // 1

4. Advanced Behavior: The fromIndex

The second parameter allows you to “skip” parts of the array. This is useful for finding multiple occurrences of the same value.

const scores = [50, 90, 50, 100, 50];

// Find the first 50
const first = scores.indexOf(50); // 0

// Find the next 50 starting from index 1
const second = scores.indexOf(50, 1); // 2

5. Common Pitfalls

Objects and References

indexOf() cannot find an object based on its properties. It only finds an object if you are searching for the exact same reference in memory.

const obj1 = { id: 1 };
const myArr = [obj1, { id: 2 }];

console.log(myArr.indexOf(obj1));      // 0 (Same reference)
console.log(myArr.indexOf({ id: 2 })); // -1 (Different reference, even though content is the same)

The NaN Issue

Because NaN === NaN evaluates to false, indexOf() cannot be used to find NaN.

const list = [1, NaN, 3];
console.log(list.indexOf(NaN)); // -1

6. Critical Details to Remember

1. Strict Equality Comparison

indexOf() uses Strict Equality (===). This means it checks both the value and the type. It also means it cannot find NaN because NaN === NaN is false.

console.log([1, 2, "3"].indexOf(3)); // -1 (Number 3 is not String "3")
console.log([NaN].indexOf(NaN));     // -1

2. Objects and References

When searching for an object or array inside another array, indexOf() only returns a match if you provide a reference to the exact same object in memory.

const obj = { id: 1 };
const list = [obj, { id: 2 }];

console.log(list.indexOf(obj));      // 0 (Exact reference)
console.log(list.indexOf({ id: 1 })); // -1 (A new, different object in memory)

3. Strings vs. Arrays

While strings also have an indexOf() method, the array version is slightly stricter. String indexOf() converts the search element to a string, whereas Array indexOf() does not.

Categorized in:

Javascript Array Methods,