How to Filter JavaScript Array of Objects by Property Value?

Using Array.prototype.filter()

The Array.prototype.filter() method returns a new array with all elements that satisfy the condition in the provided callback function. Therefore, you can use this method to filter an array of objects by a specific property's value, for example, in the following way:

// ES5+
const employees = [
    { name: 'John', department: 'sales' },
    { name: 'Wayne', department: 'marketing' },
    { name: 'David', department: 'IT' },
    { name: 'Bruce', department: 'marketing' },
];

const filtered = employees.filter(function (emp) {
    return emp.department === 'marketing'
});

console.log(filtered);
/* [
    {name: "Wayne", department: "marketing"},
    {name: "Bruce", department: "marketing"}
] */

If a match is not found then the Array.prototype.filter() method will return an empty array.

With ES6 arrow functions, you can shorten the syntax a bit, for example, like so:

// ES6+
// ...
const filtered = employees.filter((emp) => emp.department === 'marketing');
// ...

In ES6+, you can also directly unpack the object in the callback function's argument, for example, like so:

// ES6+
// ...
const filtered = employees.filter(({ department }) => department === 'marketing');
// ...

Using a Loop

If you're unable to support ES5, then you can simply use a loop (such as a for loop) to iterate over the array of objects and populate a new array with elements you wish to keep. For example:

const employees = [
    { name: 'John', department: 'sales' },
    { name: 'Wayne', department: 'marketing' },
    { name: 'David', department: 'IT' },
    { name: 'Bruce', department: 'marketing' },
];

const match = [];

for (let i = 0; i < employees.length; i++) {
    if (employees[i].department === 'marketing') {
        match.push(employees[i]);
    }
}

console.log(match);
/* [
    {name: "Wayne", department: "marketing"},
    {name: "Bruce", department: "marketing"}
] */

If a match is not found then "match" will be an empty array.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.