# Sum Up an Array of Numbers : Frontend Coding Exercise

This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/sum_arrays.htm

Here is one potential solution:

``````<!DOCTYPE html>
<html lang="en">
<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>Sum an Array of Numbers</title>
<body>
<script>
let numbers = [4, 10, 5, 7, 13, 20];

let total = numbers.reduce((total, current) => total + current, 0);

console.log(`Sum of array values is \${total}`);

</script>
</body>
</html>
``````

I recorded a video as well that walks through a few other solutions that could work:

``````<!DOCTYPE html>
<html lang="en">
<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>Sum an Array of Numbers</title>
<body>
<script>
let numbers = [4, 10, 5, 7, 13, 20];
let sum = 0
numbers.forEach(num => sum += num)
console.log(sum)
</script>
</body>
</html>
``````
1 Like

Hi @anilcha - welcome to the forums! Really nicely done with your entry. Very compact too

You got the badge for completing this!

Cheers,
Kirupa

1 Like

I’m going to take advantage of the DOM to do the adding for me!

``````let numbers = [4, 10, 5, 7, 13, 20];

function div (width) {
let el = document.createElement("div");
el.style.display = 'inline-block';
if (width) el.style.width = `\${width}px`;
return el;
}

let container = document.body.appendChild(div());
numbers.forEach(num => container.appendChild(div(num)));
let total = container.offsetWidth;
container.remove();

console.log(`Sum of array values is \${total}`);
``````
3 Likes

Thank you.

1 Like
``````[4, 10, 5, 7, 13, 20].reduce(0, +) // Swift
``````
1 Like

I’ve often wished JS had an add function, something along the lines of Math.max but for adding. The you’d be able to do something like

``````Math.add(...numbers)
``````
1 Like

Why not:

``````Math.prototype.add = function(…nums){let acc = 0; for(let num of nums){acc += num} return acc}
``````

even if they did release a `Math.add` It would probably be the same…

That’s probably what they thought with flatten

2 Likes

Steve, Sen - you both got the badge (in case you didn’t get it already!)

1 Like

Can I use R?

``````numbers = c(4, 10, 5, 7, 13, 20)
sum(numbers)
``````
2 Likes

Yes! That is awesome

2 Likes

1 Like

My word, I just discovered all of the other challenges. I’m going to be busy for a while.

The evil way
let numbers = [4, 10, 5, 7, 13, 20];
eval(numbers.join(‘+’));

2 Likes

That is pure evil! But, it does earn you a badge

2 Likes

HTML:

Sum an Array of Numbers

# Sum an array of numbers

## Instructions:

Create an array of numbers and add them all together. The results should be in the console.

JavaScript:
// Create an array of numbers
let numbers = [
4,
10,
5,
7,
13,
20,
];

// Create a variable to hold the sum
let sum = 0;

// Loop over the array, adding each number to the sum
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}

// Put the result in the console
console.log("Sum of array values is: " + sum);

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum an Array of Numbers</title>
<body>
<h1>Sum an array of numbers</h1>
<br>
<h2>Instructions:</h2>
<p>Create an array of numbers and add them all together.  The results should be in the console.</p>

<script>
// Create an array of numbers
let numbers = [
4,
10,
5,
7,
13,
20,
];

// Create a variable to hold the sum
let sum = 0;

// Loop over the array, adding each number to the sum
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}

// Put the result in the console
console.log("Sum of array values is: " + sum);
</script>
</body>
</html>
``````