How To Filter An Array Of Objects Based On A Property In JavaScript

Posted on by Davis Cole
Filter an Array of Objects based on a property in JavaScript

In this article, you’ll learn how to filter an array of objects based on a property in JavaScript by either iterating over the array or using the array class’ .filter() function.

Filter an array of objects based on a property in JavaScript

A thing to note about the solutions below is that they aren’t that different from filtering a regular array, besides the extra step of checking the current Object’s property instead of just checking the value. So everything you learn in this article will apply to filtering a regular array.

Additionally, for simplicity’s sake, the example I’ll be using is filtering a list of people by if they’re older than 25.

Iterating over the Array

The most straightforward way: Iterate over the array, then check directly. There are generally 2 ways, such as using the array class’ .forEach() function or the traditional for loop (by index or preferably by the keyword). Both will be covered here:

Code: (for loop method)

const arr = [
    { id: 1, name: "John1", age: 10 },
    { id: 2, name: "John2", age: 20 },
    { id: 3, name: "John3", age: 30 },
    { id: 4, name: "John4", age: 40 },
    { id: 5, name: "John5", age: 50 }
];

const newArr = [];

for (const obj of arr) {
	// If the condition is met, add the object to the new array
	if (obj.age > 25) {
		newArr.push(obj);
	}
}

console.log(newArr);

Code: (.forEach() method)

const arr = [
    { id: 1, name: "John1", age: 10 },
    { id: 2, name: "John2", age: 20 },
    { id: 3, name: "John3", age: 30 },
    { id: 4, name: "John4", age: 40 },
    { id: 5, name: "John5", age: 50 }
];

const newArr = [];

arr.forEach((obj) => {
	// If the condition is met, add the object to the new array
	if (obj.age > 25) {
		newArr.push(obj);
	}
});

console.log(newArr);

Output:

[
    { id:3, name:"John3", age:30 },
    { id:4, name:"John4", age:40 },
    { id:5, name:"John5", age:50 }
]

Note how the .forEach() function works: The .forEach() function accepts a callback function (i.e., a function that is used as another function’s parameter) as a parameter that is executed for every value in the array.

The callback function (which will be henceforth called callFunc when used in a parameter’s context) accepts 3 parameters:

  • Element (the current value).
  • Index (the current index).
  • Array (the array that is being iterated over).

Additionally, an anonymous function (i.e., a function with no name) can be shorthanded to ()=>{}.

Using the .filter() function

The Array class’ .filter() function works exactly as it states – it takes an array and filters over it using a callback function as its filtering condition. After that, it returns a shallow-copy of the filtered array (i.e., an array that contains all the same data-references).

A thing to note about its callFunc parameter is that it must return a boolean value to decide whether a value is kept. For example:

// Check if the Array's current element is greater than 25
arr.filter((elm) => { return elm > 25; });

So taking in all this, we get something like this:

Code:

const arr = [
    { id:1, name:"John1", age:10 },
    { id:2, name:"John2", age:20 },
    { id:3, name:"John3", age:30 },
    { id:4, name:"John4", age:40 },
    { id:5, name:"John5", age:50 }
];

const newArr = arr.filter(
	// Check if the Array's current element is greater than 25, if YES, add it to the array
	(obj) => {return obj.age > 25}
);
console.log(newArr);

Output:

[
    { id:3, name:"John3", age:30 },
    { id:4, name:"John4", age:40 },
    { id:5, name:"John5", age:50 }
]

Side note on both methods

When deciding which method is better, of course, the 3 aspects to keep note of are Performance, Readability, and Scalability. However, I’ll only skim through the article here.

Generally, when you are working on a problem that is short, small, and or with very little data, use the .filter() function – It’s short, with only 1 line of code different from the multiple lines needed for the for loop; additionally, it is by far the more readable method.

On the other hand, with a more complex and or data heavy problem; a for loop is preferable as it is shown to perform much better with the .filter() function because .filter() 33% slower than a for loop. Additionally, a for loop provides slightly more flexibility in the fact that a for loop can be broken while the .filter() function cannot. 

Summary

To filter an array of objects based on a property in JavaScript, you can either iterate over the array or use the Array class’ .filter() function. If you seek a more readable method with the downside of being less efficient, use the .filter() function; otherwise use a for loop if performance is needed.

Maybe you are interested:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *