Use cases of findIndex(), find() and indexOf() methods in Javascript ES6

Today I had a challenge with array indexes and finding the right element to delete in an application. In this article I want to explain findIndex(), find() and indexOf() methods in Javascript.

findIndex(), find() and indexOf() methods

Definitively we have the descriptions of these three useful methods:

  • With findIndex() method we return the index of the first element in the array that satisfies the provided testing function.
  • Using find() method we return the value of the first element in the array **that satisfies the provided testing function. **
  • Also with indexOf() we return** the first index** at which a given element can be found in the array, or -1 if it is not present.****

Practically we could say the first two methods are similar to each other. Also they could be used in different use cases. Lets check out some examples.

Find index of a fruit with findIndex()

Firstly we will find the index of a fruit inside a fruit array using arrow functions:

const fruits = ["apple", "banana", "cantaloupe", "blueberries", "grapefruit"];<br/>// find the index of the "blueberries"
const index = fruits.findIndex(fruit => fruit === "blueberries");
console.log(index); // 3
console.log(fruits[index]); // blueberries

As a use case this is good when we want to find the first item that matches our condition when it exists in the array. Otherwise, it returns -1, indicating no element passed the test.

Find the odd element with findIndex()

Also this is another example to find the odd element inside an array:

let arr = [2, 4, 6, 8, 9, 10, 12];
// create the function to check if the item is odd
function isOdd(i) {<br/>  return i % 2 !== 0;<br/>}<br/>//return the index
// 4

find index

find it

Find the fruit object with find()

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
// look for fruit with the name property of "cherries"
const result = inventory.find( fruit => === 'cherries' );

console.log(result) // { name: 'cherries', quantity: 5 }

Above example shows how we can find an object inside an array using find() method looking for an object property( name here).

Find the odd element with find() this time

let arr = [2, 4, 6, 8, 9, 10, 12];
// create the function to check if the item is odd
function isOdd(i) {<br/>  return i % 2 !== 0;<br/>}<br/>//return the number this time
// 49

Similar function being passed to find(0 but this time we have found the actual number.

find it

The find() method is great when we are looking for specific items. Note that:

  • the condition must be provided as a function like above
  • find() executes a callback function once for each element in the array until it finds a value that returns true or it returns undefined
  • It does not mutate or change the original Array.

Find an element using indexOf()

Finally take a look at this example to find the element inside the array. If we found the element it updates the array and if not just reports it:

function updateVegetablesCollection (veggies, veggie) {<br/>    // do we have a veggie by id of -1 ? (means does not exist)
    if (veggies.indexOf(veggie) === -1) {
    // add it to array if not
        console.log('New veggies collection is : ' + veggies);
    // already exists? report it then
    } else if (veggies.indexOf(veggie) > -1) {
        console.log(veggie + ' already exists in the veggies collection.');

var veggies = ['potato', 'tomato', 'chillies', 'green-pepper'];

updateVegetablesCollection(veggies, 'spinach'); 
// New veggies collection is : potato,tomato,chillies,green-pepper,spinach
updateVegetablesCollection(veggies, 'spinach'); 
// spinach already exists in the veggies collection.

Nice and sweet. Practically we could use these useful methods in different use cases specifying various conditions. We just need to know which one suits in the situation the best. Find an element value and do something with it using its index with indexOf(). Use find() method to actually find an element passing a function to test the condition. And with findIndex() find out which element first meets your condition as specified. 

Thank you for reading.

© 2020
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.