Javascript: How to filter an array of objects by property

by

A very common task in Javascript (and lots of other programming languages) is creating a subset of an array. Luckily, there’s lots of ways available to do this in Javascript. We’ll go over each from best (Array.filter) to worst (for loop).

Use the Array.filter method

Filtering an array of objects in Javascript can be done very easily by using the Array type’s built-in filter method.

For example, let’s say we have an array of objects called people. Each person in the array is represented by an Object with two properties: name and age.

Below is how we’d use .filter on that array to get a new array with just people over 30 years of age:

const people = [
    {
        name: "Bill",
        age: 42,
    },
    {
        name: "Steve",
        age: 29,
    },
    {
        name: "Mark",
        age: 51,
    }
];

const peopleOver30 = people.filter((person) => person.age > 30);

console.log(peopleOver30);
// -> [ { name: 'Bill', age: 42 }, { name: 'Mark', age: 51 } ]
JavaScript

Use the Array.forEach method

Another way you can filter an array by an object’s properties is to use the Array.forEach method:

const people = [
    {
        name: "Bill",
        age: 42,
    },
    {
        name: "Steve",
        age: 29,
    },
    {
        name: "Mark",
        age: 51,
    }
];

const peopleOver30 = [];

people.forEach((person) => {
    if (person.age > 30) {
        peopleOver30.push(person);
    }
});

console.log(peopleOver30);
// -> [ { name: 'Bill', age: 42 }, { name: 'Mark', age: 51 } ]
JavaScript

Use a for…of loop

Another way to accomplish the same thing is to use a for...of loop. These loops are cool because they give you each actual element rather than the index, such as in a for...in loop (which we’ll discuss in the next section).

Here’s how to do the same thing with a for...of loop:

const people = [
    {
        name: "Bill",
        age: 42,
    },
    {
        name: "Steve",
        age: 29,
    },
    {
        name: "Mark",
        age: 51,
    }
];

const peopleOver30 = [];

for (const person of people) {
    if (person.age > 30) {
        peopleOver30.push(person);
    }
}

console.log(peopleOver30);
// -> [ { name: 'Bill', age: 42 }, { name: 'Mark', age: 51 } ]
JavaScript

Use a for…in loop

for...in loops in Javascript work kind of like for...of, except less convenient. They give you each index of the array and you have to use that to access the element.

Here’s how to filter the array for people over 30 using a for...in loop:

const people = [
    {
        name: "Bill",
        age: 42,
    },
    {
        name: "Steve",
        age: 29,
    },
    {
        name: "Mark",
        age: 51,
    }
];

const peopleOver30 = [];

for (const index in people) {
    if (people[index].age > 30) {
        peopleOver30.push(people[index]);
    }
}

console.log(peopleOver30);
// -> [ { name: 'Bill', age: 42 }, { name: 'Mark', age: 51 } ]
JavaScript

Use a plain old for loop

Lastly, you can just use a regular for loop to accomplish the same thing. Here, you have to manage your own iterator:

const people = [
    {
        name: "Bill",
        age: 42,
    },
    {
        name: "Steve",
        age: 29,
    },
    {
        name: "Mark",
        age: 51,
    }
];

const peopleOver30 = [];

for (let i = 0; i < people.length; i++) {
    if (people[i].age > 30) {
        peopleOver30.push(people[i]);
    }
}

console.log(peopleOver30);
// -> [ { name: 'Bill', age: 42 }, { name: 'Mark', age: 51 } ]
JavaScript

A little messy, but still gets the job done.

Conclusion

In summary, you can use the built-in Javascript array methods Array.filter or Array.foEach to either filter the array (recommended) or manually create a new array and push stuff into it that meet your criteria, respectively. You can also use even less convenient methods to do the same thing, like a for...of loop, a for...in loop, or even a regular for loop. Each one is less and less convenient, so I’d highly recommend you stick with Array.filter.