Una guía para el método de reducción en Javascript

por Josh Pitzalis

El Método de reducción de JavaScript es una de las piedras angulares de la programación funcional. Exploremos cómo funciona, cuándo debes usarlo y algunas de las cosas geniales que puede hacer.

una reducción básica

úselo cuando: tiene una matriz de cantidades y desea sumarlas todas.,

const euros = ;const sum = euros.reduce((total, amount) => total + amount); sum // 118.11

Cómo usarlo:

• En este ejemplo, Reduce acepta dos parámetros, el total y la cantidad actual.
• El método reduce recorre cada número en el array como lo haría en un bucle for.
• Cuando el bucle comienza el valor total es el número en el extremo izquierdo (29.76) y la cantidad actual es la que está al lado (41.85).
• En este ejemplo en particular, queremos agregar la cantidad actual al total.,
• El cálculo se repite para cada cantidad en la matriz, pero cada vez que el Valor Actual cambia al siguiente número en la matriz, moviéndose a la derecha.
• cuando no quedan más números en el array, el método devuelve el valor total.

la versión ES5 del método reducir en JavaScript

Si nunca ha utilizado la sintaxis ES6 antes, no deje que el ejemplo anterior lo intimide., Es exactamente el mismo que escribir:

var euros = ; var sum = euros.reduce( function(total, amount){ return total + amount});sum // 118.11

usamos const en lugar de var y sustituimos la palabra function con un «gordo» flechas (=>) después de los parámetros, y omitimos la palabra «devolución».

usaré la sintaxis ES6 para el resto de los ejemplos, ya que es más concisa y deja menos espacio para errores.

encontrar un promedio con el método reducir en JavaScript

en lugar de registrar la suma, podría dividir la suma por la longitud de la matriz antes de devolver un valor final.,

la forma de hacer esto es aprovechando los otros argumentos en el método reduce. El primero de esos argumentos es el índice. Al igual que un bucle for, el índice se refiere al número de veces que el reductor se ha bucle sobre la matriz. El último argumento es la matriz en sí.

mapear y filtrar como reducciones

Si puede usar la función Reducir para escupir un promedio, puede usarlo de la manera que desee.,

por ejemplo, podría duplicar el total, o la mitad de cada número antes de sumarlos, o usar una instrucción if dentro del reductor para agregar solo números que sean mayores que 10. Mi punto es que el método Reduce en JavaScript te da un mini CodePen donde puedes escribir cualquier lógica que quieras. Repetirá la lógica para cada cantidad en la matriz y luego devolverá un solo valor.

la cosa es que no siempre tienes que devolver un solo valor. Puede reducir un array a un nuevo array.,

Por ejemplo, permite reducir una matriz de cantidades en otra matriz donde cada cantidad se duplica. Para hacer esto necesitamos establecer el valor inicial de nuestro acumulador en un array vacío.

el valor inicial es el valor del parámetro total cuando se inicia la reducción. Usted establece el valor inicial agregando una coma seguida de su valor inicial dentro de los paréntesis pero después de las llaves (en negrita en el ejemplo a continuación).

const average = euros.reduce((total, amount, index, array) => { total += amount return total/array.length}, 0);

En los ejemplos anteriores, el valor inicial era cero, así que omití., Al omitir el valor inicial, el total por defecto será la primera cantidad en la matriz.

al establecer el valor inicial en una matriz vacía, podemos empujar cada cantidad en el total. Si queremos reducir una matriz de valores en otra matriz donde cada valor se duplica, necesitamos empujar la cantidad * 2. Luego devolvemos el total cuando no hay más cantidades para empujar.

const euros = ;const doubled = euros.reduce((total, amount) => { total.push(amount * 2); return total;}, );doubled // 

Hemos creado una nueva matriz donde cada cantidad se duplica. También podríamos filtrar los números que no queremos duplicar agregando una sentencia if dentro de nuestro reductor.,

estas operaciones son los métodos map y filter reescritos como método reduce.

para estos ejemplos, tendría más sentido usar mapa o filtro porque son más fáciles de usar. El beneficio de usar reduce entra en juego cuando desea mapear y filtrar juntos y tiene una gran cantidad de datos para revisar.

si encadenas el mapa y filtras juntos, estás haciendo el trabajo dos veces. Filtra cada valor y luego asigna los valores restantes. Con reducir puede filtrar y luego mapear en una sola pasada.,

Use mapa y filtro, pero cuando comience a encadenar muchos métodos juntos, ahora sabrá que es más rápido reducir los datos en su lugar.

crear una cuenta con el método reducir en JavaScript

úselo cuando: tiene una colección de elementos y desea saber cuántos de cada elemento hay en la colección.

para contar elementos en un array nuestro valor inicial debe ser un objeto vacío, no un array vacío como lo fue en el último ejemplo.

dado que vamos a devolver un objeto, ahora podemos almacenar pares clave-valor en el total.,

fruitBasket.reduce( (tally, fruit) => { tally = 1; return tally;}, {})

En nuestro primer paso, queremos que el nombre de la primera clave para ser nuestro valor actual y queremos darle un valor de 1.

