How to Filter Array of Objects in Javascript by Any Property

To filter an array of objects in JavaScript by any property, we can use the Array.filter method in the following way:

const users = [
  { id: 1, name: 'John', isAdmin: false },
  { id: 2, name: 'Jane', isAdmin: true  },
  { id: 3, name: 'Joel', isAdmin: false }
]

users.filter(user => user.isAdmin)

// Returns
-> [{ id: 2, name: 'Jane', isAdmin: true }]

We can call this method on arrays, and it expects a callback function. The filter method runs a test in the callback function. Elements that pass the test are added to a new array. This means that the filter method will always return a new array, and does not modify the original array.

In the above code example, we try to filter for users whose isAdmin property is set to true. This is equivalent to returning a value from the callback function:

users.filter(user => {
    return user.isAdmin
})

The filter method always expects a true or false value to be returned. If true is returned, the test is passed and the item is added to a new array. If false is returned, it will not be added to the new array.

We can of course not only do this with boolean values but with any other value as well. Imagine you have a list of files with their sizes, and you want to filter out large files. You could do the following, where you compare the size property to a fixed value:

const files = [
  { id: 1, name: 'html.md', size: 499 },
  { id: 2, name: 'css.md', size: 612  },
  { id: 3, name: 'javascript.md', size: 1236 }
]

const largeFiles = files.filter(file => file.size > 1000)

We can also abstract the filter method into a function that we can reuse to filter by any boolean property. We can achieve this with a single line of code:

const filter = (array, property) => array.filter(item => item[property])

// Then call it later like so:
filter(users, 'isAdmin')

// Returns
-> [{ id: 2, name: 'Jane', isAdmin: true }]

This function expects an array to be filtered, and the property that we are looking for, then immediately returns a new array using filter. Inside the callback of the filter, we can pass the passed property using bracket notation. Note that the above function will only work with boolean properties. For more complex filters, you may want to write out the callback function.

Another thing to note about the filter method is that it also accepts more parameters, namely the index and the array itself if needed. These are optional parameters, so you don't need to define them if you are not going to use them.

users.filter((user, index, array) => {
    console.log(user)  // Logs out the current element in the loop
    console.log(index) // Logs out the current index in the loop, starting from 0
    console.log(array) // Logs out the array itself

    return user.isAdmin
})

Want to know how to sort arrays too? Check out the following tutorial:

How to Sort Array of Objects in JavaScriptLearn how you can sort array of objects in JavaScript based on any property in any order with a simple helper function.Learn More