Difference between indexOf and findIndex Function

JavaScript provides several methods to find the index of elements in arrays. Two commonly used methods are indexOf and findIndex. While both return the index of a matching element, they work differently and have distinct use cases.

The indexOf Function

The indexOf method searches for a specific element in an array and returns the first index where it's found. If the element doesn't exist, it returns -1.

Syntax

array.indexOf(element, startIndex)

Parameters

• element: The value to search for
• startIndex (optional): Position to start searching from

Example

const months = ['Jan', 'Feb', 'Mar', 'April', 'May'];

console.log(months.indexOf('Mar'));    // Found
console.log(months.indexOf('Aug'));    // Not found

2
-1

The findIndex Function

The findIndex method returns the index of the first element that satisfies a testing function. It's more flexible than indexOf as it accepts a callback function for custom conditions.

Syntax

array.findIndex(callback(element, index, array), thisArg)

Parameters

• callback: Function to test each element
  • element: Current element being tested
  • index: Index of current element (optional)
  • array: The array being searched (optional)
• thisArg: Value to use as this (optional)

Example with Arrow Function

const colors = ['red', 'green', 'blue', 'yellow', 'orange'];

const index = colors.findIndex(color => color === 'blue');
console.log("The index of 'blue' is: " + index);

The index of 'blue' is: 2

Example with Regular Function

const numbers = [10, 20, 30, 40, 50];

function isGreaterThan25(element) {
    return element > 25;
}

const result = numbers.findIndex(isGreaterThan25);
console.log("First number greater than 25 is at index: " + result);

First number greater than 25 is at index: 2

Key Differences

Working with Objects

The most significant difference appears when working with objects. indexOf uses reference equality, while findIndex can search by object properties.

const obj = {fruit: 'banana', count: 3};
const array = [{fruit: 'mango', count: 7}, obj, {fruit: 'orange', count: 5}];

// indexOf with identical object (different reference)
console.log("indexOf identical object: " + array.indexOf({fruit: 'banana', count: 3}));

// indexOf with actual reference
console.log("indexOf same reference: " + array.indexOf(obj));

// findIndex with property comparison
console.log("findIndex by property: " + array.findIndex(item => item.fruit === 'banana'));

indexOf identical object: -1
indexOf same reference: 1
findIndex by property: 1

Common Use Cases

Use indexOf when:

• Searching for primitive values (strings, numbers, booleans)
• You need exact value matches
• Performance is critical (slightly faster for simple comparisons)

Use findIndex when:

• Searching objects by properties
• Complex search conditions are needed
• You need custom comparison logic

Conclusion

Both indexOf and findIndex return the first matching index or -1 if not found. Use indexOf for simple value searches and findIndex for complex conditions or object property searches.