4 Practical Use Cases of Using filter() in JavaScript
By: Amy J. Andrews
Tags: Web Development, Programming, Codingbootcamp, Javascript Development, JavaScript

4 Practical Use Cases of Using filter() in JavaScript

Photo by Marc Babin on Unsplash

Creating a new array that contains a subset of elements of the given array is one of the most common tasks in JavaScript.

Instead of using the loop statements, we can use filter() to complete that task in a shorter and cleaner way.

Here’s how.

1. Remove Repeated Values

This one is a little tricky. We will make use of the indexOf() function. It’s a built-in function that returns the first index at which a given element can be found in the array.

We can use it to form a condition for removing duplicated values in an array like below.

const numbers = [3, 12, 54, 12, 4, 4, 3, 12, 16]; const filteredNumbers = numbers.filter((number, index) => numbers.indexOf(number) === index); console.log(filteredNumbers); // [3, 12, 54, 4, 16]

We use the second parameter of the callback function, which is the index of the current element.

The idea here is that we compare the index returned by `indexOf()` function with the actual index of the current element. If they are different, the current element is a repeated value.

Take the array in the snippet above, for example. When the actual index is 3 , the corresponding element’s value is 12 . However, if we use indexOf() for that element, the returned index is 1 because the element 12 appears for the first time at the index 1 . Thus 12 is one of the repeated values.

2. Remove Invalid Values

Invalid values are considered values that can cause bugs and unexpected behaviors.

Take ages, for example. An age is valid if it’s a defined number.

The requirement now is to filter all people whose valid ages. To complete the task, we can use the snippet below.

const people = [

{ name: ‘Amy’, gender: ‘female’, age: ‘28’ },

{ name: ‘James’, gender: ‘male’, age: 13 },

{ name: ‘Victor’, gender: ‘male’, age: null },

{ name: ‘David’, gender: ‘male’, age: 28 },

{ name: ‘Simon’, gender: ‘male’, age: undefined },

{ name: ‘Anna’, gender: ‘female’, age: 21 },

{ name: ‘Jane’, gender: ‘female’, age: NaN }

]; const filteredPeople = people.filter(person => person.age !== undefined && typeof person.age === ‘number’ && !isNaN(person.age)); console.log(filteredPeople); // [{ name: ‘James’, gender: ‘male’, age: 13 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Anna’, gender: ‘female’, age: 21 }]

3. Filter a Numbers Array

This one is the simplest usage.

Let’s say you have an array of numbers and you are required to extract only odd numbers from that array.

const numbers = [23, 54, 1, 3, 72, 28]; const oddNumbers = numbers.filter(number => number % 2 !== 0); console.log(oddNumbers); // [23, 1, 3]

Or you want to create a new array that contain all prime numbers from the given array.

const isPrime = number => {

if (number === 1) return false;

if (number === 2) return true; for (let i = 2; i < number; i++) {

if (number % i === 0) return false;

}



return true;

} const numbers = [23, 54, 1, 3, 72, 28];

const oddNumbers = numbers.filter(isPrime);

console.log(oddNumbers); // [23, 3]

4. Filter an Objects Array

Although an object is more complex than a number, the usage of filter() still stays simple.

For example, suppose we have an array of people. The requirement is find all people whose ages are greater than 18.

const people = [

{ name: ‘Amy’, gender: ‘female’, age: 28 },

{ name: ‘James’, gender: ‘male’, age: 13 },

{ name: ‘Victor’, gender: ‘male’, age: 17 },

{ name: ‘David’, gender: ‘male’, age: 28 },

{ name: ‘Simon’, gender: ‘male’, age: 33 }

]; const filteredPeople = people.filter(person => person.age > 18); console.log(filteredPeople); // [{ name: ‘Amy’, gender: ‘female’, age: 28 }, { name: ‘David’, gender: ‘male’, age: 28 }, { name: ‘Simon’, gender: ‘male’, age: 33 }]

How about all female whose ages is greater than 18? Well, just add an additional condition to the callback function.

const people = [

{ name: ‘Amy’, gender: ‘female’, age: 28 },

{ name: ‘James’, gender: ‘male’, age: 13 },

{ name: ‘Victor’, gender: ‘male’, age: 17 },

{ name: ‘David’, gender: ‘male’, age: 28 },

{ name: ‘Simon’, gender: ‘male’, age: 33 }

]; const filteredPeople = people.filter(person => person.age > 18 && person.gender === ‘female’); console.log(filteredPeople); // [{ name: ‘Amy’, gender: ‘female’, age: 28 }]

Easy, right!?

Conclusion

That’s it. You have learned some practical ways of using filter() in JavaScript.

Do you know any other use cases? Please let me know in the comment below.

Hope you enjoy this article.