Get the index of an Object in an Array in JavaScript

We can find the index of an Object in an Array in JavaScript using the findIndex() and map() methods. Both these methods got added in the ES6 to the Array.Prototype and we can use these methods to get the index of an object in an array.

Before we start exploring the answer to this question, let’s familiarize ourselves with some basic concepts.

Array: An array is an object which contains elements of a similar data type. We can retrieve each element using its location or index. 

Object: An Object is an entity that has a particular state and behaviour

Index: An index is the location that contains the element inside the array. In other words, it is the element’s address. 

Let’s have a look at an array of objects.

*Fact Check: Index values range from [0......n-1], where n is the maximum number of elements.

Find the index of an Object in an Array in JavaScript

This article we will explore two popular methods findIndex() and map() to find the object’s index inside JavaScript Array.

Method 1: Using findIndex() to get the object in the array

The findIndex() method returns the respective index of the component that satisfies a testing function. In case no element passes the test, it returns -1.

The findIndex() stops checking the array for the remaining items once it finds a match returning the first occurence of the element in the array.

findIndex() Syntax

array.findIndex(function(currentValue, index, arr))

findIndex() Parameters

• currentValue(Required): The value of the current element
• index(optional): The index of the current element
• arr(Optional): The array of the current element

Example – Get the index of an object using findIndex() method

const Season = [
  {
    month:'January',
    season: 'Winter',
  },
  {
    month:'March',
    season: 'Spring',
  },
  {
    month:'June',
    season: 'Summer',
  },
  {
    month:'August',
    season: 'Autumn',
  },
]

const index = Season.findIndex( (loopVariable) => loopVariable.month === 'March');
console.log("The index of March Month is",index)

Output

The index of March Month is 1

Here, using the findIndex() with the Season array, which holds data in the form of Javascript objects. We have implemented the arrow function as a call-back with the findIndex() method. We have passed the element to the call-back function, which holds the object’s current value in the array as we loop through.

Note: The findIndex() method is not supported in Internet Explorer. We need to use the Polyfill in order to support Internet Explorer

Solution 2: Using the map() method to get the object index

We can use the map() method to get the index of an object. It creates a new array and calls a function for each element. In case no element matches the condition, it returns -1.

map() Syntax

array.map(function(currentValue, index, arr))

map() Parameters

• function (Required): A function to be run for each array element.
• currentValue(Required): The value of the current element
• index(optional): The index of the current element
• arr(Optional): The array of the current element

Example 1 – Get the index of an object using map() method

const Season = [
  {
    month:'January',
    season: 'Winter',
  },
  {
    month:'March',
    season: 'Spring',
  },
  {
    month:'June',
    season: 'Summer',
  },
  {
    month:'August',
    season: 'Autumn',
  },
]

const index = Season.map( (loopVariable) => loopVariable.month).indexOf
 ("March"));
console.log("The index of March Month is",index)

Output

The index of March Month is 1

Example 2 – map() method when the object is not present in an Array

Since the map() function cannot find an index of the Object “April” in the Season Array, it would return -1

const Season = [
  {
    month:'January',
    season: 'Winter',
  },
  {
    month:'March',
    season: 'Spring',
  },
  {
    month:'June',
    season: 'Summer',
  },
  {
    month:'August',
    season: 'Autumn',
  },
]

const index = Season.map( (loopVariable) => loopVariable.month).indexOf
 ("April"));
console.log("The index of April Month is",index)

Output

The index of April Month is -1

Here, using the map() with the Season array we have implemented the arrow function, as a call-back with the map() method. We are passing the attribute of the object that is under comparison. The indexOf() function compares the given value of the month. 

*Fact check:  This method does not alter the original array.

Conclusion

We can Get the index of an Object in an Array in JavaScript using the findIndex() and map() methods. Both the methods and above-mentioned solutions deliver the same output. The difference lies in the internal working.

The map() method creates a duplicate array while performing the task and iterates through an entire array even if it is the first item in an array. This will add an additional overhead in case of large items.

The findIndex() method will stop stop as soon as it finds the item that we are looking in an array and returns the first occurence of an item. It is similar to indexOf() method.

Hence depending on the use case you need to choose these methods wisely.