El uso de JavaScript reduce es uno de los más habituales cuando hablamos de programación funcional . Por defecto esta función se encarga de “reducir” un conjunto de elementos a un único resultado. Sin embargo soporta bastantes más opciones que le aportan flexibilidad vamos a verlo partiendo del ejemplo más básico:
var lista=[1,2,3,4];
var resultado1= lista.reduce(function(total,valor) {
return total+valor;
})
console.log (resultado1);
En este caso la función recibe dos argumentos. El primer argumento es el acumulador , en este caso le hemos llamado total , y el segundo argumento es el valor de cada elemento del array.
Con eso en principio nos es suficiente para realizar la suma de los primeros n elementos.
JavaScript Reduce y sus parámetros adicionales
Muchas veces nos olvidamos que de javaScript reduce soporta parámetros adicionales que le permiten ganar en flexibilidad y abordar operaciones más complejas que simplemente el sumar un conjunto de elementos. Estos parámetros son el indice del array y el propio array de elementos.
Vamos a usar estos parámetros adicionales para calcular el elemento mayor de un array e imprimirlo en la consola:
var mayor= lista.reduce(function(resultado,valor,indice,array) {
if (indice< array.length){
if (resultado<valor) resultado=valor;
}
return resultado;
})
console.log(mayor);
El resultado lo podemos ver en la consola nos localiza el elemento mayor del array:
JavaScript Reduce e inicializadores
Existe otra opción bastante útil cuando trabajamos con javascript reduce y es definir cual va a ser el valor inicial que la reducción va a tener y en la que se va a apoyar. En muchas ocasiones no hay que ponerlo ya que se trata de un cero .Sin embargo hay situaciones en las que se inicializa con un array .
Esto aporta flexibilidad, veamos un ejemplo que nos convierte nuestro array de números en un array de numeros + el iva.
var resultado3= lista.reduce(function(resultado,valor) {
resultado.push(valor*1.21);
return resultado;
},[])
console.log(resultado3);
Veamos el resultado en la consola:
JavaScript Reduce , flatMap
Como se puede observar tenemos el array pero con un nuevo conjunto de valores algo muy práctico y que normalmente realiza la funcion map . Sin embargo esto no es todo al poder acceder al array podemos realizar operaciones como la clásica de flatmap de Java de forma muy sencilla.
var lista2=[[1,2],[3,4]];
const aplanar = lista.reduce((total, valor) => {
return total.concat(valor);
}, []);
console.log(aplanar);
El resultado le vemos aparecer en la consola como un único array.
El concepto de reducción es muy flexible y tenemos que habituarnos a utilizarlo.
Otros artículos relacionados:
- JavaScript Template for loop y como usarlo
- JavaScript Deferred Objects y peticiones asíncronas
- JavaScript Array Prototype y extensibilidad
- Usando Rx Observables en JavaScript
- El concepto de JavaScript Spread operator
Externos
- JavaScript Functional programming