DEV Community

loading...
Cover image for Las bondades del método .filter() en JavaScript

Las bondades del método .filter() en JavaScript

duxtech profile image dux Updated on ・3 min read

logo

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:

shido

Sintaxis

let newArray = array.filter(function(currentValue, index, arr);
Enter fullscreen mode Exit fullscreen mode

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.

currentValue es 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"]
Enter fullscreen mode Exit fullscreen mode

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]

Enter fullscreen mode Exit fullscreen mode

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
  }
];
Enter fullscreen mode Exit fullscreen mode

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"
// }
Enter fullscreen mode Exit fullscreen mode

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

test


Referencias 🔗

Discussion (0)

pic
Editor guide