JavaScript Find vs Filter Array Methods.

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 on MDN.

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

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.

const found = persons.find((person) => person.name === "Darren");

If we were to log out the value of found, we would see the following:

{ 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.

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.

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:

const fullTimers = persons.filter((person) => person.status === "full-time");

If we log out the value of fillTimers we will get

[
  { 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, 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:

const nonFullTimers = persons.filter((person) => person.status !== "full-time");

And if we log this out, we'll see:

[
  { 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:

const found = persons.filter((person) => person.userId === 93000345);

The returned value of filter is an array as you can see below:

[ { 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:

console.log(found[0].age);

If instead I used find to find the person whose userId is 93000345, which would look like this:

const found = persons.find((person) => person.userId === 93000345);

The value of found would be the person object, like so:

{ name: 'Gene', age: 24, userId: 93000345, status: 'part-time' }

And I could access the age prop like so:

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.