Ejemplo de filter con JavaScript

javascript

El método filter() de JavaScript es una potente opción para filtrar colecciones de datos.

Mediante esta funcionalidad podríamos partir de un array y obtener uno nuevo, a partir del primero, pero solo con los datos que cumplan determinadas condiciones que establecemos en nuestro código.

¿Algunos ejemplos? Podríamos pensar en palabras de cierta cantidad de caracteres, o términos que empiecen (o terminen) con determinada letra. También podríamos realizar filtros más complejos en estructuras JSON donde se cumpla alguna condición para una clave en particular.

Un ejemplo con código

Para comprender mejor como utilizar filter() veremos un ejemplo concreto. Pensemos en una lista de nombre que están en un array. Ahora supongamos que deseamos tener solo los nombres “cortos”, es decir los que tienen hasta cierta cantidad de caracteres. Para el ejemplo estableceremos este límite en 5, es decir que el array resultante, al que llamaremos nombres_cortos, tendrá solo aquellos que tengan 5 o menos caracteres.

Para lograr lo detallado en el párrafo anterior, podríamos escribir en JavaScript un código como el siguiente:

const nombres = ["Damian","Rafael","Maria","Elena","Ana"];
// Crear un nuevo array con nombres de hasta 5 caracteres
const nombres_cortos = nombres.filter(nombre => nombre.length <= 5);
console.log(nombres_cortos);
// Ejemplo by @damiande

¿Sencillo, verdad? Con filter() podremos realizar con simpleza muchos procedimientos habituales para un programador, en lo que se refiere a filtrado de datos.

Para tener en cuenta sobre filter()

Siempre destaco en mis clases que esta característica, incorporada en JavaScript, es de gran utilidad en la mayoría de los proyectos que nos puedan tocar encarar en el mundo laboral y que es muy importante conocer su mecánica de uso.

En este sentido es importante señalar que al momento de recurrir a filter() también es posible llamar una función callback para el filtrado y que podremos pasar valores adicionales, como el valor actual, el índice del elemento actual, el array sobre el que se filtra y el valor que sería this cuando se llama el callback.

Para aprender más

Si te pareció útil el método filter(), de seguro te gustará aprender como funciona map(). Si no lo conoces aún, te recomiendo leer: Qué es y como utilizar el método map() en JavaScript.

Si estás comenzando con JavaScript y aún no has encontrado el editor con el cual trabajar, te recomiendo leer el artículo: Visual Studio Code: características principales.

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

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

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.