Formas de calcular a soma e a média dos itens de um array - JavaScript

Por: Angelo Luis Ferreira | 24/01/2020 Acessos: 50.640

Neste tutorial vamos mostrar três formas para calcularmos a soma e a média dos itens de um array. Para isto, vamos utilizar no primeiro exemplo a forma mais tradicional através do laço de repetição FOR IN, no segundo exemplo o método reduce() e no terceiro exemplo o método reduce() com "arrow functions".

Observe que os três exemplos resultam na mesma solução, ou seja, a soma e a média dos itens de um array. A diferença está apenas na quantidade de linhas de código utilizadas em cada exemplo, provando que os novos recursos do JavaScritpt facilitam e ajudam reduzir o trabalho do programador.

Obs1: reduce() é um método JavaScript que reduz uma array à um único valor (de qualquer tipo), como a soma de todos elementos de um array, por exemplo. Para entender melhor como usar o método reduce() acesse os links: MDN Web Docs array.reduce() e Entendendo o reduce() de uma vez por todas

Obs2: Arrow Functions é uma nova forma de criar funções usando o operador => a partir da versão ES6 do JavaScript. Esta nova forma tem uma estrutura mais enxuta quando comparada com a sintaxe de uma expressão de função (fuction expression) - Criando funções através de uma Expressão de Função e Arrow functions.

1ª forma - Através da alça de repetição FOR IN

1. No exemplo vamos calcular a soma e a média das notas de um aluno.

1.1. Utilizamos a alça de repetição FOR IN para calcular a soma de todos os elementos do array (notas do aluno).

1.2. Utilizamos a propriedade length para obtermos a quantidade total de elementos do array.

HTML

<h1>Média Notas Aluno</h1>
<div id="result"></div>

JavaScript

let notas = [2, 4, 5, 4, 3]

document.querySelector("#result").innerHTML = `
    <h2>A soma das notas é: ${somar()}</h2>
    <h2>A Média das notas é: ${somar()/notas.length}
`
function somar() {
  let soma = 0
  for(let i in notas) {
    soma += notas[i]
  }
  return soma
}

Para verificar os códigos acima, teste o nosso exemplo abaixo.

  See the Pen
  Soma itens array com FOR IN - JS by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

2ª forma - Através do método reduce()

1. Neste exemplo, vamos calcular a soma e a média das notas do aluno utilizando o método de manipulação de arrays reduce().

1.1. Observe que utilizando o método reduce() reduzimos o número de linhas de programação quando comparado ao exemplo anterior

HTML

<h1>Média Notas Aluno</h1>
<div id="result"></div>

JavaScript

let notas = [2, 4, 5, 4, 3]

document.querySelector("#result").innerHTML = `
    <h2>A soma das notas é: ${notas.reduce(somar, 0)}</h2>
    <h2>A Média das notas é: ${notas.reduce(somar, 0)/notas.length}
`
function somar(total, number) {
  return total + number
}
    

Obs.1: Utilizamos o valor 0 (zero) como valor inicial. Isto faz com que acumulador (total) somado com o valor corrente (number), seja ao final dos 5 itens do array, da esquerda para a direita, a soma de todos itens do array. (0 + 2, 2 + 4, 6+ 5, 11 + 4 e 15 + 3 = 18)

Obs.2: Ao usarmos a propriedade length contamos o número de itens de um array. Portanto, notas.lenght = 5.

Para verificar os códigos acima, teste o nosso exemplo abaixo.

  See the Pen
  Soma e média com o método reduce() - JS by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

3ª forma - Encapsulando uma estrutura "arrow function" dentro do método reduce()

1. Neste exemplo, vamos repetir as ações do exemplo anterior mas inserindo as funções diretamente no método reduce(), através de estruturas "arrow functions".

HTML

<h1>Média Notas Aluno</h1>
<div id="result"></div>

JavaScript

let notas = [2, 4, 5, 4, 3]

document.querySelector("#result").innerHTML = `
    <h2>A soma das notas é: ${notas.reduce((t, n) => n+t , 0)}</h2>
    <h2>A Média das notas é: ${notas.reduce((t, n) => n+t, 0)/notas.length}
`

Obs.1: Utilizamos a estrutura de arrow functions para reduzir mais ainda nossas linhas de código. Assim, (t, n) => n+t substitui a função somar().

Para verificar os códigos acima, teste o nosso exemplo abaixo.

  See the Pen
  Soma e média itens array -  reduce e arrow functions by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Exemplo prático - Média Alunos Sala de Aula

1. Neste exemplo vamos criar uma rotina para o usuário indicar o nº de alunos de uma turma, digitar as notas dos alunos e obter a média.

HTML

<h1>Média Notas Turma</h1>
<button onclick="main()">Calcular Média Alunos</button>
<div id="result"></div>

JavaScript

function main() {
 let alunos =  parseInt(prompt("Numero de alunos: "));
 let vetor = new Array(alunos);

 // Preenchendo o vetor
  for(let count=0; count<alunos; count++)
    vetor[count] = parseFloat( prompt("Aluno " + (count+1) + ":") )
 
 // Somando todos os elementos
  let soma = vetor.reduce((t, n) => t + n,0);
  // Calculando a média dos elementos
  let media = soma/alunos;
  
  document.querySelector("#result").innerHTML = `
       <h2>Nº de alunos: ${alunos}</h2>
       <h2>Média da turma: ${media.toFixed(2)}</h2>
  `;
} // end main()
       

Obs.1: O método toFixed() converte um número em uma string, mantendo um número especificado de casas decimais. No nosso exemplo especificamos 2 casas decimais.

Para verificar os códigos acima, teste o nosso exemplo abaixo.

  See the Pen
  Cálculo Média Alunos by Angelo Luis Ferreira (@angeloalf)
  on CodePen.

Tente você mesmo

Veja no nosso editor HTML como foi realizada a programação em JavaScript. No editor, altere os códigos da forma que você desejar. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »

Documentação Oficial

1. [array.reduce()] » Sobre o método reduce() - MDN Web Docs.

2. [larray.length] » Sobre a propriedade length - MDN Web Docs.