Las bondades del método .filter() en JavaScript
Tags: javascript, webdev, arrays, spanish
Published: 2020-06-22 15:28:35


![logo](https://raw.githubusercontent.com/crisdux/img-dev-to/master/map/1200px-Unofficial_JavaScript_logo_2.svg.png)

## **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](https://www.w3schools.com/js/js_es6.asp)) pero de hecho este y varios otros métodos vienen desde mucho antes, en concreto `filter()` pertenece a la especificación [ES5](https://www.w3schools.com/js/js_es5.asp) 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](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter))

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](https://www.w3schools.com/jsref/jsref_filter.asp))

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](https://d.wattpad.com/story_parts/254/images/151dd30faa71ecbb52197632650.gif)

## **Sintaxis**

```javascript
let newArray = array.filter(function(currentValue, index, arr);
```

Donde:
:small_blue_diamond: `array` es el arreglo sobre el cual se realizará el filtro correspondiente. 
:small_blue_diamond: `filter` es el método como tal. 
:small_blue_diamond: `currentValue` es el elemento iterador.
:small_blue_diamond: `index` la posición actual del elemento iterador. 
:small_blue_diamond: `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: 

```javascript
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.

```javascript
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:

```javascript
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: 

:small_blue_diamond: que sea mayor de edad.
:small_blue_diamond: que su estado sea `true`.

Dicho esto, bastaria con hacer lo siguiente:

```javascript
let newUsers = users.filter((user)=>{
  if(user.edad>=18 && user.estado){
    return user;
  }
});
console.log(newUsers);
//salida:
// {
//   edad: 26,
//   estado: true,
//   nombre: "Andres"
// }
```

## **Conclusiones** :+1:
Después de haber comprendido un poco mejor el funcionamiento del método `filter()` considero pertinente mencionar las siguientes conclusiones:
 
:small_orange_diamond: El método `filter()` se aplica a arreglos simples y arreglos de objetos.
:small_orange_diamond: Crea un nuevo arreglo a partir de una existente filtrando los elementos mediante un criterio dado.
:small_orange_diamond: No altera el arreglo original (inmutabilidad del código).
:small_orange_diamond: Recibe un `callback` como parámetro o una arrow function (si usas JavaScript moderno).
:small_orange_diamond: 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](https://3.bp.blogspot.com/-gXX4hZYuIMY/W4-9PVNLZ6I/AAAAAAAAAHg/fiRR5gQ0CgcyrL2uUzKrb1Z7vc8dBX2lQCLcBGAs/s640/array-methods.jpg)

---

## Referencias :link:
- https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/filter
- https://ed.team/blog/javascript-filtrar-elementos-de-un-array-con-filter
- https://www.w3schools.com/jsref/jsref_filter.asp