4 ways of finding elements in a JavaScript Array
Tags: javascript, beginners, webdev, programming
Published: 2022-02-21 08:49:04

Arrays are the building blocks for data-based web apps. We can store and manipulate data using an Array easily.

Today, we are going to see 4 ways to find an element in an Array, along with some use cases explained with examples.

<img width="100%" src="https://media.giphy.com/media/CjmvTCZf2U3p09Cn0h/giphy-downsized.gif" />

I know, I know...

---
## find

the `find` method returns the first item that returns true for the passed callback condition, otherwise returns `undefined` if all items return false for the callback condition.

```ts
const numbers = [1, 3, 4, 6, 10];

numbers.find(element => element > 6); // 10

numbers.find(element => element > 10); // undefined
```

---
## findIndex
the `findIndex` method returns the index of the first item that returns true for the passed callback condition, otherwise returns `-1` if all items return false for the callback condition.

```ts
const numbers = [1, 3, 4, 6, 10];

numbers.findIndex(element => element > 6); // 4

numbers.findIndex(element => element > 10); // -1
```

> The find methods are useful when you don't know exactly what you're looking for, but you know a way to identify it. For instance, you know the user's email but not the complete object.

---

## indexOf

the `indexOf` method returns the index of the first item that matches the passed element, otherwise returns `-1`.

```ts
const numbers = [1, 3, 4, 6, 10];

numbers.indexOf(10); // 4

numbers.indexOf(16); // -1
```

> The `indexOf` uses the same comparison logic as `===`. Hence, using it on an array of Object will not be a good idea.

---
## lastIndexOf
the `lastIndexOf` methods similar to `indexOf` we saw above, the only difference being it starts the look up from the tail end of the array. 

So, it's a good idea to use `lastIndexOf` if you know that the element has a higher chance of being in the latter half.

```ts
const numbers = [1, 3, 4, 6, 10];

numbers.lastIndexOf(10); // 4

numbers.lastIndexOf(16); // -1
```


> The `indexOf` methods are useful when you know exactly what you're looking for. For instance, it's best to use them for primitive data types like number or strings.

---
## Summary

To summarise, I would suggest using

- `find`, when you don't know what you're looking for but you know how it should look.
- `findIndex`, to get the index of the element.
- `indexOf`, when you know exactly what you're looking for, and want the index of the element.
- `lastIndexOf`, when you know what you're looking for, you know it's somewhere at the end, and want the index of the element.
- when the array items are objects, `find` and `findIndex` are the way to go.

---

That's it for now. I hope you find this article helpful! Should you have any feedback or questions, please feel free to put them in the comments below.

For more such articles, please follow me on [Twitter](https://twitter.com/sun_anshuman)

> Until next time

<img width="100%" src="https://media.giphy.com/media/kRkJXYahXjSE0/giphy.gif" />

---
## Resources

[MDN docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)