Javascript: filtrar elementos de un array con .filter()

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.

1let numbers = [1,5,23,4,12,45,78,8,8.9,10,11,3.4,10.1,84,6]
2

Nuestro primer razonamiento probablemente sea hacer lo siguiente:

1let greaterTen = [];
2
3for (let i = 0; i<numbers.length; i++) {
4  var currentNumber = numbers[i];
5  if (currentNumber > 10) {
6    greaterTen.push(currentNumber)
7  }
8}
9
10console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]
11

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:

1let greaterTen2 = numbers.filter(number => number > 10 );
2console.log(greaterTen2); // [23, 12, 45, 78, 11, 10.1, 84]
3

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:

1//ES6
2let greaterTen = numbers.filter(number => { number > 10 });
3console.log(greaterTen); // []
4
5// with return
6let greaterTen = numbers.filter(number => number > 10 ); // return implicito
7console.log(greaterTen); // [23, 12, 45, 78, 11, 10.1, 84]
8
9// ES5
10var greaterTen = numbers.filter(function(){ 
11  number > 10 
12});
13console.log(greaterTen); // []
14
15// with return
16var greaterTen = numbers.filter(function(){ 
17  return number > 10 
18});
19console.log(greaterTen);  // [23, 12, 45, 78, 11, 10.1, 84]
20

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):

1let students = [
2  {
3    name: 'Alvaro',
4    score: 10,
5  },
6  {
7    name: 'Daniel',
8    score: 16,
9  },
10  {
11    name: 'Alexys',
12    score: 12,
13  },
14  {
15    name: 'Rafa',
16    score: 17,
17  },
18  {
19    name: 'Alejandro',
20    score: 8,
21  },
22  {
23    name: 'Sofia',
24    score: 9,
25  }
26]
27
28let approved = students.filter(student => student.score >= 11);
29

¿Quieres saber más? Inscríbete a nuestro curso JavaScript Desde Cero. 25 horas de clase con proyecto de fin de curso, contenidos bonus y respuestas a tus consultas:http://escuela.digital/js