How to implement a filter() for Objects in JavaScript ?
In this article, we will learn how to implement a filter() for Objects in JavaScript. In JavaScript, the filter() method is a built-in function for the array, not for the object. The filter() method outputs all the elements of an array that pass a specific test or satisfies a specific function. The return type of the filter() method is an array that consists of all the elements for which the function callback returns true. But for the object, we have to build a custom filter() method.
Below are the methods for implementing filter() for Objects in JavaScript:
Table of Content
Approach 1: Using for loop and filter() Methods
In this approach, we are using the filter() method for filtering out the objects and using a loop for printing the multiple results.
Example: The example returns IT department employees with the help of the filter() method.
let employees = [
{ name: "Tony Stark", department: "IT" },
{ name: "Peter Parker", department: "Pizza Delivery" },
{ name: "Bruce Wayne", department: "IT" },
{ name: "Clark Kent", department: "Editing" }
];
let output =
employees.filter(employee => employee.department == "IT");
for (let i = 0; i < output.length; i++) {
console.log(output[i].name)
};
Output
Tony Stark Bruce Wayne
Approach 2: Using Object.entries() and Object.fromEntries() Method
In this approach, we will create a custom built-in function for filtering the object.
Example: This example shows the implementation of the above-explained approach.
let employees = [
{ name: "Tony Stark", id: 1, department: "IT" },
{ name: "Peter Parker", id: 2, department: "Pizza Delivery" },
{ name: "Bruce Wayne", id: 3, department: "IT" },
{ name: "Clark Kent", id: 4, department: "Editing" }
];
Object.filter = (obj, predicate) =>
Object.fromEntries(Object.entries(obj).
filter(([key, value]) =>
predicate(value)));
let filtered =
Object.filter(employees, employee =>
employee.department === "IT");
console.log(filtered);
Output
{
'0': { name: 'Tony Stark', id: 1, department: 'IT' },
'2': { name: 'Bruce Wayne', id: 3, department: 'IT' }
}
Approach 3: Using Array.prototype.reduce() for Filtering Objects
In this approach, we use the reduce() method to create a custom filter function for objects. The reduce() method iterates over each entry in the object, applying a condition to determine whether to include the entry in the final filtered result.
Example: Implementing a Custom filter() Function with reduce()
let employees = [
{ name: "Nikunj", id: 1, department: "IT" },
{ name: "Arti", id: 2, department: "Pizza Delivery" },
{ name: "Dhruv", id: 3, department: "IT" },
{ name: "Yash", id: 4, department: "Editing" }
];
const customFilter = (arr, predicate) => {
return arr.reduce((acc, item) => {
if (predicate(item)) {
acc.push(item);
}
return acc;
}, []);
};
let filtered = customFilter(employees, employee => employee.department === "IT");
console.log(filtered);
Output
[
{ name: 'Nikunj', id: 1, department: 'IT' },
{ name: 'Dhruv', id: 3, department: 'IT' }
]
