Método filter en JavaScript

| Última modificación: 25 de octubre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Los métodos, como el método filter en JavaScript, son una parte muy importante de la programación funcional, un estilo de programación en el que se utilizan funciones para crear la mayoría de acciones. Dentro de este estilo, nos encontramos con los métodos que nos permiten modificar elementos de un array. En este post, te enseñaremos cómo funciona uno de ellos: el método filter en JavaScript.

¿Qué es el método filter en JavaScript?

En JavaScript, un método es una función que forma parte de un objeto. El método filter en JavaScript, al igual que el método forEach y el método map, es una función que pertenece al objeto array y por ende nos permite manipular sus elementos.

Ya hemos visto antes que el método forEach nos permite recorrer los elementos de un array y aplicar a cada uno de ellos una función. También hemos aprendido que el método map nos permite hacer lo mismo, pero le añade el hecho de poder transformar los elementos y darnos un nuevo array con los elementos transformados.

Ahora, el método filter en JavaScript también nos permite recorrer todos los elementos de un array con una función. La diferencia es que este método servirá de filtro para determinar qué elementos tienen una característica específica. Después de aplicar este filtro, el método filter de JavaScript nos dará un nuevo array que contiene solo los elementos con la característica de la función. Es decir, con este método insertamos ciertos elementos y obtenemos solo aquellos que son verdaderos a la función.

Te invitamos a pensar en los métodos de arrays como cajas. En estas, tenemos una entrada y una salida. Entonces, el array original tendrá unos elementos de entrada que introducimos en la función. Luego, en la salida, tendremos a disposición otros elementos, ya sean transformados (método map), filtrados (método filter) o reducidos (método reduce). A veces, incluso no tenemos ningún elemento de salida, como sucede en el método forEach.

¿Cómo funciona el método filter en JavaScript?

Al igual que la mayoría de funciones que nos permiten modificar elementos de un array, el método filter en JavaScript tiene tres componentes básicos: un array original, el comando de método y una función escrita a modo de arrow function.

Supongamos que tenemos un array de números que representan edades. Con el método filter, podemos filtrar qué valores representan a un mayor de edad. Entonces, lo escribiríamos de la siguiente manera:

[17, 10, 23, 19].filter(age => age > 18)

El resultado de esta función sería el array siguiente:

[23, 19]

Ten presente que a cambio de age puedes escribir cualquier palabra. Lo importante en los métodos que manipulan arrays es que el primer valor de la función representará los elementos del array. Entonces, podríamos haber puesto value, ítem o cualquier otra palabra. Esto funcionará siempre que usemos la misma palabra para determinar lo que debe suceder en la arrow function. El método con el que escribamos nuestra arrow function también es indiferente, pues cualquiera de sus estilos de escritura funcionará.

¿Qué sigue?

¡En KeepCoding creemos que la práctica es la mejor forma de aprender! Por ello, ahora que sabes cómo funciona el método filter en JavaScript, te invitamos a que lo pruebes en tus propias líneas de código. Para seguir aprendiendo sobre cómo desarrollar con este lenguaje de programación, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. Aquí aprenderás todo lo necesario para dominar este y otros lenguajes de programación. Si quieres ser un experto en desarrollo web, ¡no te pierdas esta oportunidad!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado