Explicación del método Reduce de JavaScript

Introducción

Reduce es un método que puede resultar difícil de entender, especialmente con todas las explicaciones vagas que se pueden encontrar en la web. Comprenderlo tiene muchas ventajas, reduceya que se utiliza a menudo en la gestión de estados (piense en Redux).

La firma del reducemétodo de matriz en JavaScript es:

arr.reduce(callback, initialValue);

Terminología

Reduce viene con cierta terminología como reductor acumulador . El accumulatores el valor con el que terminamos y el reduceres la acción que realizaremos para llegar a un valor .

Debes recordar que un reductor solo devolverá un valor y sólo un valor, de ahí el nombre reduce .

Tomemos el siguiente ejemplo clásico:

const value = 0; const numbers = [5, 10, 15];for(let i = 0; i  numbers.length; i++) {  value += numbers[i];}

Lo anterior nos dará 30(5 + 10 + 15). Esto funciona bien, pero podemos hacer esto con reduceen su lugar, lo que nos ahorrará tener que mutar nuestra valuevariable.

El código siguiente también generará 30, pero no mutará nuestra valuevariable (a la que ahora hemos llamado initialValue)

/* this is our initial value i.e. the starting point*/const initialValue = 0;/* numbers array */const numbers = [5, 10, 15];/* reducer method that takes in the accumulator and next item */const reducer = (accumulator, item) = {  return accumulator + item;};/* we give the reduce method our reducer function  and our initial value */const total = numbers.reduce(reducer, initialValue)

El código anterior puede parecer un poco confuso, pero en realidad no hay magia. Agreguemos un console.logen nuestro reducermétodo que generará los argumentos accumulatory item.

La siguiente captura de pantalla muestra lo que se registra en la consola:

Entonces, lo primero que notamos es que nuestro método se llama 3veces porque hay 3valores en nuestra matriz. Nuestro acumulador comienza en 0que es nuestro initialValuepasamos a reduce. En cada llamada a la función, itemse agrega a accumulator. La llamada final al método tiene el accumulatorvalor de 15y itemes 15, 15 + 15nos da 30que es nuestro valor final. Recuerde que el reducermétodo devuelve el accumulatormás el item.

Este es un ejemplo simple de cómo usarías reduce, ahora profundicemos en un ejemplo más complicado.

Cómo aplanar una matriz mediante Reduce

Digamos que tenemos la siguiente matriz:

const numArray = [1, 2, [3, 10, [11, 12]], [1, 2, [3, 4]], 5, 6];

Y digamos que por alguna razón loca, JavaScript ha eliminado el .flatmétodo, por lo que tenemos que aplanar esta matriz nosotros mismos.

Entonces escribiremos una función para aplanar cualquier matriz sin importar cuán profundamente anidadas estén las matrices:

function flattenArray(data) {  // our initial value this time is a blank array  const initialValue = [];  // call reduce on our data  return data.reduce((total, value) = {    // if the value is an array then recursively call reduce    // if the value is not an array then just concat our value    return total.concat(Array.isArray(value) ? flattenArray(value) : value);  }, initialValue);}

Si pasamos nuestro numArraya este método y registramos el resultado obtenemos lo siguiente:

Este es un gran ejemplo de cómo podemos hacer que una operación muy común sea bastante sencilla.

Repasemos un ejemplo más.

Ejemplo final: cambiar la estructura de un objeto

Entonces, con el nuevo juego de Pokémon que está por salir, imaginemos que tenemos un servidor que nos envía una serie de objetos Pokémon como este:

const pokemon = [  { name: "charmander", type: "fire" },  { name: "squirtle", type: "water" },  { name: "bulbasaur", type: "grass" }]

Queremos cambiar este objeto para que se vea así:

const pokemonModified = {  charmander: { type: "fire" },  squirtle: { type: "water" },  bulbasaur: { type: "grass" }};

Para llegar al resultado deseado hacemos lo siguiente:

const getMapFromArray = data =  data.reduce((acc, item) = {    // add object key to our object i.e. charmander: { type: 'water' }    acc[item.name] = { type: item.type };    return acc;  }, {});

Si llamamos a nuestro método de la siguiente manera:

getMapFromArray(pokemon)

Obtenemos el resultado deseado:

Puedes consultar Codesandbox aquí.

Conclusión

A primera vista, reduceparece más complejo que otros métodos de iteración de matrices de JavaScript como mapy filter, pero una vez que se entienden la sintaxis, los conceptos básicos y los casos de uso, puede ser otra herramienta poderosa para los desarrolladores de JavaScript.