No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso Práctico de JavaScript

Curso Práctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Calculando el promedio en JavaScript

15/24
Recursos

Aportes 121

Preguntas 30

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

[■,■,■,■].map(■→●) ⇒ [●,●,●,●]
[■,●,■,▲].filter(■→true) ⇒ [■,■]
[■,●,■,▲].find(●→true) ⇒ ●
[■,●,■,▲].findIndex(●→true) ⇒ 1
[■,●,■,▲].fill(●) ⇒ [●,●,●,●]
[■,●,■,▲].some(●→true) ⇒ true
[■,●,■,▲].every(●→true) ⇒ false

Este es un gran video donde se pueden ver 3 de los principales métodos para arrays.

MAP, FILTER y REDUCE EN JAVASCRIPT

Esta imagen también es muy ilustrada acerca de estos métodos:

Decidí unir el HTML con JS de forma más interactiva y permitir que el usuario eligiera la cantidad de datos. me quedo así

El código lo dejare en los comentarios por si alguien quiere ver como lo hice.

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

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

Descripción
El método reduce() ejecuta callback una vez por cada elemento presente en el array, excluyendo los huecos del mismo, recibe cuatro argumentos:

valorAnterior
valorActual
indiceActual
array
La primera vez que se llama la función, valorAnterior y valorActual pueden tener uno de dos valores. Si se proveyó un valorInicial al llamar a reduce, entonces valorAnterior será igual al valorInicial y valorActual será igual al primer elemento del array. Si no se proveyó un valorInicial, entonces valorAnterior será igual al primer valor en el array y valorActual será el segundo.

Si el array está vacío y no se proveyó un valorInicial lanzará un TypeError (en-US). Si el array tiene un sólo elemento (sin importar la posición) y no se proveyó un valorInicial, o si se proveyó un valorInicial pero el arreglo está vacío, se retornará ese único valor sin llamar a la función.

Suponga que ocurre el siguiente uso de reduce:

[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){
  return valorAnterior + valorActual;
});

// Primera llamada
valorAnterior = 0, valorActual = 1, indice = 1

// Segunda llamada
valorAnterior = 1, valorActual = 2, indice = 2

// Tercera llamada
valorAnterior = 3, valorActual = 3, indice = 3

// Cuarta llamada
valorAnterior = 6, valorActual = 4, indice = 4

// el array sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]

// Valor Devuelto: 10

Y si proporcionas un valorInicial, el resultado sería como este:

[0,1,2,3,4].reduce(function(valorAnterior, valorActual, indice, vector){
  return valorAnterior + valorActual;
}, 10);

// Primera llamada
valorAnterior = 10, valorActual = 0, indice = 0

// Segunda llamada
valorAnterior = 10, valorActual = 1, indice = 1

// Tercera llamada
valorAnterior = 11, valorActual = 2, indice = 2

// Cuarta llamada
valorAnterior = 13, valorActual = 3, indice = 3

// Quinta llamada
valorAnterior = 16, valorActual = 4, indice = 4

// el array sobre el que se llama a reduce siempre es el objeto [0,1,2,3,4]

// Valor Devuelto: 20

Aqui una explicación detallada de MAP, FILTER y REDUCE en JavaScript por el profe Sacha:

La Cocina del Código

Seguro que alguno que otro lo conoce, pero gran complemento es el gran midudev.

En su canal de youtube e Instagram comparte bastante cosas, además de en Twitch

Al grano, dejo una imagen más que interesante.

Un saludo.

Calcular el promedio con map y for:

Calcular el Promedio en JavaScript Usando la sintaxis de ES6+ 👇

const getAverage = (arr) => arr.reduce((a, b) => a + b) / arr.length;

Como pueden ver es muy entendible y se define una sola linea 😃

Método reduce()

Platzinautas, les comparto mi apunte sobre el método reduce().
En el ejemplo, – dentro de la función reductora – decidí agregar una línea de código para poder visualizar en consola el proceso que realiza este método con el array.
No es necesario inicializar el parámetro accumulator.

let lista = [];
//declaramos la variable lista con el array

//creamos la función que irá añadiendo los elementos a nuestro array
function añadirArray() {
  const inputNumero = document.getElementById("inputNumero");
  //obtenemos el dato del input
  const numero = Number(inputNumero.value);
  //convertimos ese dato a número
  const añadirNumero = lista.push(numero);
  //ahora añadimos el número al array, y cada vez que el usuario
  //le de click al botón se irá añadiendo un número
  const resultado = document.getElementById("resultado");
  //mandamos a llamar el texto que queremos mostrar
  //imprimimos el texto en HTML
  resultado.innerText =
    "Tu lista actual lleva: (" +
    lista +
    ") si es correcto, presiona el botón 'Calcular Promedio'";
}

//creamos la función que calculará el promedio de los elementos de la lista
function calcularPromedio() {
  const sumalista = lista.reduce(function (valorAcumulado = 0, nuevoElemento) {
    return valorAcumulado + nuevoElemento;
  });
  const promedioLista = sumalista / lista.length;
  const resultado = document.getElementById("resultadoPromedio");
  resultado.innerText = "El promedio es " + promedioLista;
}

Otra forma de hacerlo:

function calcularMediaAritmetica(lista){
    let total = 0
    lista.forEach((number) => {
        total += number
    })
    const promedio = total / lista.length
    return promedio
}

Si quieren profundizar más sobre reduce o entenderlo mejor les dejo este artículo, a mi me ayudo a entenderlo mejor.

Como aporte quiero aclarar que no es necesario inicializar el primer parametro en 0 ya que por default arranca en 0, si lo inicializas en 0 lo que hace es tomar el valor del primer elemento, que en el caso de la suma no hay ningun problema pero si es una media armonica si resulta diferente y tiene un comportamiento extraño, este comportamiento fue encontrado por alguien de la comunidad en nuestro discord del JS Challenge Argentina el compañero @lucasfrezzini.

Resumen de la clase

En esta clase pasamos a código la operación de la media aritmética (promedio). La manera de hacerlo es con un array de números, y con un ciclo for vamos sumando cada una de las cantidades que hay en el mencionado array. Al final dividimos la suma con la cantidad de números que hay en el array.

//Array y variable de suma
var array = [10, 89, 82, 91, 2, 127, 1982];
var suma = 0;

// Ciclo for
for(let i = 0; i < array.length; i++){
  suma += array[i];
}

//División para obtener el promedio
console.log(`El promedio es: ${suma / array.length}`);

Método reduce

El ciclo for es la manera “tradicional” de hacer esta operacion, sin embargo, para trabajar con una gran cantidad de numero, lo mejor es utilizar el metodo reduce

//Array y variable de suma
var myArray = [12, 45, 27, 98, 27]
var suma = 0;

//Realización de la suma
var suma = myArray.reduce(function(suma, valorActual){
  return suma + valorActual;
})

//División para obtener el promedio
console.log(`El promedio es: ${suma / myArray.length}`);

Pasarlo a una función

Al final lo que se hizo fue pasar las operaciones a una función, esto con la finalidad de usar cualquier array de números que van a ser pasados como parámetro

function obtenerPromedio(array){
  //variable de suma
  let suma = 0;

  //Realizar la suma con ciclo for
  for(let i = 0; i < array.length; i++){
    suma += array[i]
  }

  //Division para obtener el promedio
  console.log(`El promedio es: ${suma / array.length}`)
}

//Llamando a la funcion con cualquier array
obtenerPromedio([23, 87, 94, 23, 76, 128]);
console.group('Usando métodos de arrays')

let arr = [100, 200, 300, 500]

let metodoArr = arr.reduce( (acumulador, valorActual) => acumulador + valorActual )

let promedio = metodoArr / arr.length

console.log(metodoArr)

console.log(promedio)

console.groupEnd()


//Usando un for 

console.group('Usando ciclos')

let sumaLista = 0;

for(let i= 0; i < arr.length; i++) {

    sumaLista = sumaLista + arr[i]
    console.log(sumaLista)
}

console.log('PROMEDIO')

let promedio2 = sumaLista / arr.length

console.log(promedio2)

console.groupEnd()

//Usando con funciones

console.group('Usando funciones')

function mediaEntreNumeros(array) {

    let suma = 0

    for(let i= 0; i < array.length; i++) {

        suma = suma + array[i]
        console.log(suma)
    }
    
    let media_aritmetica = suma / array.length

    console.log('PROMEDIO')

    console.log(media_aritmetica)

    console.log('Fin función')
}

mediaEntreNumeros(arr)
mediaEntreNumeros([10, 20])



console.groupEnd()

Hola! Si no entendieron muy bien lo que hace reduce (como yo) les recomiendo este video.

// La función de la clase también se puede expresar así:

const lista = [1,2,3,4,5];
const res = lista.reduce ( (valorAcumulado, nuevoElemento) => { 
	return valorAcumulado = valorAcumulado + nuevoElemento;
}, 0); 

El número 0 al final indica el valor inicial de valorAcumulado, luego suma los otros elementos del array, como indicamos en la función. Si no lo colocamos entonces valorAcumulado inicia con el 1er valor (array[0]) y la iteración iniciaría desde el 2do valor (array[1]).

Igualar valorAcumulado a la suma de este con el nuevo elemento es redundante, pero creo que explica mejor el funcionamiento. (Reduce lo hace implícitamente por su cuenta, como en el ejemplo de la clase).

Inspirado por la respuesta de algunos compañeros respecto a agregarle más de 1 dato.

Otra forma de aplicar el reduce.

MI APORTE:

Página: Click aquí
Código: Click aquí
Espero les guste

.reduce es un metodo confuso al comienzo pero es bastante simple en realidad.

// const lista = [100,200,300,400,500]
const promedio = (lista) => {
    const sumaLista = lista.reduce((acumulador , number) => {
	acumulador + number, 0
})
    let promedio =  sumaLista / lista.length

    console.log(promedio)
}
promedio([3, 6, 5, 4, 7, 8, 6, 4])
// promedio(lista)

Código de clase en TypeScript:

const calcularMediaAritmetica = (lista: Array<number>): number => {
  const sumaLista: number = lista.reduce(
    function(valorAcumulado: number = 0, nuevoElemento: number){
      return valorAcumulado + nuevoElemento
    }
  )

  const promedioLista: number = sumaLista / lista.length
  return promedioLista
}

Usando el método .forEach( ).

function calcularMedia(lista) {
  var total = 0;
  lista.forEach(element => total += element);
  return total / lista.length;
}

Console.

calcularMedia([1, 56, 56, 15]);
32.

Código clase:

//Lista de elementos para calcular la media 
// const lista1 = [
//     100,
//     200,
//     300,
//     500,
// ];

// necesitamos sumar todos los numeros de lista, utilizamos ciclo for con var let para poder modificar en futuro
// let sumaLista1 = 0;
//     for (let i = 0; i < lista1.length; i++) {
//         sumaLista1 = sumaLista1 + lista1[i];
// }

// const promediolista = sumaLista1 / lista1.length;

function calcularMediaAritmetica(lista) {
    //let sumaLista = 0;
    // for (let i = 0; i < lista.length; i++) {
    //     sumaLista = sumaLista + lista[i];
    // }

    const sumaLista = lista.reduce(
        function (valorAcumulado = 0, nuevoElemento) {
            return valorAcumulado + nuevoElemento;
        }
    );


    const promediolista = sumaLista / lista.length;

    return promediolista;
}

15. Calculando el promedio en JavaScript

Recorriendo un array

<h5>For</h5>

Recorriendo el array con un for

const _SALARY_LIST_ = [100, 200, 300, 500];

let salaryTotal = 0;
let averageSalary = 0;

for (let i = 0; i < _SALARY_LIST_.length; i++) {
	salaryTotal = salaryTotal + _SALARY_LIST_[i];
}

averageSalary = salaryTotal / _SALARY_LIST_.length;

console.log(`Valor total de salarios: ${salaryTotal}`);
console.log(`Valor del promedio salarial: ${averageSalary}`);
<h5>for of</h5>
const _SALARY_LIST_ = [100, 200, 300, 500];

let salaryTotal = 0;
let averageSalary = 0;

for (let individualSalary of _SALARY_LIST_) {
	salaryTotal = salaryTotal + individualSalary;
}

averageSalary = salaryTotal / _SALARY_LIST_.length;
console.log(`Valor total de salarios: ${salaryTotal}`);
console.log(`Valor del promedio salarial: ${averageSalary}`);

array.reduce

  • El Array.reduce() método ejecuta una función reductora para cada valor de una matriz.
  • Array.reduce() devuelve un valor único que es el resultado acumulado de la función.
  • Array.reduce() no ejecuta la función para elementos de matriz vacíos.
  • Array.reduce() no cambia la matriz original.
const _SALARY_LIST_ = [100, 200, 300, 500];

let salaryTotal = 0;
let averageSalary = 0;

salaryTotal = _SALARY_LIST_.reduce(function (
	valueAcumulate = 0,
	currentSalary
) {
	return valueAcumulate + currentSalary;
});

averageSalary = salaryTotal / _SALARY_LIST_.length;
console.log(`Valor total de salarios: ${salaryTotal}`);
console.log(`Valor del promedio salarial: ${averageSalary}`);

en una sola linea 😁️

const promedio = (lista) => lista.reduce((a,b) => a + b) / lista.length 

Dejo aquí el codepen de mi proyecto.

Para quienes se rayan un poco con tanto decimal agregue una linea extra para redondear el resultado.


    const promedioLista = sumaLista / lista.length;

    promedioLista2 = Number(promedioLista.toFixed(2));
    
    return promedioLista2;

Gracias a un compañero logré integrar JS con HTML y tiene unas funcionalidades interesantes. Dejo mi código por aquí.


.

JavaScript

// Declaramos la variable lista con el array
let lista = [];

// Creo la función que añadirá items al array y los irá mostrando en pantalla para que el usuario tenga una secuencia.
function buttonInputSalario() {
    // obtenemos el dato del input y lo convertimos a número
    const numero = Number(document.getElementById("InputSalario").value);

    // agregamos los números brindados por el usuario al aarray
    const anadirNumero = lista.push(numero);
    
    // Imprimimos en pantalla la lista que tiene el usuario para realizar el promedio
    const resultado = document.getElementById("listaUser");
    resultado.innerText = `Tu lista actual tiene los siguientes números: ${lista}.  Si están bien, presiona el botón "Calcular Promedio".`;
}

// Creo la función que calculará el promedio y mostrará en pantalla el resultado.
function buttonPromedio() {
    // Esta es la función pura a la cual se le aplicará reduce para hallar el promedio. La estructura está de acuerdo a la explicación del profe Sascha en este video: https://www.youtube.com/watch?v=tP8JiVUiyDo&t=1210s 
    const valorAcumulado = (acumulador, nuevoElemento) => acumulador + nuevoElemento;
    const promedioLista = lista.reduce(valorAcumulado) / lista.length;

    //imprimimos el resultado en pantalla
    const resultado = document.getElementById("ResultadoPromedio");
    resultado.innerText = "El promedio es " + promedioLista;
}

.
HTML
.

<!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>Promedio</title>
</head>
<body>
    <header>
        <h1>Promedio</h1>
    </header>

    <section>
        <h2>Calcula el promedio del sueldo de tus amigos</h2>
        <form action="">
            <label for="InputSalario">
                Escribe el primer salario y dale clic en adiciona un salario para irlo sumando a la lista.
            </label>
            <input id="InputSalario" type="number">
            <button type="button" onclick="buttonInputSalario()">
                Adiciona un salario
            </button>
            <p id="listaUser"></p>

            <button type="button" onclick="buttonPromedio()">
                Calcular el promedio
            </button>

            <p id= "ResultadoPromedio"></p>
        </form>

    <script src="./js/promedio.js"></script>
</body>
</html>

Para escribir el Reduce en una sola linea :

Sin embargo como lo coloca JuanDC es mejor para el aprendizaje 😄

https://www.youtube.com/watch?v=tP8JiVUiyDo&t=230s
El mejor video explicativo de los métodos de Arrays, espero les sirva.

Mi aporte

La primera parte del ejercicio para calcular el peso de unos melones y su peso promedio 🍈 😂

//calcular el peso de una caja de melones y el promedio
pesoMelon = [1000, 800, 350, 400];
let calcularPesoMelon = 0;

for (i = 0; i < pesoMelon.length; i++) {
    calcularPesoMelon = calcularPesoMelon + pesoMelon[i]
};

console.log(`El peso total de los melones es de ${calcularPesoMelon}g.`);

const promedioLista = calcularPesoMelon / pesoMelon.length;
console.log(`El peso medio de cada melón es de ${promedioLista}g.`);

Que tal campeon, buen dia… Tengo el siguiente codigo, con el metodo .reduce() me genera un error, cuando ingreso el primer valor en input, esto porque el arrary esta vacio, pero cuando se hace la iteracion de cada elemento en el array con el ciclo for no me genera ningun error. Entonces “.reduce()” - ejecuta una funcion de reduccion en cada elemento del array (dada por mi)…

<form onsubmit = "return false" action="#">
    <span>ingresa n cantidad de numero!</span>
  <input type="number" placeholder="numbers" id="inputNumbers">
<p id="showNumbers">Numeros ingresados son:</p>  
<input id="calculateAverage" type="submit" value="Calculate Average"> 
<p id="average">El promedio es: </p>
  </form>
const btnCalculateAverage = document.getElementById("calculateAverage");
const inputNumber = document.getElementById("inputNumbers");
const el = document.getElementById("showNumbers");
const average = document.getElementById("average")

const arr = [];

const calculateArithmeticMean = () =>{
  // console.log("enter")
  // let addList = 0;

  // for (let i = 0; i < arr.length; i++) {
  //   addList = addList + arr[i]
  // }
  // console.log("The add is: ", addList)
  
  // const listAverage = addList / arr.length;
  // console.log("The average is: ", listAverage)
  // average.innerHTML = `El promedio es: ${listAverage}`;

  const arithmeticMean = arr.reduce((accumulateValue, currentValue) => {
    return accumulateValue + currentValue;
  })
  
  const listAverage = arithmeticMean / arr.length;
  console.log("the Arithmetic Mean is: " + listAverage);
  average.innerHTML = `El promedio es: ${listAverage}`;
  return listAverage;
}


//Events Listener
btnCalculateAverage.addEventListener('click', calculateArithmeticMean);
inputNumber.addEventListener("keyup", function (e) {
  if (e.keyCode === 13) {
    // console.log("input data ", e.target.value);
    arr.push(parseFloat(e.target.value))
    console.log("input data: ", arr);
    el.innerHTML = `Numeros Ingresados son: [${arr},] `
  }else{
  }
})

Que tal campeon, si tu, que estas del otro lado, contactame por este correo [email protected] para comparar respuesta solidas.

Mi forma de implementar la funcion

const calculateMiddleArithmetic = (list) => {
  const reducer = (accumulator, currentValue) => accumulator + currentValue;
  
  const sumList = list.reduce(reducer);
  
  const averageList1 = sumList / list.length;
  console.log(averageList1);
}


mi codigo para el promedio

document
  .getElementById("btnAgregar")
  .addEventListener("click", agregarNumLista);

document
  .getElementById("btnCalcularPromedio")
  .addEventListener("click", calcularPromedio);

function calcularPromedio() {
  if (listaAgregados.length != 0) {
    promedio(listaAgregados, resultado);
    listaAgregados = [];
    resultadoAgregar.innerHTML = "";
    mensaje.innerText = "";
    alerta.innerHTML = "";
  } else {
    alerta.innerHTML =
      "Error<br>* Debe de contener al menos un numero para calcular el promedio";
  }
}

function promedio(lista, mostrar) {
  let suma = 0;
  for (let i = 0; lista.length > i; i++) {
    suma = suma + parseInt(lista[i]);
  }
  suma = (suma / lista.length).toFixed(2);
  mostrar.innerHTML = "El promedio es: " + suma;
}

Excelente el uso de reduce. No lo había usado y ya investigando un poco para entenderlo, me quedo el código así:

const valores = [1, 4, 7, 3, 12, 6, 8, 4]; //45

const calcularMedia = arreglo =>{
    return (arreglo.reduce((suma, elemento)=>{
        return suma+=elemento
    })) / arreglo.length;
};

console.log(calcularMedia(valores)); //5.625

para saber más de reduce

<const array = [10, 20, 30]
const suma = array.reduce((a=0, b) => a+b)
const PG = suma/array.length;
console.log(PG)> 

Mi aporte 👨🏻‍💻


.

  • HTML
<!DOCTYPE html>
<html lang="es">
<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>Promedios</title>
</head>
<body>
    <header>
        <h1>Calcula la media Aritmética</h1>
    </header>
    <section>
        <form >
            <label for="inputPromedio">Ingresa tus datos: </label>
            <input id="inputPromedio" type="text" placeholder="Ej: 20, 10, 50" >
            <button type="button" onclick="calcularMediaAritmetica()">Calcular la media</button>
            <p id="resultadoMedia"></p>
        </form>
        
    </section>
    <script src="./promedio.js"></script>
</body>
</html>

.

  • JS
//  Para haller el promedio se suma todas las variables y se divide por el total de variables sumadas
// promedio = (h1 + h2 + ... + hn)/ pn

// const lista = [100, 200, 300, 500];

function calcularMediaAritmetica() {
  // let sumaLista = 0;

  // for (let i = 0; i < lista.length; i++) {
  // sumaLista = sumaLista + lista[i];
  // }

// Se captura los datos del html y se guardan los valores dentro de una variable
  const entradaDatos = document.getElementById("inputPromedio");
  const datosValue = entradaDatos.value;
  //   console.log(datosValue);
//   Al ser un String los valores capturados, se procede a convertir el formato a Number 
  let arrayValor = Array.from(datosValue.split(","), Number);
  //   console.log(arrayValor);

//   Procedemos a realizar la suma total de los valores obtenidos en el html mediante el metodo reduce() de array
  const sumaLista = arrayValor.reduce(function (valorAcumulado = 0,nuevoElemento) {
    // console.log(valorAcumulado);
    // console.log(nuevoElemento);
        return valorAcumulado + nuevoElemento;
  });
//   Obtenemos la media aritmetica 
  const promedioLista = sumaLista / arrayValor.length;

//   Enviamos los resultados obtenidos a la pagina html para su visualizacion
  const mostrarResultado = document.getElementById("resultadoMedia");
  mostrarResultado.innerText = "La media es de: " + promedioLista;
}

Saludos ✌🏻

En la funcion, para obtener return usando el ciclo, tube que agregar [ ], para crear el array correspondiente.

⚡ Aquí mi versión:


function calcularPromedio(list) {
  let nums = list.toString().split(",").map((value) => parseInt(value));
  let totalSuma = nums.reduce((acumlador, value) => acumlador + value)
  let promedio = totalSuma / nums.length
  return promedio
}

let result = calcularPromedio('1,14,151,98')

console.log(`El promedio es: ${result}`);

Siguiendo la documentación: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Lo resolví de esta forma:

const lista1 = [
    100,
    200,
    300,
    500
];

const calcPromedioLista = function(lista) {
    const reducer = (accumulator, currentValue) => accumulator + currentValue;
    return lista.reduce(reducer)/lista.length;
};

Asi termino mi codigo, ¿algunas sugerencia para mejorar?
html:

<!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>Promedio</title>
</head>
<body>
    <h1>Promedio</h1>

    <form>
        <label for="inputPromedio">Ingrese los numeros:</label>
        <input id="inputPromedio" type="text">
        <button class="button" type="button" onclick="agregar()">Agregar</button>
        <button class="button" type="button" onclick="calcular()">Calcular</button>
    </form>

    <p id="resultadoP"></p>

    <script src="./promedio.js"></script>
</body>
</html>

Script:

const listUser = [];
//const lista = [10, 20, 30, 40, 50];
const calcularPromedio = (listaCalcular) => {
    let sumaLista = listaCalcular.reduce(
        function (valorAcumulado = 0, newItem) {
            return valorAcumulado + newItem;
        }
    );

    const promedioLista = sumaLista / listaCalcular.length;

    return promedioLista;
}

const enlistarNumero = (numeroUser) => {
    listUser.push(Number(numeroUser));

}
const agregar = () => {
    let numeroAdd = document.getElementById("inputPromedio");
    let numeroAddValue = numeroAdd.value;

    enlistarNumero(numeroAddValue);
}

const calcular = () => {
    let resultado = calcularPromedio(listUser);

    let para = document.getElementById("resultadoP");
    para.textContent = `El promedio es ${resultado}`; 

}

gracias porfe ese reduce no lo entendia del todo , pero ahora si.

Aquí experimenté creando el formulario para obtener los datos con el método split de creación de array a partir de los datos de un input con un separador (,).

Después convierto en números los datos del array recibidos.

const arrayDeCadenas = lista.split(',').map(Number);

Método Reduce:

  • Una forma de entenderlo seria imaginando una forma primitiva del “Reduce”.
    Un método “reduce” primitivo solo necesita de 2 parámetros , estos serán datos de un array.
[a,b,c,d,e]
lista.reduce(letra1,letra2){return letra1+letra2 };

Este método solamente nos devolverá a+b ,que representaremos como B,aun no llega al resultado de acumular todos lo valores

  • La forma actual “reduce” necesita reciclar o acumular los valores primitivos esto lo hara mediante una funcion , esta es la que recien usara los 2 parametros primitivos(a,b) para acumularlos en B.
 lista=[a,b,c,d,e] 
lista.reduce(function(letra1,letra2)){ return B = a+b };

Ahora reciclaremos B para poder acumular todos los siguientes valores.

En esa nueva iteración letra1=B y letra2=c hasta solo quede una sola letra

lista=[B,c,d,e]
lista.reduce(function(letra1,letra2)){return C = B+ c};

En la ultima iteracion se lograra:

lista=[D,e]
lista.reduce(function (letra1,letra2)){return E = D + e};
[E]

Finalmente obtendremos el valor total reciclado E

OJO: La función recicladora puede usar mas métodos parte de la suma Ejem:

function(letra1,letra2){return letra1*letras2}; // obtendriamos la multiplicacioon de todos los valores de la lista

//Si buscamos hallar la expresion matematica n! de una lista 
listaNumerica=[1,2,3,...n]
listaNumerica.reduce(function(a,b)){return a*b };

Les comparto mi código utilice split() para separar una cadena de texto y guardar los valores divididos en un array, , el metodo split() recibe el caracter separador.

Código en JavaScript

function promedio(vector)
{
    const sumaLista = vector.reduce(
        (valorAcumulado, nuevoElemento )=> parseInt(valorAcumulado) + parseInt(nuevoElemento),
    )
    const promedio = Math.round((sumaLista / vector.length)*100) /100;
    console.log(promedio)
    return promedio;
}

let inputNumeros = document.getElementById('ingresoValores');
function calcularPromedio(){
    let lista = inputNumeros.value.split(',');
    
    console.log(lista);
    let respueta = document.getElementById('respuestaPromedio');
    respueta.innerHTML = promedio(lista)
   
}
 

Array.prototype.reduce()

The reduce() method executes a user-supplied “reducer” callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

The first time that the callback is run there is no “return value of the previous calculation”. If supplied, an initial value may be used in its place. Otherwise the array element at index 0 is used as the initial value and iteration starts from the next element (index 1 instead of index 0).

Perhaps the easiest-to-understand case for reduce() is to return the sum of all the elements in an

Example

const array = [15, 16, 17, 18, 19];

function reducer(previous, current, index, array) {
  const returns = previous + current;
  console.log(`previous: ${previous}, current: ${current}, index: ${index}, returns: ${returns}`);
  return returns;
}

array.reduce(reducer);

Yo hice una función para la media utilizando un For of.

var lista = [400,200,300,500];

let sumaLista= 0;

function media(list){
// Empiezo declarando la suma lista, para que no se sumen los datos cada que se agrega un argumento a la funcion
    sumaLista =0;
    for(var x of list)
        {
            sumaLista+= x;
        };
    resultado = sumaLista / list.length;
    return resultado;
    
}
media(lista);
//OUTPUT:
350 

Aprendiendo a utilizar bien el reduce, debemos entender sus bases, el reduce nos permite utilizar una función que recorre los elementos del array y que tiene los siguientes parámetros:

function(valorAnterior, valorActual)

Cuando se inicia el recorrido en un array el valor anterior no existe, por eso el profesor declaro el valorAnterior como “valorAcumulado=0”, quedando el codigo de la siguiente manera:

var lista = [400,200,300,500];
const sumatoria = lista.reduce(function(valorAcumulado = 0, nuevoElemento)
{ 
    return valorAcumulado + nuevoElemento;
}
);

Esto se puede hacer de otra manera dándole a la funcion un tercer parámetro, es decir:
function(valorAnterior, valorActual, valorInicial). De este modo no tenemos que declarar el primer parametro con valor a 0.

ejemplo:

var lista = [400,200,300,500];
const sumatoria = lista.reduce(function(valorAcumulado, nuevoElemento)
{ 
    return valorAcumulado + nuevoElemento;
},0
);

Se le de da un argumento de valor 0 al parametro valorInicial, (Es el 0 que esta justo después de terminar la declaración de la función)
El output quedaría así:

sumatoria
1400

Curiosamente pense que el profesor no habia colocado el return , pero luego dijo algo y se me olvido . Entonces cuando llamo la funcion para que me tire el resultado dije: Ah caray !! Hahahaaha

Recomienda el video de mas abajo, bien explicado los metodos 😃

Gracias a los apuntes de los compañeros me quedo mas claro la clase aqui un pequeño aporte de lo aprendido

  1. code JS
  2. Code HTML

Al dia de hoy, no hay necesidad de incializar en cero el primer paramemtro.

Si quizá alguno se perdió, con la explicación dos para sacar el promedio con reduce les comparto el siguiente codigo.

function suma(a, b) {
  return a + b;
}

const numeros = [10, 20, 30, 40, 50, 60, 70, 80, 90];

const resultado = numeros.reduce(suma);

console.log(resultado); // 450

Un array, es un tipo de dato estructurado que permite almacenar un conjunto de datos homogeneo, es decir, todos ellos del mismo tipo y relacionados.

ESTO ES UNA FORMA MAS SIMPLE

var  sumaLista1 = 0;
for (i of lista1)
{
	sumaLista1 += i;
}

En lugar de escribir

sumaLista1 = sumaLista1 + Lista1[i];

Se podría hacer más corto el código escribiendo

sumaLista1 += Lista1[i];

Un pequeño detalle. Revisando la documentación sobre array.reduce:

reduce(function(previousValue, currentValue) { /* … */ })

Nos indica que si no se específica un valor inicial y simplemente se deja como en la sintaxis de arriba los valores se toman de la siguiente manera:

  • previousValue: El elemento 0 del array —> array[0]
  • currentValue: El elemento 1 del array —> array[1]

Entonces, imagino, no es necesario igual el primer valor a 0 en la función.
click aquí para ver la documentación

Mi solucion utilizando ES6+:

const valores = [100,200,300,500];

var reducer = (acumulado,actual)=> acumulado + actual;

var promedio = (arr)=> arr.reduce(reducer,0)/arr.length;

Media Aritmética:


 
Yo realice la formula para calcular la media aritmética lo mas simplificado posible.

function arithmeticAverage(list) {
    return list.reduce(
        (previousValue, currentValue) => previousValue + currentValue
    ) / list.length;
};

simpleUtilities

Taller 3

 
Sígueme en GitHub

Bueno creo que no es un aporte tan significativo debido a que solo tuve que googlear un poco, aquí una explicación un poco más extendida sobre el método reduce
https://www.educative.io/edpresso/what-is-reduce-in-javascript

Reduce

Mi codigo

let lista1 = [];

let sumaLista1 = 0;

function onClickAddVailor() {
  const valorInput = document.getElementById('valor');
  const viewLista = document.getElementById('viewLista');

  lista1.push(Number(valorInput.value));

  viewLista.innerHTML = `<b>valores de la lista</b>: [${lista1}]`;

  valorInput.value = '';
  valorInput.focus();
}

function onClickLimpiarLista() {
  const valorInput = document.getElementById('valor');
  const viewLista = document.getElementById('viewLista');

  lista1 = [];

  viewLista.innerHTML = `<b>valores de la lista</b>: [${lista1}]`;

  valorInput.focus();
}

function calcularMediaArimetica(lista) {
  /*  for (let i = 0; i < lista.length; i++) {
    sumaLista += lista[i];
  } */

  /*  const sumaLista = lista1.reduce(function (valorAcumulado = 0, nuevoValor) {
    return valorAcumulado + nuevoValor;
  }); */

  const sumaLista = lista1.reduce(
    (previousValue, currentValue) => previousValue + currentValue,
    0
  );

  return sumaLista / lista.length;
}

function onClickCalcularPromedio() {
  const mediaArimetica = calcularMediaArimetica(lista1);

  alert(`la Media aritmética es ${mediaArimetica} `);
}

<!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>Promedio</title>
  </head>
  <body>
    <header>
      <h1>Promedio</h1>
    </header>

    <section>
      <h2>Calcular Promedio</h2>

      <form>
        <label for="valor">Valor</label>
        <input type="number" id="valor" />
        <br />
        <button type="button" onclick="onClickAddVailor()">
          añadir valor a lista
        </button>
        <button type="button" onclick="onClickLimpiarLista()">
          limpiar lista
        </button>
      </form>

      <p id="viewLista"></p>

      <button type="button" onclick="onClickCalcularPromedio()">
        calcular Media Aritmética
      </button>
    </section>

    <script src="./promedio.js"></script>
  </body>
</html>

Hola! sino entendieron muy bien el tema les dejo un video y un articulo para que puedan entenderlo.
El articulo: Articulo
El video: Video

ASÍ ME QUEDÓ A MÍ
Es completamente responsivo y cuenta con validaciones 🙋🏻‍♂️

  • Vista mobile
  • Vista desktop

Pueden ir a ver el proyecto aquí
Pueden ir a ver el repositorio aquí

// Calcular media aritmetica (promedio)
function calcularMediaAritmetica(list) {
    let sumaLista = 0;
    for(let i = 0; i < list.length; i++) {
        sumaLista += list[i];
    }

    let resultadoTotal = (sumaLista / list.length);
    console.log(resultadoTotal);
}

calcularMediaAritmetica([100, 200, 500, 400]);

let lista = [10, 20, 30, 40, 50];
const sumaList = lista.reduce(
    function (valorAcumulado = 0, nuevoElemento) {
        return valorAcumulado += nuevoElemento;
    }
) 

let promedioCalculado = sumaList / lista.length;
console.log(promedioCalculado);

Quizás se vea un poco enredado, pero este modulo es mas fácil utilizando Vue.js, además de lo que el profe Juan explica 😄


Aquí el curso de Vue.js
https://platzi.com/clases/vuejs2/

Cada vez avanzamos más.

No sabía la funcionalidad de reduce, buen tip

Me perdi un momento cuando le asignaste el valor 0 al parametro de acumulador, luego investigando me di cuenta que al hacer eso te ahorras tener que meter el valor inicial por separado en la funcion Callback

Aqui cada vez que se ejecuta este codigo se crea un div en el html y a ese div se le pone como texto el número que da como resultado de la suma de los numeros del array

function probando(){
    //Creacion de divs 
    var i=0;
    var num_stud=8;
    var newdiv;
    var divIdName;
    for(i=0;i<=num_stud;i++)
    {
        newdiv = document.createElement('div');
        divIdName = i;
        newdiv.setAttribute('id',divIdName);
        document.body.appendChild(newdiv);
    }
    // Aqui se suman los elementos del array
    const lista1 = [1,2,3,4,5,6,7,8,9];
    let sumaLista1 =  0;
    for(let i = 0; i < lista1.length; i++){
        console.log(`Yo soy el elemento ${i} , y mi numero es ${lista1[i]} `);
        sumaLista1  = sumaLista1 + lista1[i];
        console.log(sumaLista1);
        document.getElementById(i).innerHTML = `Yo soy el elemento ${i} , y mi numero es ${lista1[i]} suma: ${sumaLista1} `;
    }
    //Promedio calculo
    const promedioLista1 = sumaLista1 / lista1.length
}

Html por si te interesa

  <main>
        <h1>Promedio, mediana y moda aritmeticas</h1>
        <p>Aqui podras calcular tanto el promedio, mediana y moda de ciertos datos que tu vas a poder ingresar</p>
         <button onclick="probando()">  clickeame</button>
    </main>
function promedio(lista1) {
    let suma = 0;
    for (let i = 0; i < lista1.length; i++) {
        suma += lista1[i];
    }
    return suma / lista1.length;
}
console.log(promedio(lista1));

ffunction calcularMedidaAritmetica(lista){
    const sumaLista = lista.reduce((acumulador, nuevoElemento) => acumulador + nuevoElemento);
    const promedio = sumaLista / lista.length;
    return promedio;
}

// const lista1 = [
// 100,
// 200,
// 300,
// 500,
// ];

function calcularMediaAritmetica(lista1) {
// let sumaLista1 = 0;
// for (let index = 0; index < lista1.length; index++) {
// const element = lista1[index];
// sumaLista1 = sumaLista1 + element;
// }

const sumaLista1 = lista1.reduce(
    function(valorAcumulado = 0, nuevoElemento) {
        return valorAcumulado + nuevoElemento;
    }
);

const promedioLista1 = sumaLista1 / lista1.length;
return promedioLista1;

}

Asi lo hice yo, solo me falta agregarle estilos

HTML

<!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>Promedio</title>
</head>
<body>
  <h1>Calcula el promedio</h1>
  <p id="print"></p>

  <form action="">
    <label for="inpuPromedio">
      <input type="number" id="inpuPromedio">
      <button type="reset" onclick="pushArray()">Enviar</button>
    </label>

    <button type="button" onclick="calcular()">Calcular promedio</button>
  </form>

  <script src="./promedio.js"></script>
</body>
</html>

JAVASCRIPT

const lista = [];

function pushArray() {
  const input = document.getElementById("inpuPromedio");
  const value = Number(input.value);
  console.log(value)
  const elements = lista;
  
  elements.push(value);
  
  return elements;
}

function calcularMediaAritmetica(element){
  let sumaLista = 0;

  element.forEach(element => sumaLista += element);

  const promedioLista = sumaLista / element.length;
    
  return promedioLista;
}

function calcular() {

  const result = calcularMediaAritmetica(lista);
  const imprimir = document.getElementById("print");

  return imprimir.innerText = (`El promedio es: ${result}`);

}


Asi evoluciono mi codigo.

const lista1 = [
  100,
  200,
  300,
  400,
  500
];


function calculaMediaAritmerica(listArray){

  // 1
  // let sumaLista1 = 0;
  //  for(let i = 0; i < listaArray.length; i++){
  //    sumaLista1 = sumaLista1 + listaArray[i];
  //  }  👇

  // 2
  // const sumaLista1 = listArray.reduce(
  //   function (valorAcumulado = 0, nuevoElemento ){
  //     console.log(valorAcumulado);
  //     return valorAcumulado + nuevoElemento;
  //   }
  // ); 👇

  // 3 👇
  const sumar = (valorAcumulado, nuevoElemento) => valorAcumulado + nuevoElemento ;
  let sumaLista1 = listArray.reduce(sumar, 0); 

  // -------------------------
  let promedioLista = sumaLista1 / lista1.length;
  return promedioLista;
}
function calcMedia(array) {
	const suma = array.reduce((acc, item) => {
		return acc += item;
	});

	return media = (suma / array.length).toFixed(2);
}

Diferentes métodos para los Arrays:

Calcular promedio usando redicer:

//promedio
const getPromedio = (values) =>
  values.reduce((acum, curr) => acum + curr) / values.length;

console.log(getPromedio([1, 2, 3]));

Excelente clase. Sigo aprendiendo bastante.

Ejercicios de la Clase

// codigo HTML
<!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>Promedio</title>
    </head>
    <body>
        <h1>Promedio</h1>
        <script src="./promedio.js"></script>
    </body>
</html>
// codigo JavaScript
function calcularMediaArimetrca(lista) {
    // let sumaLista = 0;

    // for (let i = 0; i < lista.length; i++) {
    //     sumaLista = sumaLista + lista[i];
    // }

    const sumaLista = lista.reduce(
        function (valorAcumulado = 0, nuevoElemento) {
            return valorAcumulado + nuevoElemento;
        }
    );

    const promedioLista = sumaLista / lista1.length;

    return promedioLista;
}

Otra forma de ver la función del calculo aritmético, y usando el método .reduce()

function calularMediaAritmetica(lista){
  const mediaAritmetica = (accumulator, increment) => accumulator + increment
  const sumaLista =lista.reduce(mediaAritmetica)
  return sumaLista
}

const sumx = arr.reduce((a,b) => a + b,);

function calcularMediaAritmetica(lista) {
    /* let sumaLista = 0; */
    /* for (let i = 0; i < lista.length; i++) {
        sumaLista = sumaLista + lista[i];
    } */
    const sumaLista = lista.reduce(
        function (valorAcumulado = 0, nuevoElemento) {
            return valorAcumulado + nuevoElemento;
        }    
    );
    
    const promedioLista = sumaLista / lista.length;
    console.log(promedioLista);
    
}

Hola, dejo mi código usando arrow functions

const lista1 = [
  100,
  200,
  300,
  500
];
const reducer = (acum, list_element) => acum += list_element

const mediaAritmetica = (lista) => {
  let sumaLista = lista.reduce(reducer, 0);
  const promedioLista = sumaLista / lista.length;
  return promedioLista;
};

En una sola línea usando ES6, también es posible:

const getAverage = (arr) => arr.reduce((accu, currentV) => accu + currentV) / arr.length;

También puede realizar la suma con for…of

const list = [100, 200, 300, 500];
let sumList = 0;
for (let value of list) {
    sumList += value;
}

Pero con el reduce es mejor y lo puedes hacer más corto utilizando arrow function.

list.reduce((accumulator, currentValue) => accumulator + currentValue)

NOTA: Las funciones normales y las arrow functions tienen sus diferencias en algunos casos puede que no te de el resultado esperado por el manejo del contexto.

const salaries = [
  100,
  200,
  300,
  500
];

const CashFromPockets = [
  25,
  40,
  120,
  5,
  0.6,
  2,
  1
];

const getAverageOfList = (list) => {
  let listSum = 0;
  const listLength = list.length;
  for (let i = 0; i < list.length; i++) listSum +=list[i];
  return listSum / listLength;
};

const averageWithReduce = (list) => {
  const listLength = list.length;
  const average = list.reduce(
    (accum = 0, nextValueFromList) => accum + nextValueFromList
  )
  return average / listLength;
};

const salariesAverage = getAverageOfList(salaries);
const pocketCashAverage = getAverageOfList(CashFromPockets);

const reduceSalaries = averageWithReduce(salaries);
const reducePockets = averageWithReduce(CashFromPockets);

console.log({reduceSalaries, reducePockets});
console.log({salariesAverage, pocketCashAverage});

He aquí mi solución para calcular el promedio:

function calcPromedio(arrayNumerico){
    const sumaTotal = arrayNumerico.reduce(
        (sumaAcumulada, elementos) => sumaAcumulada + elementos
    )
    return sumaTotal/arrayNumerico.length
}

la función recibe como parámetro un arreglo, luego almacena el una variable la suma de todos los elementos del array, finalmente divide la suma entre la cantidad de elementos del array y retorna ese valor.

Se puede simplificar más de la siguiente manera:

let calcPromedio = arrayNumerico => arrayNumerico.reduce(
    (sumaAcumulada, elementos) =>sumaAcumulada + elementos
 ) / arrayNumerico.length

En mi solución voy agregando los elementos desde HTML.
Mi repo.

HTML

<!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>Average</title>
</head>

<body>
    <h1>Average</h1>
    <form action="">
        <label for="inputElement"></label>
        <input type="number" name="inputElement" id="inputElement" />
        <button type="button" onclick="onClickAddElement()">Add</button>
        <ul id="listElement"></ul>
        <button type="button" onclick="onClickAverageBtn()">Calculate</button>
    </form>
    <p id="result"></p>
    <script src="./js/promedio.js"></script>
</body>

</html>

JavaScript

const getAverage = (list = []) => {
    let sum = list.reduce((sumTotal, number) => sumTotal + number, 0);
    const average = sum / list.length;
    return average.toFixed(2);
};
const list = [];
const onClickAddElement = () => {
    const inputElement = document.getElementById("inputElement");
    const listElement = document.getElementById("listElement");
    let element = parseInt(inputElement.value);
    inputElement.value = "";
    list.push(element);
    listElement.innerHTML += `<li>${element}</li>`;
};
const onClickAverageBtn = () => {
    const average = getAverage(list);
    alert(`The average is: ${average}`);
};

Hice este apunte del video MAP, FILTER y REDUCE EN JAVASCRIPT que muchos recomendaron. Espero y les sirva 💚
.
.

REDUCE

Si tenemos un array de números y queremos calcular la suma de todos ellos.

En vez de escribirlo con un for que es demasiado imperativo

const numeros = [3, 10, 20, 50];
let total = 0;
for (let numero of numeros) {
    total += numero;
}

Podemos usar reduce sobre el array original

const numeros = [3, 10, 20, 50];
let total = numeros.reduce();

El primer parámetro de reduce es la función reductora, esta ira actualizando el acumulador

El segundo parámetro el es valor inicial del acumulador, este caso va a ser 0

let total = numeros.reduce(() => {

}, 0);

La función reductora recibe como primer parámetro el acumulador

Para el primer elemento el acumulador va a llegar con el valor inicial “0”

let total = numeros.reduce((acumulador) => {

}, 0);

luego cuenta con otros 3.

  • numero El elemento actual del array
  • posicion La posición de ese elemento dentro del array
  • numeros El array completo
let total = numeros.reduce((acumulador, numero, posicion, numeros) => {

}, 0);

Dentro de la función reductora tenemos que retornar el valor del acumulador actualizado

let total = numeros.reduce((acumulador, numero) => {
	return acumulador + numero;
}, 0);

En este caso retornando la suma del valor que nos llego y el numero actual actual

Esto se puede escribir mas corto sacando la sentencia de retorno y las llaves

let total = numeros.reduce((acumulador, numero) => acumulador + numero, 0);

Incluso se puede escribir la función de acumular en una variable aparte y usarla dentro del reduce

const acumular = (acumulador, numero) => acumulador + numero;
let total = numeros.reduce(acumular, 0);

Así nos queda mas separado que hace cada parte del programa.

La función acumular recibe un acumulador y un numero, nos retorna el nuevo valor acumulado

💡 Aclaración importante sobre reduce y su valor inicial del acumulador

El segundo parámetro es un parámetro opcional, si no lo ponemos reduce va a tomar el primer elemento del array como valor inicial y va a empezar a acumular desde el segundo elemento

No vamos a tener problema ya que sabemos que el array tiene varios números

const numeros = [];

const acumular = (acumulador, numero) => acumulador + numero;
let total = numeros.reduce(acumular);

pero si estuviera vacío e intentamos ejecutar este programa

veríamos un error de tipos por la consola, ya que estamos iniciando reduce, sin un valor inicial que pueda usar

Si lo hacemos de esa forma nos aseguramos de que esta sentencia se ejecute solo si el array contiene elementos

const numeros = [];

const acumular = (acumulador, numero) => acumulador + numero;
let total = numeros.length > 0 ? numeros.reduce(acumular);

lo de la explicacion del metodo reduce tengo muchas dudas ya que no entendi para nada su explicacion…

Archivo HTML

<!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>Promedio</title>
</head>
<body>
    <h1>Promedio</h1>
    
    <p>Instertar lista de valores separados por coma</p>

    <label for="inputListaMedia">listado de valores</label>
    <input type="text" id="inputListaMedia" placeholder="Ej: 12, 20, 30">
    <button type="button" onclick="onClickCalcularMedia()">
        Calcular media
    </button>
    <p id="resultadoMedia"></p>
    <script src="./promedio.js"></script>
</body>
</html>

Archivo JS

function onClickCalcularMedia() {
    // Se captura los datos del html y se guardan los valores dentro de una variable
     const inputLista = document.getElementById("inputListaMedia");
    // Al ser un String los valores capturados, se procede a convertir el formato a Number 
     const inputListaValue = inputLista.value;
     //se transforma el formato a array
     let arrayMedia = Array.from(inputListaValue.split(","), Number);

     //Usando el metodo reduce enseñado:
     const sumaLista = arrayMedia.reduce((counter = 0, item) => counter + item);
    //sinonimo de lo anterior, pero mas largo es: 
    //const sumalista = arrayMedia.reduce(
    //    function (counter=0, item) {
    //         return counter + item;

     const media = sumaLista/arrayMedia.length;

     const resultadoMedia = document.getElementById("resultadoMedia")
     resultadoMedia.innerText = 'la media es ' + media;
 }

Code

function calcularMediaAritmetica(lista) {
	const sumaLista = lista.reduce(
		function (valorAcumulado = 0, nuevoElemento){
			return valorAcumulado + nuevoElemento;
		}
);

    const promedioLista = sumaLista / lista.length;

    return promedioLista;

}

Bueno, yo lo hice asi 😛

function calcularMediaAritmetica(lista){
    
const acumulador= (acumulado, numero) => acumulado+numero;
const sumaLista= lista.reduce(acumulador)

const promedioLista= sumaLista / lista.length

    return promedioLista;

usado el método reduce al array: lista.reduce()

Me gustaría que en las clases se usara las “arrow functions” además de la sintaxis mostrada, para acostumbrarnos a generar un código mas limpio