El método filter() de Array.prototype nos permite filtrar solo los elementos que deseamos (segun ciertos criterios) y devolverlos en un nuevo array. Pongamos un ejemplo muy sencillo, de la siguiente lista de números, queremos obtener solamente los mayores que 10.
let numbers = [1,5,23,4,12,45,78,8,8.9,10,11,3.4,10.1,84,6]
Nuestro primer razonamiento probablemente sea hacer lo siguiente:
let greaterTen = [];
for (let i = 0; i<numbers.length; i++) {
var currentNumber = numbers[i];
if (currentNumber > 10) {
greaterTen.push(currentNumber)
}
}
console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]
Como vemos en el código, hemos creado un nuevo array vacío llamado greaterTen y luego recorremos el array number con un ciclo for y en cada iteración preguntamos si el número actual es mayor que 10. En caso serlo, se añade al array greaterTen. Finalmente hemos mostrado por consola nuestro resultado.
Funciona, pero el método nativo de JavaScript array nos lo simplifica bastante:
let greaterTen2 = numbers.filter(number => number > 10 );
console.log(greaterTen2); // [23, 12, 45, 78, 11, 10.1, 84]
El método filter recibe un callback como parámetro, el cual a su vez recibe tres parámetros:
- El item actual del array
- El indice del item actual del array
- El array actual
Internamente, este método recorre el array y para cada elemento comprueba si el callback retorna true. Finalmente, retorna un nuevo array con todos los items que pasaron la prueba.
Ten en cuenta que el callback debe retornar específicamente un valor, pues en caso contrario, se retornará un valor vacío. Para el caso anterior:
//ES6
let greaterTen = numbers.filter(number => { number > 10 });
console.log(greaterTen); // []
// with return
let greaterTen = numbers.filter(number => number > 10 ); // return implicito
console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]
// ES5
var greaterTen = numbers.filter(function(){
number > 10
});
console.log(greaterTen); // []
// with return
var greaterTen = numbers.filter(function(){
return number > 10
});
console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]
Ahora que aprendimos a usar filter() hagamos otro ejemplo. En esta ocasión queremos obtener la lista de estudiantes aprobados (en Perú se aprueba con nota 11):
let students = [
{
name: 'Alvaro',
score: 10,
},
{
name: 'Daniel',
score: 16,
},
{
name: 'Alexys',
score: 12,
},
{
name: 'Rafa',
score: 17,
},
{
name: 'Alejandro',
score: 8,
},
{
name: 'Sofia',
score: 9,
}
]
let approved = students.filter(student => student.score >= 11);
