How to Filter an Array of Objects in JS

Before we start discussing this topic, let's do a quick revision of both arrays and objects.

At a very high level, arrays are collections of similar things. A common example you might think of is a six-pack of beer. The entire "thing" - the six-pack itself, is an array. Each individual can of beer is an item in an array.

While an array is used to group similar items, at a very high level, you might say that an object is used to describe a unique thing. The word unique here is used in the sense of "a collection of unique characteristics, grouped toghether based on some rules". In other words, an object is a collection of characteristics of a single thing, while an array is a collection of similar things.

This distinction is sometimes not obvious to a beginner programmer, but it is crucial to understand this at a conceptual level. A six-pack of beer cans might be "emulated" in JavaScript as follows:

1const sixPack = [
2  "beer can 1",
3  "beer can 2",
4  "beer can 3",
5  "beer can 4",
6  "beer can 5",
7  "beer can 6",
8];

So, I'm emulating a six-pack of beers as an array, where each member of that array is a string literal.

Explanation

So, what I'm doing here is: I'm passing an arrow function to JavaScript's built-in filter() method on the Array.prototype object. This arrow function accepts a single argument that I can name anything I like (as long as I don't violate syntax rules of JavaScript). I named the argument person, since that's what each array item essentially is. Finally, I return the result of running a comparison between each person object's country property and the value of 'United States'.

The == operator checks for equality of type, and returns the boolean of true if the two values match, and the boolean of false if they do not match. Those person objects that passed the equality comparison - that is, those person objects that had the filter's callback function return the boolean of true after checking for equality between person.country and 'United States' - those person objects got pushed into a new array that gets returned from the filter() method call. Since these return array values do not change the source array in any way - that is, they are "non-destructive" - I had to save them as americans and brits - thus, essentially, splitting my source people array into two distinct subsets based on the country property of the people object.

One Pager Cheat Sheet

• Filtering an array of objects in JavaScript requires understanding of the distinction between arrays as a collection of similar items and objects as a collection of unique characteristics of a single thing.
• Using an array of objects is an ideal way to represent a group of items that have multiple unique characteristics, such as a group of users in an app, represented as JavaScript objects.
• We can filter an array of objects to find a specific set of members based on a certain property that makes them different from the rest of the array.
• We used JavaScript's filter() method to split the source people array into two distinct subsets based on the country property and the value of 'United States'.