Get the Index of Array Element matching a Condition in JS

Get the Index of an Array Element with Condition #

Use the findIndex() method to get the index of an array element that matches a condition. The method takes a function and returns the index of the first element in the array, for which the condition is satisfied. If the condition is never met, the findIndex method returns -1.

Copied!
const arr = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];

// ✅ Index of first occurrence
const index = arr.findIndex(element => {
  if (element.name === 'Charlie') {
    return true;
  }

  return false;
});

console.log(index); // 👉️ 2

The function we passed to the Array.findIndex method gets called with each element in the array until it returns a truthy value or iterates over the entire array.

Truthy values in JavaScript are all values that are not falsy.

The falsy values are: false, null, undefined, 0, "" (empty string), NaN (not a number).

If the callback function returns a falsy value on all iterations, the findIndex method returns -1.

In other words, if the condition was never satisfied, you will get -1 back.

Get the Indexes of all Array Elements matching a condition #

To get all indexes of array elements that match a condition:

1. Use the map() method to iterate over the array.
2. Check if each element matches the condition and return the matching indexes.
3. Use the filter() method to remove all undefined values from the array.

Copied!
const arr = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];

const indexes = arr
  .map((element, index) => {
    if (element.name === 'Alice' || element.name === 'Bob') {
      return index;
    }
  })
  .filter(element => element >= 0);

console.log(indexes); // 👉️ [0 , 1]

The function we passed to the Array.map method gets called with each element in the array.

The return value of the map() method will contain the indexes of the array elements that match the condition and an undefined value for each element that doesn't.

Copied!
const arr = [{name: 'Alice'}, {name: 'Bob'}, {name: 'Charlie'}];

// 👇️ [0, 1, undefined]
console.log(
  arr.map((element, index) => {
    if (element.name === 'Alice' || element.name === 'Bob') {
      return index;
    }
  }),
);

We used the Array.filter method to remove the undefined values from the array.

In the callback we passed to the filter() method, we check if the element is greater or equal to 0.

The filter method returns a new array that contains the indexes of all elements that meet the condition.

Further Reading #

• How to Filter a Map in JavaScript
• Count Elements in Array that match a Condition using JS