¿Have you encounter a situation where you need to refine some data? Let's imagine that you need to provide the most recent order on a big list of orders, or all the users that are active on a list of users, or even obtain a list of numbers greater than 50. The question is, How can I solve all these types of issues described above?
The answer is filtering the data based on a criteria. JavaScript provides a method to filter arrays easily (you could also filter arrays by using a for loop).
Introducing the Array.filter() method
The filter() method returns a new array based on a criteria, in other words, returns a subset of elements from the Array that invokes the method. It receives a function callback that returns true or false.
Syntax
arrayToFilter.filter((element, index, array) => {});The best way to learn for me is by practicing, so let's solve the following exercises:
1. Given an array of numbers, return the ones above 20:
const numbers = [6,25,47,12,31,85,539,34,76,71,88,69];
numbers.filter( number => number > 20 ); // [ 25, 47, 31, 85, 539, 34, 76, 71, 88, 69 ]2. Given an array of numbers, return the odd ones:
const numbers = [6,25,47,12,31,85,539,34,76,71,88,69];
numbers.filter( number => number % 2 !== 0 ); // [ 25, 47, 31, 85, 539, 71, 69 ]3. Given an array of numbers, return the ones with an even position in the array
const numbers = [6,25,47,12,31,85,539,34,76,71,88,69];
numbers.filter( (number, index) => index % 2 === 0 ); // [ 6, 47, 31, 539, 76, 88 ]4. Let's work with Strings, given an array of strings return the ones in which the length is greater than 6:
const names = ['Rebequita', 'Héctor', 'Naty', 'Samantha', 'Rebeca', 'Alessandrito'];
names.filter( name => name.length > 6 ); // [ 'Rebequita', 'Samantha', 'Alessandrito' ]5. Given an array with the F.C. Barcelona's players, filter out the forwards
const barcelonaPlayers = [
{ name: 'Ter Stegen', position: 'Goalkeeper' },
{ name: 'Neto', position: 'Goalkeeper' },
{ name: 'Sergiño Dest', position: 'Defender' },
{ name: 'Gerard Piqué', position: 'Defender' },
{ name: 'Ronald Araújo', position: 'Defender' },
{ name: 'Dani Alves', position: 'Defender' },
{ name: 'Clément Lenglet', position: 'Defender' },
{ name: 'Jordi Alba', position: 'Defender' },
{ name: 'Óscar Mingueza', position: 'Defender' },
{ name: 'Samuel Umtiti', position: 'Defender' },
{ name: 'Eric García', position: 'Defender' },
{ name: 'Sergio Busquets', position: 'Midfielder' },
{ name: 'Riqui Puig', position: 'Midfielder' },
{ name: 'Nico González', position: 'Midfielder' },
{ name: 'Pedri', position: 'Midfielder' },
{ name: 'Sergi Roberto', position: 'Midfielder' },
{ name: 'Frenkie de Jong', position: 'Midfielder' },
{ name: 'Ousmane Dembélé', position: 'Forward' },
{ name: 'Memphis Depay', position: 'Forward' },
{ name: 'Ansu Fati', position: 'Forward' },
{ name: 'Adama Traoré', position: 'Forward' },
{ name: 'Martín Braithwaite', position: 'Forward' },
{ name: 'Luuk de Jong', position: 'Forward' },
{ name: 'Ferran Torres', position: 'Forward' },
{ name: 'Pierre-Emerick Aubameyang', position: 'Forward' },
];
barcelonaPlayers.filter( player => player.position.toLocaleLowerCase() === 'forward' );
/*
[
{ name: 'Ousmane Dembélé', position: 'Forward' },
{ name: 'Memphis Depay', position: 'Forward' },
{ name: 'Ansu Fati', position: 'Forward' },
{ name: 'Adama Traoré', position: 'Forward' },
{
name: 'Martín Braithwaite',
position: 'Forward'
},
{ name: 'Luuk de Jong', position: 'Forward' },
{ name: 'Ferran Torres', position: 'Forward' },
{
name: 'Pierre-Emerick Aubameyang',
position: 'Forward'
}
]
*/