How to Filter an Array in JavaScript — JS Filtering for Arrays

When building a dynamic and interactive program, you may need to add some interactive features. For example, where a user clicks a button to filter through a long list of items.

You may also need to manipulate a large array of data to return only items that match your specified condition(s).

In this article, you will learn how to filter an array in JavaScript using two major approaches. You will also learn how to filter through an array of objects and return a new array of filtered elements.

How to Filter an Array with a for loop

Before the introduction of ES6 in 2015, many developers relied on the for loop method to handle almost all array manipulation. But the code can become quite long and not easy to understand, which led to the release of many individual JavaScript methods like the filter() method (which you will learn about soon).

But first, for completeness, we’ll look at how to do it using for loops.

Suppose you have an array of objects that holds users’ detail like name, age and occupation. You can decide to filter for users whose age matches a specific condition.

let users = [
    { name: 'John', age: 25, occupation: 'gardener' },
    { name: 'Lenny', age: 51, occupation: 'programmer' },
    { name: 'Andrew', age: 43, occupation: 'teacher' },
    { name: 'Peter', age: 81, occupation: 'teacher' },
    { name: 'Anna', age: 47, occupation: 'programmer' },
    { name: 'Albert', age: 76, occupation: 'programmer' },
]

You can now filter the array of objects using the age to return a new array whose age is greater than 40 and whose occupation is equal to programmer:

let filteredUsers = [];
for (let i= 0; i<users.length; i++) {
    if (users[i].age > 40 && users[i].occupation === 'programmer' ) {
        filteredUsers = [...filteredUsers, users[i]];
    }
}
console.log(filteredUsers);

This will return an array of three users who meet the specified condition.

Now, this works alright. But a better way to filter through an array is to use the ES6 filter() method.

How to Filter an Array with the filter() Method

The filter() method is an ES6 method that provides a cleaner syntax to filter through an array. It returns new elements in a new array without altering the original array.

// Syntax
myArray.filter(callbackFn)

In the callback function, you have access to each element, the index, and the original array itself:

myArray.filter((element, index, array) => { /* ... */ })

Let’s now perform the same example by filtering the user by their age and occupation:

let filteredUsers = users.filter((user) => {
    return user.age > 40 && user.occupation === 'programmer';
});

console.log(filteredUsers);

This will return the exact output, but you’ll notice that your code is quite clean. It is also important to know that you can re-write the code above with one line, and take away the return statement:

let filteredUsers = users.filter(user => user.age > 40 && user.occupation === 'programmer');
console.log(filteredUsers);

Both code blocks will output the filtered users.

The filter method makes it easy to perform more operations directly without creating as many variables because it is great at chaining with other functional methods.

For example, you can sort the filtered array and return an array of only their names:

let filteredUserNames = users.filter(user => user.age > 40 && user.occupation === 'programmer')
    .sort((a, b) => a.age - b.age)
    .map(user => user.name);

console.log(filteredUserNames); // ['Anna', 'Lenny', 'Albert']

In this article, you have seen how to filter an array in JavaScript using the filter() method. filter() provides a better syntax for filtering arrays in JavaScript.

Resource

https://www.freecodecamp.org/news/filter-arrays-in-javascript/