JavaScript Reduce function y eliminación de bucles

JavaScript Reduce function es una de las funciones que más cuesta entender cuando trabajamos con JavaScript. Sin embargo es una de las funciones que más nos puede ayudar a simplificar nuestro código y eliminar bucles. ¿Cómo funciona exactamente? . Para entenderla vamos a construir un ejemplo de sumatorio a través de un bucle for.


<html>
<head>
 <script type="text/javascript">
 var lista = [1, 2, 3, 4];
 var suma = 0;
 lista.forEach(function(item) {
 suma += item;

 })
 console.log(suma);
 </script>
</head>

<body>
</body>

</html>

Estamos usando un bucle forEach para recorrer el array de números y sumarlos todos . El resultado mostrará 10 por la consola.

JavaScript Reduce Function

Vamos a utilizar la function Reduce de JavaScript para eliminar el bucle for y simplificar la suma en nuestro código:

<html>
<head>
<script type="text/javascript">
 
 var lista= [1,2,3,4];
 var suma=lista.reduce(function(resultado,numero){
 return resultado+numero;
 }); 
 console.log(suma);
 
</script>
</head>
<body>


</body>
</html>

El resultado es identico al anterior:

Ya no tenemos un bucle for y no usamos una variable para acumular el resultado de cada operación , el código es más compacto pero cuesta entenderle. La función reduce nos permite convertir un Array de elementos en un único elemento definiendo la operación que necesitamos para realizar la transformación.

Para realizar dicha operación la función recibe dos parámetros el primero es el resultado , que es la variable que se utiliza para ir almacenando lo que ha sucedido en cada una de las iteraciones y el segundo parámetro es el item de cada iteración.

Para terminar de clarificar vamos a usar la función de reduce para calcular el número mayor dentro de nuestro Array.


<html>
<head>
<script type="text/javascript">

var lista= [1,2,3,4];
var mayor=lista.reduce(function(maximo,numero){

return (maximo>numero)? maximo:numero;

});
console.log(mayor);
</script>
</head>
<body>
</body>
</html>

La función es muy compacta y combina Reduce con el operador ternario de JavaScript que se encarga de almacenar en la variable máximo el valor máximo de todos los que vamos recorriendo. El resultado será 4