JavaScript Find vs Filter Array Methods.
Tags: javascript, beginners
Published: 2021-06-06 20:47:20

JavaScript's built in array methods are extremely useful. However, picking the right method for the job can be challenging. Today I'll describe use cases for the `find` and `filter` array methods. 

# Find method
The `find` method will return either the first element found that matches your criteria or undefined. For an in-depth definition of `find`, checkout [this page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) on MDN.

Let's use the array below to try out the find method.

```javascript
const persons = [
  { name: "Tom", age: 55, userId: 99000152, status: "full-time" },
  { name: "Miguel", age: 29, userId: 99000112, status: "full-time" },
  { name: "Jennifer", age: 42, userId: 97003211, status: "part-time" },
  { name: "Dean", age: 39, userId: 9800212, status: "part-time" },
  { name: "Jose", age: 33, userId: 99000972, status: "part-time" },
  { name: "Michelle", age: 23, userId: 89004444, status: "full-time" },
  { name: "Darren", age: 45, userId: 91000361, status: "full-time" },
  { name: "Gene", age: 24, userId: 93000345, status: "part-time" },
  { name: "Nancy", age: 35, userId: 99000111, status: "full-time" },
];
```
First, let's use the `find` method to find the person object with the name of Darren.
```javascript
const found = persons.find((person) => person.name === "Darren");
```
If we were to log out the value of `found`, we would see the following:
```javascript
{ name: 'Darren', age: 45, userId: 91000361, status: 'full-time' }
```

Perhaps we need to find the person whose id is 97003211. How could we accomplish that? With the `find` method of course.
```javascript
const found = persons.find((person) => person.userId === 97003211);
```
So, the `find` method has one required argument, which is the current element in the array, in our case above we called that argument `person`. You can optionally use the `index`, and `thisArg` arguments. 

As stated earlier, if the `find` method doesn't find what you are looking for, it will return `undefined`. Let's give that a shot. 

Using the persons array again, let's search for someone whose age is over 100.

```javascript
const found = persons.find((person) => person.age > 100);
```

If we log out the value of `found` now, we'll get `undefined`.

The `find` method is useful when you need to check if a particular value exists in an array. 

# Filter method
In the event that we needed to filter the array of persons based on a particular criteria, such as all persons over the age of 35, or, all persons whose name is longer than five characters, we could do that. The `filter` method is useful when you need to filter out all values that meet a certain criteria. This method always creates/returns a new array.

Let's say we need an array of that consists exclusively of all persons with a status of 'full-time'. We could do that like so:
```javascript
const fullTimers = persons.filter((person) => person.status === "full-time");
```
If we log out the value of `fillTimers` we will get
```javascript
[
  { name: 'Tom', age: 55, userId: 99000152, status: 'full-time' },
  { name: 'Miguel', age: 29, userId: 99000112, status: 'full-time' },
  { name: 'Michelle', age: 23, userId: 89004444, status: 'full-time' },
  { name: 'Darren', age: 45, userId: 91000361, status: 'full-time' },
  { name: 'Nancy', age: 35, userId: 99000111, status: 'full-time' }
]
```
The `filter` method, which you can read more in-depth about [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), takes one required argument, which is the current element of the array. The optional args are the index that you're currently on, and the entire array.

Imagine now we want a list of everyone who isn't full-time. We could do that like so:
```javascript
const nonFullTimers = persons.filter((person) => person.status !== "full-time");
```
And if we log this out, we'll see:
```javascript
[
  { name: 'Jennifer', age: 42, userId: 97003211, status: 'part-time' },
  { name: 'Dean', age: 39, userId: 9800212, status: 'part-time' },
  { name: 'Jose', age: 33, userId: 99000972, status: 'part-time' },
  { name: 'Gene', age: 24, userId: 93000345, status: 'part-time' }
]
```
# My Experience
There was a time where I was using the `filter` method when I could have been using `find`. For example, let's say I needed to find the person whose userId is 93000345. I would do something like this:
```javascript
const found = persons.filter((person) => person.userId === 93000345);
```
The returned value of filter is an array as you can see below:
```javascript
[ { name: 'Gene', age: 24, userId: 93000345, status: 'part-time' } ]
```
This creates some frustration because now if I needed to access the person's age for example, I would have to do something like this:
```javascript
console.log(found[0].age);
```
If instead I used find to find the person whose userId is 93000345, which would look like this:
```javascript
const found = persons.find((person) => person.userId === 93000345);
```
The value of found would be the person object, like so:
```javascript
{ name: 'Gene', age: 24, userId: 93000345, status: 'part-time' }
```
And I could access the age prop like so:
```javascript
console.log(found.age);
```
# Conclusion
JavaScript array methods are awesome, but it can take time to learn about the different array methods and when to use each one. I hope you found this article useful. Thanks for reading.