Domina los métodos más poderosos para manipulación de arrays en JavaScript: map, filter y reduce. Esta guía completa explica cada método con ejemplos prácticos y casos de uso reales para transformar, filtrar y reducir datos eficientemente.
Diagrama visual de map, filter y reduce trabajando sobre un array
Contenido del Artículo
Array.map(): Transformación de datos
Crea un nuevo array transformando cada elemento:
Inmutable
Devuelve nuevo array sin modificar original
Transformación
Aplica función a cada elemento
Misma longitud
Mantiene el mismo número de elementos
// Transformar array de números
const numeros = [1, 2, 3, 4];
const cuadrados = numeros.map(n => n * n);
// [1, 4, 9, 16]
// Transformar array de objetos
const productos = [
{ id: 1, nombre: 'Camiseta', precio: 20 },
{ id: 2, nombre: 'Pantalón', precio: 35 }
];
const nombres = productos.map(p => p.nombre);
// ['Camiseta', 'Pantalón']map() es ideal para transformar datos de API a formato requerido por UI
Array.filter(): Filtrado de elementos
Crea nuevo array con elementos que pasan un test:
// Filtrar números mayores a 10
const valores = [5, 12, 8, 15, 3];
const mayores = valores.filter(n => n > 10);
// [12, 15]
// Filtrar productos en stock
const productos = [
{ id: 1, nombre: 'Camiseta', stock: 10 },
{ id: 2, nombre: 'Pantalón', stock: 0 }
];
const disponibles = productos.filter(p => p.stock > 0);
// [{ id: 1, nombre: 'Camiseta', stock: 10 }]
Array.reduce(): Reducción a valor único
Reduce array a un único valor mediante función acumuladora:
// Sumar todos los valores
const numeros = [1, 2, 3, 4];
const suma = numeros.reduce((acum, actual) => acum + actual, 0);
// 10
// Contar ocurrencias
const palabras = ['manzana', 'banana', 'manzana', 'naranja'];
const conteo = palabras.reduce((acc, palabra) => {
acc[palabra] = (acc[palabra] || 0) + 1;
return acc;
}, {});
// { manzana: 2, banana: 1, naranja: 1 }
// Aplanar arrays anidados
const arrays = [[1, 2], [3, 4], [5, 6]];
const plano = arrays.reduce((acc, arr) => [...acc, ...arr], []);
// [1, 2, 3, 4, 5, 6]| Parámetro | Descripción |
|---|---|
| acumulador | Valor acumulado en cada iteración |
| valorActual | Elemento actual del array |
| índice (opcional) | Índice del elemento actual |
| array (opcional) | Array original |
| valorInicial | Valor inicial del acumulador |
Combinando métodos
Potencia de encadenar map, filter y reduce:
// Calcular total de productos en stock
const productos = [
{ nombre: 'Camiseta', precio: 20, stock: 5 },
{ nombre: 'Pantalón', precio: 35, stock: 0 },
{ nombre: 'Zapatos', precio: 50, stock: 10 }
];
const totalStock = productos
.filter(p => p.stock > 0) // Filtrar productos con stock
.map(p => p.stock) // Extraer solo stock
.reduce((acc, stock) => acc + stock, 0); // Sumar stock
// 15
// Obtener nombres de productos caros en stock
const productosCaros = productos
.filter(p => p.stock > 0 && p.precio > 30)
.map(p => p.nombre);
// ['Zapatos']Encadenamiento permite crear pipelines de procesamiento de datos legibles
