Difference between indexOf and findIndex Function

JavaScript is a dynamic programming language which can be used on both client side and server side. JavaScript is used to create interactive webpages. It has many frameworks such as React JS, Angular JS, Node JS etc. JavaScript provides some methods using which the index of the specified element can be obtained. indexOf and findIndex are those methods.

The indexOf Function in JavaScript

The indexOf function in JavaScript allows us to search for an element in an array and returns the first found index in that array. If it can't find the element, then -1 is returned. The syntax of this method is given below:

array.indexOf(element, index)

Here, array is the list of elements on which indexOf method is performed. Element represents the element which is to be searched and index is the position from where it should start.

Example

Let's consider an array of names of months. We'll use the indexOf method to find the index of the month 'Mar'

const months = ['Jan', 'Feb', 'Mar', 'April', 'May']
console.log (months.indexOf('Mar'))

Output

2

It gives the output index as "2". If the search element is not present in the array, it returns "-1" as output.

Console.log (months.indexOf('Aug'))

As the element is not present in the array months, indexOf function returns "-1".

The findIndex Function JavaScript

The array.findIndex() function of JavaScript is used to return the first found index of the element present in the array when it satisfies the condition that is specified in the function. The element is passed by the user during function call. If the element is not present the array, -1 is returned.

The syntax of findIndex method is given below:

arr.findIndex (func(element, index, arr), thisArg)

Here, "arr" represents the array on which the findIndex function is being performed.

The findIndex method has the following parameters:

• func − This is the callback function in which the condition is specified. It takes the following parameters:

  • o element − It is the current element in an array

  • o index − It is the index of the current element and it is optional

  • o arr − It is also optional that represents the array on which this method is performed

• thisArg − It is an optional value

findIndex method can be used in two ways, i.e., using the "return" keyword and using "inline" function. Here, as we are passing a function to another function, they are known as "callback functions".

Using the "return" Keyword

Let's consider we have an array of colors as red, green, blue, yellow, orange. We want the index of the color yellow.

Example

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

function is_yellow (element) {
   return element === 'yellow'
}
result = colors.findIndex(is_yellow)
console.log ("The index of 'yellow' is: " + result)                        

Output

It will produce the following output:

The index of 'yellow' is: 3

Here, we get the output "3" because the element "yellow" is present at the index position "3".

Using inline Function

The same program mentioned above can also be written as follows:

Example

let colors = ['red', 'green', 'blue', 'yellow', 'orange']

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

Output

It will produce the following output:

The index of color 'blue' is: 2

We get the output "2" because the element 'blue' is present at the 2nd position in the given array.

Difference between indexOf and findIndex Functions

There are two main differences between indexOf and findIndex methods:

First Difference

"indexOf method takes element as an argument; whereas in findIndex method, a call back function is passed as an argument."

Example

The following example explains this point:

const fruits = ['apple', 'banana', 'mango', 'grapes']

console.log("The index of 'banana' is: " + fruits.indexOf('banana'))
console.log ("Index: " + fruits.findIndex(index => index === 'banana'))

Output

It will produce the following output:

The index of 'banana' is: 1
Index: 1

In both the cases, the output is given as "1" as the element "banana" is present at the first index. In indexOf method, the element we are searching for is passed as argument and this function compares every element of the array and returns the 1st position where it finds that element.

In findIndex, this method sends each and every element in the array to the function which will check the array for the specified element. If it finds the element, then it returns a Boolean value, i.e., 'True' and findIndex method returns that specific index.

In both the cases, if the value or element is not present in the array, both the methods return "-1" as output.

Second Difference

The indexOf method works well for fetching the index of simple elements. But, when we are looking for index of more complex things such as an object, this method doesn't work properly. This is because of "referential equality".

According to referential equality, the comparison will return true only when the two objects that are being compared refers to the exact same object. In JavaScript, two identical objects are not same unless they refer to the same object.

Example

Let us understand this by taking the following example:

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

console.log ("Index: " + array.indexOf({banana:3}))  
console.log ("Index: " + array.findIndex(index => index.banana === 3))
console.log ("Index: " + array.indexOf(obj))

Output

It will produce the following output:

Index: -1
Index: 1
Index: 1

In the first indexOf function, even the object is identical, it can't find it in the given array, hence it returns "-1".

In the last indexOf method used, as we are passing the actual reference, it returns the index of that object. The findIndex method checks all the key and value pairs in the given array and hence finds and returns the correct index of that specific object.

Conclusion

Both indexOf and findIndex methods return the first index of the element specified. indexOf method takes the element whose index is to be returned as the argument and findIndex takes a function as an argument. But both the functions return "-1" as output.