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',
},
];
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
So, the entire filter would look like this.
const numbers = [25,50,75];
const lessThan50 = numbers.filter( num => {
return num > 50;
})
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;
}
);
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
);
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;
}
);
And again, we can use the abbreviated syntax for implicit returns.
const shorterCharacters = characters.filter(
(character) => character.height < 200
);
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'
);
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'
);
Wrap Up
If you want to learn more about JavaScript, make sure to subscribe on YouTube!
Top comments (4)
Ohh! Great Article. Thanks for it James 😎💪
Glad you enjoyed it!
A good way to filter an array is to also incorporate
TypedObject
s in to it. :pGrateful for the video, glad for the article! Keep up the fantastic work!