DEV Community

loading...
Cover image for JavaScript Array Filter Method Practice in 5 Minutes

JavaScript Array Filter Method Practice in 5 Minutes

jamesqquick profile image James Q Quick Originally published at jamesqquick.com on ・2 min read

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!

Discussion (4)

pic
Editor guide
Collapse
prajjwaldatir profile image
Prajjwal Datir

Ohh! Great Article. Thanks for it James 😎💪

Collapse
jamesqquick profile image
James Q Quick Author

Glad you enjoyed it!

Collapse
baenencalin 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!