Una de las funciones interesantes que podemos hacer uso con Javascript, para hacer nuestro código más elegante es Reduce. ¿Qué hace esta función? ¿Cuándo es aconsejable usarla?
Entendemos Reduce como un método que «aplica una función a un acumulador y a cada valor de un array (de izquierda a derecha) para reducirlo a un único valor.» (mozilla). Es decir, una función que recorrerá el array de izquierda a derecha, pasando por todos sus elementos acumulativamente. Importante lo de izquierda a derecha, porque tenemos otra versión del método que va de derecha a izquida, reduceRight.
Las explicaciones más en detalle, nos las podemos encontrar tanto en la página de mozilla, en MSDN o en W3c.
Nos vamos a centrar en los casos que sería interesante utilizar este método.
Sumatorio de Array
En el caso de que deseásemos sumar todos los elementos de un array, sería una solución viable.
Crear un nuevo Array con un Array de Arrays
En este caso, aplanaríamos la estructura del contenido del array y nos crearía un nuevo array. Para este caso, también podríamos tener en cuenta la función flat, que sirve para aplanar estructuras.
Sumatorio de Array de Objetos
En el caso de que quisiésemos realizar el sumatorio con un array de objetos tampoco tendríamos problemas. Al igual que si quisiésemos obtener la media de la suma de todos los objetos.
// suma todo el array const total = [0, 1, 2, 3].reduce((a, b) => a + b); console.log(total); // 6 // Integrar un array a partir de varios arrays const integrado = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => a.concat(b)); console.log(integrado); // [0, 1, 2, 3, 4, 5, 6] // Sumatorio todos los valores del objeto const arr = [{ x: 1 }, { x: 2 }, { x: 4 }]; const result = arr.reduce((a, b) => ({ x: a.x + b.x })); console.log(result); // {x: 7}
Performance For VS Reduce
En cuanto a la comparación en cuanto a rendimiento usando reduce contra for, nos encontramos el mismo resultado que cuando usamos map, filter, some… en funciones de poca complejidad o con pocos datos, los resultados suelen ser similares o en favor de las nuevas funciones.
Pero cuando añadimos complejidad o cantidad a dichas funciones, usando el bucle for, obtenemos mucho mejor rendimiento.
Conclusión
Esta función nos añadirá simplicidad y elegancia a nuestro código, pero no será aconsejable usarla cuando estemos trabajando con arrays muy grandes o deseemos realizar grandes cambios.
Enlaces
- https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array/reduce
- https://msdn.microsoft.com/es-es/library/ff679975(v=vs.94).aspx
- https://www.w3schools.com/jsref/jsref_reduce.asp
- https://jsperf.com/reduce-vs-for-little/
- https://jsperf.com/reduce-vs-for-bigger/