Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Reduce

10/27
Recursos

Aportes 25

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Reduce

Resumen
.
Este método REDUCE, efectivamente hace eso. Solo reduce a un solo valor y no devuelve otro array, simplemente un valor.
.
Se utiliza muchísimo para hacer cálculos a partir de la información de un array.
.
En su composición, a primeras, tiene como argumentos de la función del primer parámetro, al acumulador y como segundo parámetro al elemento por el que va iterando el loop. Y como segundo argumento del reduce(), se pasa el valor inicial del acumulador.

const totals = [1,2,3,4];
// primer argumento de la f() es el acumulador
// segundo argumento de la f() es el elemento
// segundo parámetro de la f() es el estado inicial del acumulador
const rta = totals.reduce((sum, element) => sum + element, 0);
console.log(rta)

Así funciona la iteración del reduce() por dentro:

cagado de la risa cuando Nico mostró :poop: para el ejemplo del reduce 🤣

jajaja no puedo creer el ejemplo de reduce al principio del video.
Estaba desayunando, imaginen…

Excelente poder explicarlo con una prueba de escritorio, lo hace muy practico y entendible. 😃

La mejor manera de ver lo que explica el profesor es la siguiente.

        const totals = [1,2,3,4]

        const suma = totals.reduce((acumulador, item, indice) => {
            console.log(acumulador, item, indice)
            return acumulador + item
        }, 0)

        console.log('suma total:',suma)

El resultado:

😁 Te pasa Nico, te pasas Nico, te pasas Nico, eres demasiado buen profesor!!!

Reduce: coge un array y lo reduce a un solo a valor. Se utiliza para hacer cálculos, ejemplo: una suma total de las ventas.

const totals = [1,2,3,4,5,6,];
const sumaTotals = totals.reduce((sum, element) => sum + element, 0)
console.log('Con el metodo reduce:', sumaTotals);

Todo se redujo a una caca… asi es

Reduce

Reduce un array a un único valor (puede ser un valor primitivo como también un array u objeto).

array.reduce(función, valor inicial)

Reduce necesita dos parámetros, el primero es la función y el segundo el valor inicial. A su vez, esta función necesita dos argumentos.

array.reduce((acc, el) => ..., valor inicial)

El acumulador (acc) en la primera iteración toma el valor inicial, y en las siguientes toma el valor retornado.
El elemento (el) corresponde a un valor del array; arrray[0], array[1], array[2]… hasta llegar al final.
.
La nueva variable a la que asignemos el array reducido const reducido = array.reduce(...) tendrá el valor del acumulador al terminar las iteraciones.

Decir que reduce lo que hace es devolver un solo valor me parece algo demasiado erroneo, de hecho reduce puede transformar un vector a cualquier valor ya que cada iteracion se le puede aregar lo que se quiera al acumulador, por ejemplo puedo hacer que el acumulador sea un vector y agregarle 10 veces la entrada actual, y esto haria que devolviene N valores.

const sum3 = totals.reduce((acumula, element, index) => {
  console.log('acumula', acumula);
  console.log('element', element);
  console.log('index', index);
  console.log('acumula + index', acumula + index);
  return acumula + index;
}, 0);
console.log('sum3', sum3);
jajaja que buen ejemplo

mi práctica con .reduce en React

va mi código

import { useState } from "react";
import "./App.css";

function App() {
  const [data, setData] = useState();

  const myArray = [
    {
      customerName: "Nicolas",
      total: 600,
      delivered: true,
    },
    {
      customerName: "Zulema",
      total: 120,
      delivered: false,
    },
    {
      customerName: "Santiago",
      total: 180,
      delivered: true,
    },
    {
      customerName: "Valentina",
      total: 240,
      delivered: true,
    },
  ];

  const totalSales = (items) => {
    setData(items.reduce((sum, item) => sum + item.total, 0));
  };

  const handleReduce = () => {
    totalSales(myArray);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>veamos al método .reduce</h1>
        {data !== undefined && <h1>{data}</h1>}
        <button onClick={handleReduce}>obtener total de ventas</button>
      </header>
    </div>
  );
}

export default App;


pic de pantalla

// reduce()
//Este método consiste en reducir un array a un solo valor
//Es comúnmente utiliza para hacer cálculos
// El primer parametro del metodo es acumulador de la operación
// El segundo parámetro es el iterador del array
// (Al acumulador de la operación hay que darle un valor inicial)

const rt = totals.reduce((sum=0,item)=>sum + item);

espero que le sirva a alguien :

const total = [1,2,3,4,5];

let acumuladorIniciaEn = 3;
let  flecha = (acumulador , item , index)=>{return acumulador += item }
console.log(
    "explicito :" +
    
    total.reduce( flecha, acumuladorIniciaEn) //daria 18  ya q inicia en 3 
)

Muy buena explicación, al fin le entendí bien. 😄

Reduce archivo HTML:

Código:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reducer</title>
  <style>
    body{
      width: 100%;
      background-color: blanchedalmond;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div id="app"></div>
  <div id="app2"></div>

  <script>
    const app = document.getElementById('app');
    const app2 = document.getElementById('app2');
    const totals = [1, 2, 3, 4];
    app.innerHTML = `
      <h1>Array: ${totals}</h1>
      `

    const rta = totals.reduce(( sum, elemnto) => sum + elemnto, 0);
    app2.innerHTML = `
      <h1>Reduce: ${rta}</h1>
      `

  </script>
</body>
</html>

El método reduce() ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor.

Sumar todos los números:

const numeros = [1, 2, 3, 4, 5];

const sumaTodos = numeros.reduce((acc, valorActual) => acc + valorActual);

console.log(sumaTodos);
  • Toma un array y lo reduce a 1 solo valor

  • No devuelve un array

  • Se usa mucho para hacer datos - operaciones

Excelentes explicaciones, he estado entendiendo muy bien estos conceptos

💩 xd

  • Reduce: Como su nombre indica reduce los elementos de un array a un solo elemento a diferencia de map y filter

  • Redice no deberia retornar un array (aunque en algunos casos lo hace)

  • Depende del algoritmo que se use para reducir los elementos

Reduce es el metodo que se me complicaba entender, pero el profesor Nicolas lo explica de forma excelente. 😃