Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Calculando el promedio en JavaScript

15/24
Recursos

Aportes 108

Preguntas 26

Ordenar por:

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

[■,■,■,■].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

Calcular el promedio con map y for:

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 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 😃

Otra forma de hacerlo:

function calcularMediaAritmetica(lista){
    let total = 0
    lista.forEach((number) => {
        total += number
    })
    const promedio = total / lista.length
    return promedio
}
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;
}

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.

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.

.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
}

MI APORTE:

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

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 

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}`; 

}

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}`);
};

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

pude colocar la lista atraves de un input

este es el codigo :

function calcularPromedio(lista) 
{   
    const parrafo = document.getElementById("resultadoP")
    
    let sumaLista = 0;
    for (let i = 0; i < lista.length; i++)
    {
        sumaLista = sumaLista + lista[i];  
    }

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

    const promedio= sumaLista/lista.length

    parrafo.innerText = "el promedio es " + promedio

}

function mostrarPromedio() {
    const inputLista = document.getElementById("lista")
    const valueLista = inputLista.value
    
    var regex = /(\d+)/g;
    var separarLista = valueLista.match(regex)
    var lista = []
    // alert(listas)
    // console.log(separarLista[2])

    for (let i = 0; i < separarLista.length; i++) {
        const element = parseInt(separarLista[i]);
        lista.push(element)
        console.log(lista)
    }
    calcularPromedio(lista)

    
}


Por si a alguien más le pasa.
Recuerden que la función recibe como argumento un array, no solo números sueltos, esto porque yo al intentar pasar como argumentos solo números me dió error.

.
Y al pasar una lista el error estaba solucionado.

const list = [];

function agregarNumero(){
    const dato = document.getElementById("InputNumber").value;
    const masNumeros = list.push(Number(dato));
}

console.log(list);

function calcularAvg(){
    const sumNumbers = list.reduce(function(acumulador=0,valorList){
            return acumulador + valorList;
        }
    );
    
    const result= sumNumbers / list.length;

    const resultP = document.getElementById("ResultAvg");

    resultP.innerText = "El promedio es: "+ result;
}


yo reduje así el reduce (valga la redundancia XD)

const sumaLista = lista.reduce((a, b) => a + b, 0);
const sumaLista = lista.reduce((valorAcumulado, nuevoElemento) => valorAcumulado + nuevoElemento, 0);

me encanto el metodo reduce mi uso del ciclo for se vera disminuido drasticamente jajaja 😃

Asi quedo mi promedio

mi codigo js

let list = []

const calculateList = () => {
    const salario = document.getElementById("InputSalarios");
    const salarioValue = Number(salario.value)

    if(salarioValue >= 1){
        list.push(salarioValue);

        listaHtml = list.map(lista => lista)
    
        document.getElementById("InputSalarios").value = "";

        const resultList = document.getElementById("ResultL")
        resultList.innerText = "Salarios agregados son: " +  listaHtml
    }

    return list
}

const calculateMediaAritmetica = (list) => {
    if(list.length > 0) {
        const sumaLista = list.reduce(function(a, b){return a + b});
        const promedioList  = sumaLista / list.length;
        return promedioList
    }
}

const calculatePromedio = () => {
    const dateList = calculateList();

    if(dateList.length > 0) {
        const promedio = calculateMediaAritmetica(dateList);

        const resultPromedio = document.getElementById("ResultPromedio")
        resultPromedio.innerText = "El promedio de los salario entre los trabajadores es de $" + promedio 

    return promedio
    }
    
    return []
}

La verdad todo mal con esta clase. super superficial, el curso basico de JavaScript y el curso practico dejan muchisimo que desear la verdad.

Dejo mi resultado


function calcularMediaAritmetica() {

  //OBTENGO LOS DATOS Y LOS TRANSFORMO A UN ARRAY
  const entradaDatos = document.getElementById("media").value;
  let arrayValue = Array.from(entradaDatos.split(","), Number);

  //REALIZO LA SUMA DE TODO EL ARRAY
  const sumaLista = arrayValue.reduce((valorAcumulado, nuevoElemento) => valorAcumulado + nuevoElemento);

  //CALCULO LA MEDIA
  const promedioLista = sumaLista / arrayValue.length;

  //ENVIO EL RESULTADO AL HTML
  const mostrarResultado = document.getElementById("mResult");
  mostrarResultado.innerText = promedioLista;
};
const mediaAritmetica = (lista) => {
    const acumular = (valorAcumulado, valorActual) => valorAcumulado + valorActual
    let sumaLista = lista.reduce(acumular,0);
    
    const promedioLista = sumaLista / lista.length;
    return promedioLista;
}

Dijiste que el ciclo no se seguiría ejecutando cuando i sea mayor a lista1.length, en realidad es cuando sea igual, ahí ya no se seguiría ejecutando el cliclo for. Eso puede causar confusiones

🦄Tomé como referencia la forma de pedir al usuario los datos para realizar una página de la siguiente forma :3✨