DEV Community

loading...
Cover image for  find() vs filter()

find() vs filter()

khush profile image khush ・2 min read

Many of us are accustomed to using to two common functions in js, that is, filter() and find(). A lot of the times we use these functions without paying a lot attention to it. Let's discuss in which situations should you actually use them.

find():

find is a function that iterates through an array and returns the first element in the array that matches the given predicate.
eg. find the person with name Amy

const arr = [{id: 1, name: 'Tom'}, {id: 2, name: 'Claudia'}, {id: 3, name: 'Richard'}, {id: 4, name: 'Amy'}, {id: 5, name: 'Rebecca'}]; console.log(arr.find((person) => person.name === 'Amy'));

filter():

filter is a function that iterates through an array and returns a new array of all elements in the array that matches the given predicate.
eg. finding all person whose name's start with 'R'

const arr = [{id: 1, name: 'Tom'}, {id: 2, name: 'Claudia'}, {id: 3, name: 'Richard'}, {id: 4, name: 'Amy'}, {id: 5, name: 'Rebecca'}]; console.log(arr.filter((person) => person.name[0] === 'R'));

Now, that we have seen what these two functions essentially do let's see when should we use them.

filter() basically runs through the entire array to see if the given predicate is matched which means you should be only using it if you expect more than one item to match this predicate. Although, this seems like a pretty simple thing to remember a lot of the times we see people using filter in place of find().
When you want to search for an element in the array use find() instead of returning an array from filter and doing something like resultOfFilter[0].

The main advantage of using find() in those cases is that find returns as soon as a match is found, but filter would run through the entire array even if a match is found in the 1 st index position and you don't want to do that for large arrays when all you are concerned about is one match!

See below how filter iterates through all the elements while find returns on the first match.

const arr = [{id: 1, name: 'Tom'}, {id: 2, name: 'Claudia'}, {id: 3, name: 'Richard'}, {id: 4, name: 'Amy'}, {id: 5, name: 'Rebecca'}]; console.log(arr.filter((person) => { console.log('inside filter, current name: ',person.name); return person.name === 'Tom' })); console.log(arr.find((person) => { console.log('inside find, current name: ',person.name); return person.name === 'Tom' }));

Discussion (4)

pic
Editor guide
Collapse
jackmellis profile image
Jack

I also often see people do filter().length or find() != null when really .some() and .every()` do a better job

Collapse
stegriff profile image
Stephen Griffiths

Hi khush, welcome to Dev.to, and thanks for this post!

It's true, sometimes I use filter and then realise later that I'm only looking for one item and should use find instead!

Collapse
sudarshansb143 profile image
Sudarshan Sawandkar

if you don't care about result then you can use .includes() also :)

Collapse
khush profile image
khush Author

Correct, we can use indexOf in those cases. The only thing about includes is that it isn't supported on ie but if thats not a concern its a good alt.