DEV Community

Cover image for JavaScript Array Filter Method Practice in 5 Minutes
James Q Quick
James Q Quick

Posted on • Originally published at jamesqquick.com on

JavaScript Array Filter Method Practice in 5 Minutes

JavaScript arrays have some powerful built-in methods that simplify working with them. In this article, let's look at the array filter()method.

Getting Started

This post is part of a series focused on learning JavaScript array methods. You can find the starter code in this repository.

In that repository, there is a worksheet.js file with some sample Star Wars data. So, clone the repository, open up the worksheet.js file, and scroll down to the Filter section. Alternatively, you can copy the sample data into a JavaScript file without cloning if you choose.

Here's the sample data.

const characters = [
    {
        name: 'Luke Skywalker',
        height: 172,
        mass: 77,
        eye_color: 'blue',
        gender: 'male',
    },
    {
        name: 'Darth Vader',
        height: 202,
        mass: 136,
        eye_color: 'yellow',
        gender: 'male',
    },
    {
        name: 'Leia Organa',
        height: 150,
        mass: 49,
        eye_color: 'brown',
        gender: 'female',
    },
    {
        name: 'Anakin Skywalker',
        height: 188,
        mass: 84,
        eye_color: 'blue',
        gender: 'male',
    },
];
Enter fullscreen mode Exit fullscreen mode

Array Filter Overview

The filter method returns a new array with only the items that we wish to be included. We tell the filter method which items to include by passing it a callback function. This callback function accepts one parameter (each item in the array), and then we return a boolean of whether or not that item should be included in the filtered results.

For example, if we have an array of numbers and we only want the numbers that are greater than 50, our filter condition would look like this.

num > 50
Enter fullscreen mode Exit fullscreen mode

So, the entire filter would look like this.

const numbers = [25,50,75];
const lessThan50 = numbers.filter( num => {
  return num > 50;
})
Enter fullscreen mode Exit fullscreen mode

Let's take a look at a few exercises.

1. Get characters with mass greater than 100

Remember we call filter by passing it a callback function that determines whether or not a given item should be filtered or included. In this case, the condition is character.mass > 100. So, our filter will look like this.

const greater100Characters = characters.filter(
    (character) => {
      return character.mass > 100;
    }
);

Enter fullscreen mode Exit fullscreen mode

Since our callback function has a one-line return, we can simplify this arrow function by omitting the return keyword and the function brackets. This syntax implies an implicit return which means that whatever comes after the => will be automatically returned.

const greater100Characters = characters.filter(
    (character) => character.mass > 100
);

Enter fullscreen mode Exit fullscreen mode

2. Get characters with height less than 200

Now, our condition changes a little bit. The condition is character.height < 200.

const shorterCharacters = characters.filter(
    (character) => {
      return character.height < 200;
    }
);

Enter fullscreen mode Exit fullscreen mode

And again, we can use the abbreviated syntax for implicit returns.

const shorterCharacters = characters.filter(
    (character) => character.height < 200
);

Enter fullscreen mode Exit fullscreen mode

3. Get all male characters

Now, we only want to get male characters by checking the gender property of each character.

const maleCharacters = characters.filter(
    (character) => character.gender === 'male'
);
Enter fullscreen mode Exit fullscreen mode

4. Get all female characters

Lastly, we can tweak the previous filter to search for the string "female" as the gender property.

const femaleCharacters = characters.filter(
    (character) => character.gender === 'female'
);
Enter fullscreen mode Exit fullscreen mode

Wrap Up

If you want to learn more about JavaScript, make sure to subscribe on YouTube!

Top comments (4)

Collapse
 
monarch profile image
Prajjwal

Ohh! Great Article. Thanks for it James 😎💪

Collapse
 
jamesqquick profile image
James Q Quick

Glad you enjoyed it!

Collapse
 
calinzbaenen profile image
Calin Baenen

A good way to filter an array is to also incorporate TypedObjects in to it. :p

Collapse
 
cdthomp1 profile image
Cameron Thompson

Grateful for the video, glad for the article! Keep up the fantastic work!