Trusted answers to developer questions
filter vs. find: JavaScript array methods
ES6 ships with several array methods that enable one to perform operations such as:
- Filtering values (
filter) - Summing up array elements (
reduce) - Performing the same operation on each element (
map)
Assuming you want to find a single value given a condition, you’d most likely use find. But, if you always use the methods mentioned above (filter, map and reduce), it’s time to re-learn find.
A coding example
We have an array of users:
const users = [
{
name: "Alice",
age: 19,
id: 1
},
{
name: "Bob",
age: 24,
id: 2
},
]
We need a user with an id of 2.
Getting the user using filter
const users = [{name: "Alice",age: 19,id: 1},{name: "Bob",age: 24,id: 2},]let user = users.filter((user) => user.id === 2);console.log(user);
However, the code above returns [{name: "Bob", age: 24, id: 2}]. So, what we need is being returned inside an array.
To resolve this, we simply do the following:
const users = [{name: "Alice",age: 19,id: 1},{name: "Bob",age: 24,id: 2},]user = users.filter((user) => user.id === 2)[0];console.log(user);// which then returns {name: "Bob", age: 24, id: 2}
Getting the user using find
const users = [{name: "Alice",age: 19,id: 1},{name: "Bob",age: 24,id: 2},]const user = users.find((user) => user.id === 2)// returns {name: "Bob", age: 24, id: 2}
There you have it. You’ve relearned the find array method.
findreturns the first matching element andfilterreturns an array of all matching elements.
RELATED TAGS
javascript
beginner
array
CONTRIBUTOR
Osinachi ChukwujamaTRENDING TOPICS
Did you find this helpful?