filter() en JavaScript
El lenguaje provee al desarrollador una serie de métodos nativos que facilitan enormemente la redacción de código legible y limpio, amén de reducir las líneas de código de un proyecto.
Uno de estos métodos es el famoso filter() que muchas personas consideran pertenece a la última especificación estable del lenguaje (ES6) pero de hecho este y varios otros métodos vienen desde mucho antes, en concreto filter() pertenece a la especificación ES5 publicada en 2009, ¡hace más de una década!
Ahora bien, que les parece si echamos un vistazo a lo que dice la documentación oficial acerca del método filter():
El método
filter()crea un nuevo array con todos los elementos que cumplan la condición implementada por la función dada.
— MDN (Mozilla Developer Network)
La W3C define a filter() de la siguiente manera:
El método
filter()crea un arreglo lleno con todos los elementos del arreglo que pasan una prueba (proporcionada por una función).
— W3C (World Wide Web Consortium)
Los conceptos técnicos oficiales siempre están disponibles, pero no son de mucha utilidad, es mejor complementarlos con ejemplos prácticos, así que veamos un poco de código:
Sintaxis
let newArray = array.filter(function(currentValue, index, arr);
Donde:
🔹 array es el arreglo sobre el cual se realizará el filtro correspondiente.
🔹 filter es el método como tal.
🔹 currentValue es el elemento iterador.
🔹 index la posición actual del elemento iterador.
🔹 arr es el arreglo sobre el cual se itera.
currentValuees el único parámetro obligatorio
Filtrar un arreglo
Ejemplo #1
Imaginemos que tenemos un arreglo de vegetales y deseamos filtrar todos aquellos que tengan 6 o menos caracteres, una posible solución usando filter() sería:
let arrayVegetales = ["Zanahoria", "Calabaza", "Cebolla", "Tomate", "Ajo"];
let newArrayVegetales = arrayVegetales.filter(vegetal => vegetal.length <= 6);
console.log(newArrayVegetales);
//salida: ["Tomate", "Ajo"]
Ejemplo #2
Ahora supongamos que tenemos un arreglo de números y deseamos saber los todos los primos que pueda contener dicho arreglo.
let arrayNumeros = [2,3,8,20,9,13,17,23,24];
let arrayPrimos = arrayNumeros.filter( numero => {
// Casos especiales
if (numero == 0 || numero == 1 || numero == 4) return false;
for (let x = 2; x < numero / 2; x++) {
if (numero % x == 0) return false;
}
// Si no se pudo dividir por ninguno de los de arriba, sí es primo
return numero;
})
console.log(arrayPrimos);
//salida: [2, 3, 13, 17, 23]
La salida es un nuevo arreglo que contiene todos los primos del arreglo original. Bastante sencillo.
Filtrado de arreglos de objetos
Ejemplo #3
Como ejemplo final analicemos el caso de filtrar un array de objetos.
Supongamos que contamos con el siguiente arreglo:
let users = [
{
nombre: "Carlos",
edad: 19,
estado: false
},
{
nombre: "Ana",
edad: 15,
estado: true
},
{
nombre: "Andres",
edad: 26,
estado: true
}
];
Se desea obtener los datos del usuario cumpliendo las siguientes condiciones:
🔹 que sea mayor de edad.
🔹 que su estado sea true.
Dicho esto, bastaria con hacer lo siguiente:
let newUsers = users.filter((user)=>{
if(user.edad>=18 && user.estado){
return user;
}
});
console.log(newUsers);
//salida:
// {
// edad: 26,
// estado: true,
// nombre: "Andres"
// }
Conclusiones 👍
Después de haber comprendido un poco mejor el funcionamiento del método filter() considero pertinente mencionar las siguientes conclusiones:
🔸 El método filter() se aplica a arreglos simples y arreglos de objetos.
🔸 Crea un nuevo arreglo a partir de una existente filtrando los elementos mediante un criterio dado.
🔸 No altera el arreglo original (inmutabilidad del código).
🔸 Recibe un callback como parámetro o una arrow function (si usas JavaScript moderno).
🔸 Cada elemento del array es un argumento para el callback o la arrow function.
Si te interesa puedes revisar mi post dedicado al método map() en el siguiente enlace: https://dev.to/crisfer4217/las-bondades-del-metodo-map-en-javascript-4bo1
Top comments (0)