What Array.filter() does in vanilla JS
Continuing my series on what various array methods do and how they work, today we’re looking at Array.filter()
.
An example
Imagine that you have an array of data. Perhaps it’s a list of wizards and the house they belong to.
var wizards = [
{
name: 'Harry Potter',
house: 'Gryfindor'
},
{
name: 'Cedric Diggory',
house: 'Hufflepuff'
},
{
name: 'Tonks',
house: 'Hufflepuff'
},
{
name: 'Ronald Weasley',
house: 'Gryfindor'
},
{
name: 'Hermione Granger',
house: 'Gryfindor'
}
];
You want to get a list of only the wizards in Gryfindor.
Using Array.forEach()
With Array.forEach()
, you would create a new array. Then you would loop through the wizards
array and push matching wizards to your new array.
// Create a new array
var gryfindor = [];
// Loop through each wizard
wizards.forEach(function (wizard) {
// If the wizard is in Gryfindor, push to the new array
if (wizard.house === 'Gryfindor') {
gryfindor.push(wizard);
}
});
Using Array.filter()
With Array.filter()
, you don’t have to create the new array beforehand. You can define the variable as the output of Array.filter()
.
Inside the Array.filter()
callback function, return true
if the item should be added to the new array, and false
if it shouldn’t. Under-the-hood, Array.filter()
loops through each item in the original array, runs your callback method on each item, creates a new array, and pushes the items that return true
.
// Create a new array from the wizard array
var gryfindor = wizards.filter(function (wizard) {
// Only include wizards from the Gryfindor house
if (wizard.house === 'Gryfindor') return true;
return false;
});
You could write this even more succinctly like this.
// Create a new array from the wizard array
var gryfindor = wizards.filter(function (wizard) {
// Only include wizards from the Gryfindor house
return wizard.house === 'Gryfindor';
});