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.

Puedes ver toda esta mis explicación mi video de Youtube, no olvides suscribirte, subimos videos con regularidad:

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:

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:

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

Aplicaciones reactivas con react, nodejs y mongodb
¿Quieres aprender a crear aplicaciones web desde cero? te invito a que veas mi nuevo libro, donde aprenderás a crear aplicaciones web con React, y un API Rest con NodeJS.

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.

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



Artículos relacionados


Introducción a React JS React es sin duda una de las tecnologías web más revolucionarias de la actualidad, pues proporciona todo un mecanismo de desarrollo de aplicaciones t...
WebSocket con Java En este artículo aprenderemos a implementar WebSocket con Java, ya que en el pasado ya había dado una completa Introducción a los WebSocket y explicam...
Componentes con estado y sin estado Una característica de los componentes, es su estado, el cual determina tanto la información que se muestras en pantalla, hasta como se representa la...
Javascript se está comiendo el mundo https://www.youtube.com/watch?v=JrAFUc4LkCE Es impresionante pensar como JavaScript, un lenguaje desarrollados en los 80’s con el único objetivo prop...
Las 4 formas de crear un componentes en React Debido a que React está creado bajo el lenguaje de programación JavaScript, este también depende de su sintaxis para construir y declarar sus componen...
React Props (Propiedades) Las propiedades son la forma que tiene React para pasar parámetros de un componente padre a los hijos.normal que un componente pase datos a los compon...
Javascript – la función map Mediante la función map es posible crear un nuevo arreglo a partir de uno existente, tan simple como eso ¿o no?. Puedes ver este mismo art...
Javascript – Async/Await La finalidad de los operadores async y await es simplificar aun más la forma en que trabajamos con las promesas, de tal forma que permite ejecuta...
Introducción a WebWorkers   Los WebWorkers son una de las nuevas características de JavaScript que permite crear aplicaciones multiprocesos. Desde su inicio JavaScript ...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *