Javascript – la función filter

La función filter permite filtrar los elementos de un array y generar uno nuevo con todos los elementos que cumplen una determinada condición.

Sin lugar a duda, filter es una de las funciones más importantes a la hora de trabajar con arreglos, pues permite filtrar fácil y rápido los elementos de un array sin afectar el array original, respetando la inmutabilidad del array original.

Quizás te interese ver como funciona la función map

La función filter está definida en Array.prototype, lo que hace que todos los arrays cuente con esta función por default. Como parte de su definición, filter acepta como parámetro una función (callback) la cual se ejecutará por cada elemento del array y deberá de retornar true para indicar que el elemento actual debe de ser incluido en el nuevo array o false en caso contrario. Veamos un ejemplo:

let numArray = [1,2,3,4,5,6,7,8,9,10] 
let filterNumArray = numArray.filter(element => element > 5)

console.log("numArray => ", numArray)
console.log("filterNumArray => ", filterNumArray)

//Output
//numArray =>  [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]
//filterNumArray =>  [ 6, 7, 8, 9, 10 ]

En este ejemplo hemos creado el array numArray, el cual cuenta 10 número, seguido, utilizamos la función filter para filtrar todos los números mayores a 5, dando como resultado el array filterNumArray, el cual es nuevo arreglo.

Finalmente podemos comprobar el resultado de la ejecución, donde el array original numArray permanece intacto, es decir, no fue mutado, por otro lado, se creo el nuevo array filterNumArray que contiene solo los número mayores a 5.

Hace un momento dijimos que filter recibe una función como parámetro, pero a partir de la versión ECMAScript 6, es posible enviarle una Arrow funtion, la cual tiene el mismo resultado que enviarle una función, veamos las diferencias:

//ECMAScript 5
var filterNumArray = numArray.filter(function(element) { return element > 5})
//ECMAScript 6
let filterNumArray = numArray.filter(element => element > 5)

El resultado será el mismo, la única diferencia es que las expresiones Arrow Functions son más limpias y memos verbosas

Parámetros disponibles

La función que enviamos a filter no solo recibe el elemento actual del array, si no que tiene otros parámetros que podemos definir de forma opcional cuando sea necesario:

• element: elemento actual que está siendo procesado
• index: corresponde a la posición (index) del element dentro del array.
• array: corresponde al array original que estamos filtrando.

newProductsArray = productsArray.filter((product, index) => index > 2)
console.log("newProductsArray => ", newProductsArray)
//newProductsArray =>  [ 
//  { id: 4, name: 'watermelon', price: 400 },
//  { id: 5, name: 'grape', price: 500 } 
//]

En este nuevo ejemplo hemos filtrado todos los elementos que su index sea mayor a 2.

Cabe mencionar que si bien, filter no muta el array original, hay que tener cuidado con el parámetro array, pues este corresponde al array original, por lo que cualquier cambio que realicemos sobre el, tendrá un impacto sobre el array original, provocando su mutación, lo cual es considerado un anti-pattern y siempre debe de ser evitado.

Conclusiones

Cabe mencionar que si bien, la función filter no muta el array original, si que es posible mutarlo mediante el parámetro array, el cual contiene el array original y que desde la función