esto nos da un objeto con todos los frutos como llaves, cada uno con un valor de 1. Queremos que la cantidad de cada fruta aumente si se repiten.

para hacer esto, en nuestro segundo bucle comprobamos si nuestro total contiene una clave con el fruto actual del reductor. Si no lo hace, entonces lo creamos. Si lo hace entonces incrementamos la cantidad en uno.

fruitBasket.reduce((tally, fruit) => { if (!tally) { tally = 1; } else { tally = tally + 1; } return tally;}, {});

reescribí exactamente la misma lógica de una manera más concisa arriba.,

aplanar un array de arrays con el método Reduce en JavaScript

podemos usar reduce para aplanar cantidades anidadas en un solo array.

establecemos el valor inicial en una matriz vacía y luego concatenar el Valor Actual al total.

const data = , , ];const flat = data.reduce((total, amount) => { return total.concat(amount);}, );flat // 

La mayoría de las veces, la información se anida de maneras más complicadas. Por ejemplo, digamos que solo queremos todos los colores en la variable de datos a continuación.

const data = }, {a: 'tired', b: 'panther', c: }, {a: 'sad', b: 'goldfish', c: }];

vamos a pasar por cada objeto y extraer los colores. Hacemos esto apuntando cantidad.c para cada objeto en la matriz., Luego usamos un bucle forEach para empujar cada valor en la matriz anidada en out total.

si solo necesitamos un número único, entonces podemos verificar que el número ya existe en total antes de empujarlo.

Piping con Reduce

Un aspecto interesante del método reduce en JavaScript es que puede reducir sobre funciones, así como números y cadenas.

digamos que tenemos una colección de funciones matemáticas simples. estas funciones nos permiten incrementar, disminuir, duplicar y reducir a la mitad una cantidad.,

por cualquier razón, necesitamos incrementar, luego duplicar y luego disminuir una cantidad.

Puede escribir una función que tome una entrada y devuelva (input + 1) * 2 -1. El problema es que sabemos que vamos a necesitar aumentar la cantidad tres veces, luego duplicarla, luego disminuirla y luego reducirla a la mitad en algún momento en el futuro. No queremos tener que reescribir nuestra función cada vez por lo que vamos a utilizar reducir para crear una tubería.

una canalización es un término utilizado para una lista de funciones que transforman un valor inicial en un valor final., Nuestro pipeline constará de nuestras tres funciones en el orden en que queremos usarlas.

let pipeline = ;

en lugar de reducir una matriz de valores reducimos sobre nuestra canalización de funciones. Esto funciona porque establecemos el valor inicial como la cantidad que queremos transformar.

const result = pipeline.reduce(function(total, func) { return func(total);}, 1);result // 3

debido a que la canalización es una matriz, se puede modificar fácilmente. Si queremos decrementar algo tres veces, entonces lo doblamos, lo decrementamos, y lo reducimos a la mitad entonces simplemente alteramos la tubería.

var pipeline = ;

la función Reducir permanece exactamente igual.,

errores tontos para evitar

Si no pasa un valor inicial, reduce asumirá que el primer elemento de su matriz es su valor inicial. Esto funcionó bien en los primeros ejemplos porque estábamos sumando una lista de números.

si estás tratando de contar la fruta, y omites el valor inicial, entonces las cosas se ponen raras. No introducir un valor inicial es un error fácil de cometer y una de las primeras cosas que debe comprobar al depurar.

otro error común es olvidar devolver el total. Debe devolver algo para que la función Reducir funcione., Siempre vuelva a verificar y asegúrese de que realmente está devolviendo el valor que desea.

herramientas, consejos& referencias

• Todo en este post proviene de una fantástica serie de videos en egghead llamada Introducing Reduce. Le doy todo el crédito a Mykola Bilokonsky y le estoy agradecido por todo lo que ahora sé sobre el uso del método Reduce en JavaScript. He tratado de reescribir mucho de lo que él explica en mis propias palabras como un ejercicio para entender mejor cada concepto., Además, es más fácil para mí hacer referencia a un artículo, en lugar de un video, cuando necesito recordar cómo hacer algo.
• El MDN Reduce las etiquetas de la documentación lo que llamé un total el accumulator. Es importante saber esto porque la mayoría de la gente se referirá a él como un acumulador si lees sobre él en línea. Algunas personas lo llaman prev como en el valor anterior. Todo se refiere a la misma cosa. Me pareció más fácil pensar en un total cuando estaba aprendiendo reducir.,
• si quieres practicar usando reduce te recomiendo registrarte en freeCodeCamp y completar tantos algoritmos intermedios como puedas usando reduce.
• si las variables ‘const’ en los fragmentos de ejemplo son nuevas para usted, escribí otro artículo sobre las variables ES6 y por qué es posible que desee usarlas.
• también escribí un artículo llamado The Trouble With Loops que explica cómo usar map () y filter () si son nuevos para ti.

Gracias por leer! Si desea recibir una notificación cuando escriba un nuevo artículo, ingrese su correo electrónico aquí.,

y si te gustó el artículo, por favor compártelo en las redes sociales para que otros puedan encontrarlo.