DEV Community

loading...

JavaScript Find vs Filter Array Methods.

Jason F
UI developer, distro hopper. Currently running Debian 11.
・4 min read

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" },
];
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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

{ name: 'Darren', age: 45, userId: 91000361, status: 'full-time' }
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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' }
]
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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' }
]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

[ { name: 'Gene', age: 24, userId: 93000345, status: 'part-time' } ]
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

{ name: 'Gene', age: 24, userId: 93000345, status: 'part-time' }
Enter fullscreen mode Exit fullscreen mode

And I could access the age prop like so:

console.log(found.age);
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)