Filter an Array of Objects in JavaScript

Aug 10, 2020

JavaScript arrays have a filter() method that let you create a new array containing only elements that pass a certain test. In other words, filter() gives you a new array containing just the elements you need.

const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

nums.filter(function isEven(num) {
  return num % 2 === 0;
}); // [2, 4, 6, 8, 10]

The filter() method takes a callback parameter, and returns an array containing all values that the callback returned true for. That makes it easy to use for filtering an array of objects. For example, given a list of characters, here's how you can find all characters whose team property is 'Avengers'.

const characters = [
  { name: 'Batman', team: 'Justice League' },
  { name: 'Hulk', team: 'Avengers' },
  { name: 'Flash', team: 'Justice League' },
  { name: 'Iron Man', team: 'Avengers' },
  { name: 'Deadpool', team: 'X-Force' }

const avengers = characters.filter(character => === 'Avengers');

Filter callbacks often use arrow functions because filter callbacks are often one-liners.

More Sophisticated Examples

A filter callback can be arbitrarily sophisticated, as long as it is synchronous. For example, suppose you have a list of Star Trek characters, and you want to get just the characters that appeared in Star Trek: The Next Generation. Here's how you can use Array#filter() to filter an array of characters given that the series property is an array:

const characters = [
  { name: 'James T. Kirk', series: ['Star Trek'] },
  { name: 'Spock', series: ['Star Trek', 'Star Trek: The Next Generation'] },
  { name: 'Jean-Luc Picard', series: ['Star Trek: The Next Generation'] },
  { name: 'Worf', series: ['Star Trek: The Next Generation', 'Star Trek: Deep Space Nine'] }

const tngCharacters = characters.filter(character => {
  return character.series.includes('Star Trek: The Next Generation');

More Fundamentals Tutorials