Blog / Javascript

How to get the index of an object in an array in JavaScript

How to get the index of an object in an array in JavaScript

Find out how to get the index of an object in an array in JavaScript using findIndex and indexOf as well as how referential equality effects it.

Will MaygerWill Mayger
August 24, 2021
Article

Finding the index of an object in an array in JavaScript is a little different from finding the index of a string or a number because when you compare objects in JavaScript you need to keep in mind something called referential equality.

In this post we will cover how to get the index of an object in an array in JavaScript, what referential equality is and how to get the index of an object in an array in JavaScript if you do have referential equality.

A quick note before we get started, if you want a more in-depth guide to How to get the index of an item in an array in JavaScript using indexOf, I have just finished writing a post here all about it.

Let’s get started.

How to get the index of an object in an array in JavaScript

To get the index of an object in an array in javascript we need to use the Array.prototype.findIndex method in order to be able to look at object properties, keys or values which we can then use to perform our comparisons to find the index of the object we are looking for.

The findIndex method is not quite as commonly known as the Array.prototype.indexOf method but it does a similar thing, just using a callback instead so we can provide our own comparison function.

This is needed because of something called referential equality.

Referential equality means that when we are comparing two objects, unless they refer to the exact same object then the comparison will fail.

All this means is two identical objects do not equal one another in JavaScript unless they are the same object.

Here is an example of this:

{} === {} // false

const obj = {}
obj === obj // true
referential equality in javascript

Now that we know how why we need the callback, let’s take a look at how to get the index of an object in an array in JavaScript using Array.prototype.findIndex:

const myArray = [{ apples: 10 }, { apples: 15 }, { apples: 4 }]

myArray.findIndex(arrayItem => arrayItem.apples === 15) // 1
myArray.findIndex(arrayItem => arrayItem.apples === 10) // 0
myArray.findIndex(arrayItem => arrayItem.apples === 4) // 2
myArray.findIndex(arrayItem => arrayItem.apples === 5) // -1
get index of object in array javascript

As you can see in the above example of how to get the index of an object in an array in JavaScript using the findIndex method all we need to do is pass in a function into findIndex that returns a boolean.

If the boolean we return is true then findIndex knows that is the correct index and it will return the index to us as a number, if it returns false then it knows it needs to keep looking until it goes through each item in the array.

If the findIndex method cant find the item, it will return -1 just like when using indexOf.

So to get or find the index of an object in an array in JavaScript you can use the findIndex method with a callback that returns a boolean of true or false when provided with the correct item.

This can be done with any property, key or value in the objects within your array.

How to get the index of an object in an array in JavaScript with referential equality

You can use Array.prototype.indexOf in certain circumstances, but only when you know you have referential equality.

Here is an example:

const myObj = { apples: 15 }
const myArray = [{ apples: 10 }, myObj, { apples: 4 }]

myArray.indexOf(myObj) // 1
how to get the index of an object in an array in JavaScript with referential equality

This only works because the object in the array is referencially equal with the one we are looking for meaning that both the one in the array and the one we are using for the comparison are pointing to the same reference.

If we try this with identical objects that are not referencially equal instead it won’t be able to find the correct object and will instead return -1.

Here is an example of this:

const myArray = [{ apples: 10 }, { apples: 15 }, { apples: 4 }]
myArray.indexOf({ apples: 15 }) // -1
what happens when you get the index of an object in an array in JavaScript without referential equality

If you are in doubt of which one to use, it is best to stick with findIndex to look inside of each object for properties because it will be more versatile and give you results closer to how you expect than indexOf will.

Summary

There we have how to get the index of an object in an array in JavaScript, if you want more like this be sure to check out some of my other posts!

I hope this post has helped, but before you go I highly recommend that you checkout Pluralsight if you are interested in improving your software engineering skills, such as React, JavaScript, or Typescript (and much more).

Not only does Pluralsight provide you with all the learning material you need but it also let's you learn in a fun, interactive way and gives you the ability to see your current progress and level in a certain skill via their Skill Assessment tool which can help you see what you need to learn next to keep improving!

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Some graphics used on this post were made using icons from flaticon.

Latest Posts

Learn React, JavaScript and TypeScript

Learn React, JavaScript and TypeScript

Join the platform that top tier companies are using.
Master the skills you need to succeed as a software engineer and take your career to the next level with Pluralsight.

Start here

Earn more and take your coding career to the next level.

Here you will find my personal recomendations to you, for full disclosure I earn a small commission from some of these links, but I only recommend what I trust and personally use.