Difference Between indexOf and findIndex function of array

I am confused between the difference between the two function indexOf and find Index in an array.

The documentation says

findIndex - Returns the index of the first element in the array where predicate is true, and -1 otherwise.

and

indexOf - Returns the index of the first occurrence of a value in an array.

Answers:

Answer

The main difference are the parameters of these functions:

  • Array.prototype.indexOf() expects a value as first parameter. This makes it a good choice to find the index in arrays of primitive types (like string, number, or boolean).

  • Array.prototype.findIndex() expects a callback as first parameter. Use this if you need the index in arrays with non-primitive types (e.g. objects) or your find condition is more complex than just a value.

See the links for examples of both cases.

Answer

FindIndex is useful if you want to find the first element that matches to your predicate: In W3C's example, there are numbers and matches if the customer's age above or equals to 18.

var ages = [3, 10, 18, 20];

function checkAdult(age) {
    return age >= 18;
}

console.log(ages.findIndex(checkAdult));

console:

2

You can find an exact element index with the indexOf function of Array, but you can't pass a predicate. It is faster if you want to find a specific element:

var ages = [3, 10, 18, 20];
console.log(ages.indexOf(10));

returns:

1

Index counting starts at 0, so the first element index is 0.

Answer

The main difference are the parameters of these functions:

-> Array.prototype.indexOf() :

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   var a = fruits.indexOf("Apple");
   The result of a will be: 2

->Array.prototype.findIndex() :

       var ages = [3, 10, 18, 20];

       function checkAdult(age) {
        return age >= 18;
       }

       function myFunction() {
         document.getElementById("demo").innerHTML = 
         ages.findIndex(checkAdult);
       }

       The result will be: 2
Answer

You can also use includes:

[1, 2, 3].includes(2);      // true
[1, 2, 3].includes(4);      // false
[1, 2, 3].includes(3, 3);   // false

but I prefer the indexOf method:

var vals = [ "foo", "bar", 42, "baz" ];
if (~vals.indexOf( 42 )) {
  // found it!
}
Answer

Another difference is that with findIndex() the user can apply some function and find the element in the array which passes the test.

But the same is not true with indexOf() operator. A user can just check whether the particular element exists in the array or not.

Answer

Simple - What kind of array structure are you using?

  • If array of objects, findIndex();
  • Else, indexOf().

"I want to find the index in an array of objects, with the key of "Orange".

let fruits = [
   { type: "Apple", quantity: 9 },
   { type: "Banana", quantity: 2},
   { type: "Orange", quantity: 8},
   { type: "Pear", quantity: 777}
];

let myIndex = fruits.findIndex(fruit => fruit.type === "Orange"); // Returns 2.

"I want to find the index in a simple array".

let fruits = [ "Apple", "Banana", "Pear", "Orange"];

let index = fruits.indexOf("Orange"); // Returns 3.
Answer

You can try the codes below:-

let city = ['Delhi', 'mumbai']
const a = city.findIndex((item) => 
item.toLowerCase()==='delhi')
console.log(a) // returns 0

let c = city.indexOf('mumbai') // returns 1
console.log(c)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.