Entendiendo reduce

Mar 14, 2023

Sirve para reducir el array a un solo valor.

Un buen caso de uso es un carrito de compra.

Toma 3 argumentos.

un acumulador
el valor actual
también puede pasarse el valor inicial

Ejemplos

Tenemos un array de números y quiero saber la suma de esos números.

const numeros = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const suma = numeros.reduce((acumulador, valor_actual) => {
  return acumulador + valor_actual;
}, 0);

console.log(suma);

En este caso, lo que hizo reduce fue:

tomó el valor inicial que definimos, que es 0
corrió la función flecha para cada elemento
va recorriendo cada elemento del array y le suma el valor_actual al valor anterior(acumulador)

También es posible usar un for loop para lograr el mismo resultado

const sum2 = () => {
  let acc = 0;
  for (const cur of numeros) {
    acc += cur; //acc = acc + cur;
  }
  return acc;
};

console.log(sum2());

El ejemplo del carrito de compras

const carrito = [
  { id: 1, name: "Leche", price: 900 },
  { id: 2, name: "Chocolate", price: 1900 },
  { id: 3, name: "Galletas", price: 2080 },
  { id: 4, name: "Yerba Mate", price: 2000 },
];

const total = carrito.reduce((acc, product) => {
  return acc + product.price;
}, 0);

console.log(total);

Para profundizar más: