LearnJavaScript Array Methods: filter()

Ever needed to filter array elements? Luckily for you there is an easy way to do this in javascript by using the filter() array method. Let’s dive into how we can use this method and what it can do.

Consider the following array:

const users = ['Katie', 'Lucas', 'Mike', 'Sally', 'John'];

What if we needed to return only the users with 4 letters in their name? Let’s see how we can do that using the filter() method.

const usersWith4Letters = users.filter(user => user.length === 4);
console.log(usersWith4Letters);

//expected output: ['Mike', 'John'];

It’s a really easy method to use, but let’s breakdown the above code to see what’s going on.

As you can see, we are creating a new variable named usersWith4Letters and setting it equal to our array of users.

const usersWith4Letters = users;

Then, we are running the filter() method on that array.

users.filter();

Next we see “user”, and arrow function and then “user.length === 4”.

users.filter(user => user.length === 4);

Where did this “user” word come from? Well, this is a reference to the current item being processed in the array. Filter basically loops over each array element and does something with it. In our example, we are putting the current item being processed into this “user” reference variable and then checking if it’s length is equal to 4. If it is, the filter() method will add that item to a new array we are storing into the usersWith4Letters variable. If it’s not equal to 4, it does nothing. This process will continue to happen until the full length of the given array has been processed. The final output in our usersWith4Letters is an array containing “Mike” and “John”, which are the two elements in our array with 4 letters.

This method is a great way to filter data as needed. I hope this quick guide helps you understand how the filter() method works and you feel comfortable enough to use it in your projects going forward!

I’ll leave some more examples for this method down below.

Here, we want to grab every number in our numbers array that is above the number 33:

const numbers = [10, 20, 30, 40, 50];

const above33 = numbers.filter(num => num > 33);
console.log(above33);

//expected output:
[ 40, 50 ]

In this example, we have an array of objects. We want to check each object’s eyeColor property to see if it’s equal to “brown”. If so, add it to our studentsWithBrownEyes array:

const students = [
    {
        name: "James",
        eyeColor: "green"   
    },
    {
        name: "Jessica",
        eyeColor: "brown"
    },
    {
        name: "Donald",
        eyeColor: "blue"
    },
    {
        name: "Steph",
        eyeColor: "brown"
    }
];

const studentsWithBrownEyes = students.filter(student => student.eyeColor === 'brown');

console.log(studentsWithBrownEyes);

//expected output: 
[
    { name: 'Jessica', eyeColor: 'brown' },
    { name: 'Steph', eyeColor: 'brown' }
]

Below, we have an array called store holding objects container various products and their prices. We have a budget variable. We want to filter out what we cannot afford and return an array with all the items we can afford:

const store = [
    {
        productName: 'Phone',
        productPrice: 1000
    },
    {
        productName: 'Car',
        productPrice: 15000
    },
    {
        productName: 'Laptop',
        productPrice: 2500
    },
];

const budget = 3200

const canAfford = store.filter(item => item.productPrice <= budget);
console.log(canAfford);

//expected output: 
[
    { productName: 'Phone', productPrice: 1000 },
    { productName: 'Laptop', productPrice: 2500 }
]