Curso de JavaScript
Dale vida a la web.
Aprende a programar, crea interacciones y construye proyectos reales.
map, filter y reduce recorren un array y devuelven un resultado nuevo: transformar cada valor, quedarte solo con algunos, o resumirlos todos en un solo número.
Explicación
map, filter y reduce recorren un array y devuelven un resultado nuevo, sin que tengas que escribir un for:
array.map(fn)Devuelve un array nuevo con el resultado de aplicar fn a cada elemento. El array original no cambia.
array.filter(fn)Devuelve un array nuevo solo con los elementos para los que fn devuelve true.
array.reduce(fn, inicial)Recorre el array acumulando un solo resultado (como una suma o un total), empezando desde el valor inicial.
precio => precio * 0.9Función flecha que recibe cada elemento del array y devuelve el valor transformado o la condición evaluada.
Reto rápido
Cambia la condición del filter a precio > 40 y agrega un console.log mostrando cuántos elementos quedaron (caros.length).
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
map siempre devuelve un array del mismo tamaño que el original; filter puede devolver uno más chico (o vacío); reduce devuelve un solo valor, no un array.
Dato extra
Estos tres métodos se pueden encadenar: precios.filter(...).map(...) primero filtra y luego transforma el resultado, todo en una sola línea.
Error común
Olvidar el valor inicial en reduce (array.reduce((a, b) => a + b) sin el segundo argumento): si el array está vacío, reduce sin valor inicial lanza un error en vez de devolver 0.
Siguiente paso
Ya sabes transformar, filtrar y resumir arrays completos con map, filter y reduce. En el siguiente módulo vas a trabajar con objetos, la otra estructura de datos fundamental de JavaScript.
Ir a la siguiente lección