Como somar elementos de um array de maneira performática

Neste artigo você vai aprender a como somar elementos de um array, utilizando a forma mais performática para você utilizar nos seus projetos

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre arrays, soma de elementos em JavaScript!

Para a nossa surpresa o bom e velho for é a forma mais rápida de somar todos os elementos de um array

Temos outras possibilidades como:

forEach
reduce
e o próprio for

Vejamos então o código desta abordagem de for:

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

var arr = [1,2,3,4,5,6,7,8,9,10];
var soma = 0;

for(var i = 0; i < arr.length; i++) {
	soma += arr[i];
}

console.log(soma);

Desta forma criamos um loop for, baseado no comprimento máximo do array, ou seja, a quantidade de elementos do mesmo

Utilizamos o operador de atribuição para inserir o valor do índice atual na soma, realizando o cálculo com base no andar do loop

Veja também o mesmo cáculo com reduce:

var arr = [1,2,3,4,5,6,7,8,9,10];

var soma = arr.reduce(function(soma, i) {
	return soma + i;
});

console.log(soma);

Desta maneira teremos o mesmo resultado, porém utilizando reduce, que não será mais performático que o for

Reduce é uma função de array de JavaScript

Conclusão

Neste artigo aprendemos a como somar elementos de um array, utilizando a forma mais performática possível

Descobrimos que o loop for é a maneira mais rápida de realizar a soma de elementos de um array

Vimos também uma abordagem utilizando reduce, que é uma função de array de JavaScript

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Seção mostrando o caso real que quase todo mundo cai na prática: somar uma propriedade de um array de objetos com reduce, passando o valor inicial. Explica o PORQUÊ do valor inicial antes do como (sem ele, o reduce assume o primeiro item como acumulador e quebra quando os itens são objetos), depois mostra o código:

var produtos = [ { nome: ‘A’, preco: 10 }, { nome: ‘B’, preco: 25 }, { nome: ‘C’, preco: 7 } ];

var total = produtos.reduce(function(soma, produto) { return soma + produto.preco; }, 0);

console.log(total);

Se liga no 0 ali no final: é o valor inicial do acumulador

Sem ele, o reduce começa somando objeto com objeto e o resultado vira aquele NaN que assombra todo mundo

O post lista o forEach como possibilidade mas nunca mostra o código dele. Vale fechar a lacuna com o exemplo, mantendo o tom de que o for ainda é o mais rápido:

var soma = 0;

arr.forEach(function(numero) { soma += numero; });

console.log(soma);

Aqui a gente deixa o forEach percorrer cada elemento e ir empilhando na soma, sem precisar controlar o índice na mão como no for

Bloco antecipando o erro clássico: quando os valores vêm de input ou de JSON, chegam como texto e o + concatena em vez de somar. Mostra o conserto com Number:

var soma = valores.reduce(function(total, valor) { return total + Number(valor); }, 0);

console.log(soma);

Já me ferrei uma vez por causa disso: sem o Number, ’10’ + ’20’ vira ‘1020’ e não 30