Best Solution: Using Array.filter()
This is the most common method used to filter an array of objects. It creates a new array with all elements that pass the test implemented by the provided function.
// Array of students
let students = [
{ id: 1, name: 'Alice', mathsScore: 85 },
{ id: 2, name: 'Bob', mathsScore: 78 },
{ id: 3, name: 'Charlie', mathsScore: 93 },
{ id: 4, name: 'David', mathsScore: 72 },
{ id: 5, name: 'Eve', mathsScore: 88 }
];
// Filter students who scored more than 80 in maths
let highScoringStudents = students.filter(student => student.mathsScore > 80);
console.log(highScoringStudents);
// Output:
// [
// { id: 1, name: 'Alice', mathsScore: 85 },
// { id: 3, name: 'Charlie', mathsScore: 93 },
// { id: 5, name: 'Eve', mathsScore: 88 }
// ]In this code, we use the filter() method to create a new array highScoringStudents containing only the students who scored more than 80 in maths. The filter() method checks each student in the students array, and if the student’s mathsScore is greater than 80, that student is added to the highScoringStudents array.
Using Array.reduce()
While traditionally used to reduce the array to a single value, you can also use reduce() to filter an array of objects. It applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single output value.
// Array of employees
let employees = [
{ id: 1, name: 'Alice', salary: 6000 },
{ id: 2, name: 'Bob', salary: 4000 },
{ id: 3, name: 'Charlie', salary: 7000 },
{ id: 4, name: 'David', salary: 3000 },
{ id: 5, name: 'Eve', salary: 8000 }
];
// Filter employees earning more than $5000 using reduce()
let highEarners = employees.reduce((accumulator, employee) => {
if (employee.salary > 5000) {
accumulator.push(employee);
}
return accumulator;
}, []);
console.log(highEarners);
// Output:
// [
// { id: 1, name: 'Alice', salary: 6000 },
// { id: 3, name: 'Charlie', salary: 7000 },
// { id: 5, name: 'Eve', salary: 8000 }
// ]In this example, reduce() is used to accumulate a new array highEarners containing only the employees whose salary is greater than 5000. The reduce() method checks each employee in the employees array, and if the employee‘s salary is greater than 5000, that employee is added to the accumulator which is the highEarners array being built up over time.
Using Array.forEach()
Of course, you can use a good ol’ forEach() loop to filter an array of objects, although it’s not as clean as the other methods since it involves creating an empty array and pushing the objects that pass the test into it.
// Array of users
let users = [
{ id: 1, name: 'Alice', age: 20 },
{ id: 2, name: 'Bob', age: 15 },
{ id: 3, name: 'Charlie', age: 22 },
{ id: 4, name: 'David', age: 17 },
{ id: 5, name: 'Eve', age: 19 }
];
// New array to store the adult users
let adults = [];
// Filter adult users using forEach()
users.forEach(user => {
if (user.age > 18) {
adults.push(user);
}
});
console.log(adults);
// Output:
// [
// { id: 1, name: 'Alice', age: 20 },
// { id: 3, name: 'Charlie', age: 22 },
// { id: 5, name: 'Eve', age: 19 }
// ]
In this code, the forEach() method iterates over each user in the users array, checks if the user‘s age is greater than 18, and if so, adds that user to the adults array.
Find the first object using Array.find()
If instead of filtering a group of objects you want to find 1 specific object, then find() is what you’re looking for.
// Array of products
let products = [
{ id: 1, name: 'Apple', price: 1.2 },
{ id: 2, name: 'Banana', price: 0.5 },
{ id: 3, name: 'Cherry', price: 2 },
{ id: 4, name: 'Date', price: 1.5 },
{ id: 5, name: 'Elderberry', price: 3 }
];
// Find the product with id 3
let product = products.find(product => product.id === 3);
console.log(product);
// Output:
// { id: 3, name: 'Cherry', price: 2 }
In the example above, the find() method returns the first product in the products array that has an id of 3. As ids are unique, there will be only one match, or none if no product with such an id exists.
