Skip to main content Accessibility Feedback

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';
});

Here’s a demo.