¿Cómo sumar los elementos de un Array en Javascript?

Para sumar los valores numéricos de un arreglo (array) tienes a tu disposición una variedad de opciones. Te presento las 4 soluciones más comunes, de las cuales, utilizar Array.reduce es la mejor opción 🏆.

Array.reduce para sumar un array de números

Si solo buscas encontrar la solución en código, te la muestro a continuación. Si deseas entender cómo funciona el código, sigue leyendo.

const array = [5, 10, 2];

const suma1 = array.reduce((valorAnterior, valorActual) => {
  return valorAnterior + valorActual;
}, 0);

console.log(suma1); // 👉️ 17

// lo mismo, pero más conciso, y en solo una línea
const suma2 = array.reduce((anterior, actual) => anterior + actual, 0);

Para obtener la suma de un arreglo (array) de números usa el método Array.reduce. Este método te permite tomar todos los elementos de un arreglo (array), aplicar una función a cada uno de ellos, y acumular el resultado en un valor de salida.

La función reductora puede recibir 4 argumentos, pero para la suma, solo necesitas 2:

1. Valor anterior
2. Valor actual

Si te gustaría aprender más detalles sobre reduce puedes consultar nuestro artículo ¿Cómo se usa reduce en Javascript? o consultar la documentación en los MDN web docs.

Ayuda a prevenir el síndrome de túnel carpiano al usar un Mouse ergonómico vertical. Consulta nuestro post ¿Cómo logré evitar el síndrome de túnel carpiano? para más información.

Sintaxis simplificada de Array.reduce

// Función callback 
reduce(function(valorAnterior, valorActual) { /* ... */ },  valorInicial)

// Función flecha
reduce((valorAnterior, valorActual) => { /* ... */ }, valorInicial)

callback: (a esta función también se le llama “acumulador“) es una función que se pasa como primer parámetro. A su vez, esta función recibe 2 parámetros: el valor anterior y el valor actual. reduce recorrerá todos los elementos del array y aplicará la función callback. El valor anterior será el resultado devuelto por la ejecución anterior de callback. Si es la primera vez, será el valorInicial. Para el valor actual, asignará el elemento que esté evaluando en ese momento.

valorInicial: el valor que reduce le pasará a callback como valorAnterior la primera vez que se ejecute. Este valor es opcional y si no le pasas nada, usará el primer elemento de la lista y se saltará al segundo.

Tal vez esto suene un tanto complicado, pero un ejemplo te ayudará a tener el concepto más claro. Primero, veamos cómo sumar elementos de un array de números.

const array = [5, 10, 2];

const suma = array.reduce((valorAnterior, valorActual) => {
  return valorAnterior + valorActual;
}, 0);

console.log(suma); // 👉️ 17

La función callback fue invocada 3 veces, con los argumentos y valores devueltos como se muestra a continuación:

Ayuda a prevenir el síndrome de túnel carpiano al usar un Mouse ergonómico vertical. Consulta nuestro post ¿Cómo logré evitar el síndrome de túnel carpiano? para más información.

Array.reduce para sumar valores de una propiedad en un array de objetos

En el siguiente ejemplo veremos cómo sumar elementos de un arreglo (array) de objetos usando el método Array.reduce. El código es muy similar, la diferencia es que utilizamos una propiedad del objeto en nuestra suma.

const products = [
  { name: 'Juego de Ajedrez', price: 10.50 },
  { name: 'Libro Design Patterns', price: 15.00 },
  { name: 'Lampara de escritorio', price: 20.25 },
];

const sum1 = products.reduce((previous, current) => {
  return previous + current.price; // sumar el valor de una propiedad
}, 0);

console.log(sum); // 👉️ 45.75

// lo mismo, pero más conciso, y en solo una línea
const sum2 = products.reduce((prev, curr) => prev + curr.price, 0);

Bucle for...of

El bucle for…of nos permite iterar sobre un array.

1. Declara una variable (en el ejemplo es sum) y asígnale el valor de 0.
2. Utiliza for...of para iterar sobre el array.
3. En cada iteración, a la variable sum reasígnala al valor de su valor actual más el valor del elemento actual (sum += value)

⚠️ Nota que declaramos la variable sum usando la palabra clave let. Si hubiéramos utilizado const, no hubiéramos podido reasignar el valor.

const arr = [2, 4, 14];

let sum = 0;

for (const value of arr) {
  sum += value;
}

console.log(sum); // 👉️ 20

Ciclo for clásico

También puedes utilizar el bucle for clásico para sumar un array de números.

⚠️ Nota que declaramos la variable sum usando la palabra clave let. Si hubiéramos utilizado const, no hubiéramos podido reasignar el valor.

const arr = [2, 4, 14];

let sum = 0;

for (let index = 0; index < arr.length; index++) {
  sum += arr[index];
}

console.log(sum); // 👉️ 20

Método sum de lodash para sumar un array de números

Si ya tienes instalada la biblioteca de lodash puedes sumar fácilmente los números presentes en un array con el método sum.

const _ = require('lodash');

const sum = _.sum([2, 4, 14]);

console.log(sum); // 👉️ 20

Método sumBy de lodash para sumar valores de una propiedad en un array de objetos

const products = [
  { name: 'Juego de Ajedrez', price: 10.50 },
  { name: 'Libro Design Patterns', price: 15.00 },
  { name: 'Lampara de escritorio', price: 20.25 },
];

const sum = _.sumBy(products, (product) => product.price);

console.log(sum); // 👉️ 45.75

sumBy es similar a sum pero además acepta una función que es invocada por cada elemento del array para generar el valor a sumar.

Array.reduce no devuelve el resultado esperado ❌

¿Puedes detectar el error/bug en el código a continuación? 👀

const numbers = ['5', '10'];

// Devuelve '0510' ❌
const total = numbers.reduce(
  (anterior, actual) => anterior + actual, 
  0
);

Presta atención a los elementos del array. Los números están entrecomillados, lo cual causa que se interpreten como strings, o cadena de texto. En vez de sumar 5 + 10, se está realizando una concatenación de strings.

Para arreglarlo podrías hacer un cast de los valores por medio del objeto Number.

const numbers = ['5', '10'];

// Devuelve 15 ✅
const total = numbers.reduce(
  (anterior, actual) => Number(anterior) + Number(actual), 
  0
);

Ayuda a prevenir el síndrome de túnel carpiano al usar un Mouse ergonómico vertical. Consulta nuestro post ¿Cómo logré evitar el síndrome de túnel carpiano? para más información.