JavaScript ES6 – Array filter method

Published: Jan 5, 2018 3 mins read

JavaScript array filter() is a method that exists on the Array.prototype and was introduced in ECMAScript and is supported in all modern browsers.

JavaScript array filter() method allows us to conditionally return certain elements from an array, into a new array. It’s commonly used to remove items from an array by excluding them from the result.

Think of JavaScript array filter() method as: “I want a new array containing just the items I need”.

array filter() parameters

JavaScript array filter() method consists of following parameters:

  • value – value of current element per iteration
  • index – index of current element (starts from zero)

Let’s see how we can use filter() method with an examples:

        
          let arr = [3, 5, 6, 8, 23, 11];

let evenNumbers = arr.filter((value) => {
  if (value % 2 == 0) {
    return value;
  }
});

console.log('arr', arr)
console.log('evenNumbers', evenNumbers)

// OUTPUT
// arr [3, 5, 6, 8, 23, 11]
// evenNumbers [6, 8]

Note: keep in mind our old array arr is untouched in this case, we simply evaluated the values for even numbers value % 2 == 0.

Only if any value satisfied the condition returned as true, then the value is stored into evenNumbers new array.

filter() on objects array

We can perform really complex operation using JavaScript array filter() method. One of most use cases of JavaScript array filter() is using in objects array.

Let’s see an example for filtering an object array:

        
          let people = [
  {
    name: "John",
    age: "16",
  },
  {
    name: "Mary",
    age: "30",
  },
  {
    name: "Jaine",
    age: "23",
  }
];

let adults = people.filter((person) => {
  if (person.age > 20) {
     return person;
  }
});

console.log(adults)

// OUTPUT
// Array(2)
// {name: 'Mary', age: '30'}
// {name: 'Jaine', age: '23'}

In example above we are iterating thru array people and evaluating each array object with person.age > 20 condition. As result we see 2 objects are return as adults new array.

Few take away from above example:

  • With each iteration of a filter() loop, we need to return an expression that evaluates either true or false.
  • Array elements that evaluate to true are stored in a new array, and items that evaluate to false are excluded.

array filter() shorthand syntax

Since we are using JavaScript arrow function we can use shorthand syntax for JavaScript array filter() method:

        
          let arr = [3, 5, 6, 8, 23, 11];
let evenNumbers = arr.filter((value) => value % 2 == 0);
console.log(evenNumbers)

// OUTPUT
// [6, 8]

array filter() usage and tips

Here are few tips you need to know when considering using JavaScript array filter() method:

  • Don’t forget to return values, otherwise it will be undefined
  • filter method will look for all matching elements. Unlike find method which returns the first matching element
  • If not matching element found it will return [] empty object
  • Values that evaluated as true will be stored into new array
  • Values that evaluated as false will be skipped
  • It will soft copy your object references into the new array
  • array empty slots are skipped

summary

We have learned how to use JavaScript array filter() method to iterate an array, filter the values for specific criteria.

You can think of filter() of like a functional “if statement”. If array element meets my conditions, store the values. Otherwise i don’t care for values don’t meet my conditions.

filter() methods is really similar to find() method, if you want to learn the different between the 2 check out this post: JavaScript ES6 – Difference between find, filter and some methods

most used JavaScript array methods

Want to know the most common JavaScript array methods? See the list of methods below or read most common array method with examples.

%d bloggers like this: