Este artículo demuestra cómo usar eficazmente los métodos map() y filter() de JavaScript, individualmente y en combinación, para el procesamiento eficiente de matrices. Exploraremos ejemplos prácticos para ilustrar su potencia y versatilidad en la manipulación de datos.
Tabla de Contenido
- JavaScript Map
- JavaScript Filter
- Encadenando Map y Filter
- Ejemplo del Mundo Real: Filtrado de Productos de Comercio Electrónico
- Conclusión
JavaScript Map
El método map() es una función de orden superior que itera sobre cada elemento de una matriz y aplica una función de devolución de llamada proporcionada. Esta función transforma cada elemento, y map() devuelve una nueva matriz que contiene los valores transformados. La matriz original permanece sin cambios.
const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map(number => number * 2); // [2, 4, 6, 8, 10]
console.log(doubledNumbers);
console.log(numbers); // La matriz original permanece sin cambios
JavaScript Filter
El método filter() también itera a través de una matriz. Sin embargo, en lugar de transformar elementos, incluye selectivamente elementos basados en una condición definida por una función de devolución de llamada. La función de devolución de llamada debe devolver true para incluir el elemento y false para excluirlo. filter() devuelve una nueva matriz que contiene solo los elementos que satisfacen la condición.
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0); // [2, 4, 6]
console.log(evenNumbers);
Encadenando Map y Filter
El verdadero poder de map() y filter() se revela cuando se encadenan. Esto permite una forma concisa y eficiente de realizar manipulaciones complejas de datos. filter() se aplica típicamente primero para reducir la matriz, seguido de map() para transformar los elementos restantes.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenSquared = numbers
.filter(number => number % 2 === 0)
.map(number => number * number); // [4, 16, 36, 64, 100]
console.log(evenSquared);
Ejemplo del Mundo Real: Filtrado de Productos de Comercio Electrónico
Imaginemos una aplicación de comercio electrónico. Tenemos una matriz de objetos de producto:
const products = [
{ name: "Camisa", price: 25, inStock: true, category: "ropa" },
{ name: "Pantalones", price: 40, inStock: false, category: "ropa" },
{ name: "Zapatos", price: 75, inStock: true, category: "zapatos" },
{ name: "Sombrero", price: 15, inStock: true, category: "accesorios" },
{ name: "Chaqueta", price: 60, inStock: true, category: "ropa" }
];
Queremos mostrar solo los nombres de los artículos de ropa en stock. Podemos lograr esto elegantemente usando filter() y map():
const inStockClothingNames = products
.filter(product => product.inStock && product.category === "ropa")
.map(product => product.name);
console.log(inStockClothingNames); // ['Camisa', 'Chaqueta']
Conclusión
Combinar map() y filter() ofrece un enfoque potente y legible para la manipulación de matrices en JavaScript. Este estilo funcional promueve un código más limpio, reduce la necesidad de bucles detallados y mejora el mantenimiento. Recuerda que ambos métodos devuelven nuevas matrices, preservando la inmutabilidad de los datos originales.