Adding Array in JavaScript

Question

How would I add the sum of my array together using a loop and it would output only the sum of the array??

function exercise07Part1() {
 //declare variables
 const MAXIMUM_NUMBER = 10;
 var someNumbers;
 var sumOfNumbers;
 var output;
 var counter;
 //assign 10 variables to the array
 someNumbers = [12,67,90,34,32,67,29,74,49,22];
 //assign variable to counter for the loop
 counter = 1;
 sumOfNumbers = 0;
 while (counter <= someNumbers.length) {
 sumOfNumbers += someNumbers[counter];
 counter++;
 }
 output = document.getElementById('outputPart1');
 output.innerHTML = "Array: [" + someNumbers + "]<br />Sum: " + sumOfNumbers;
}

• plasmacel: This is so basic that you can easily find the solution on Google if you make minimal effort.

Answer 1

It's returning NaN because you are going outside of the bounds of the array and adding the value undefined to sumOfNumbers. The last element in an array is one less than its length, which means that your while loop condition should be counter < someNumbers.length rather than counter <= someNumbers.length. On the last iteration, you were accessing an undefined value, which caused the sum to become NaN when you added it.

In addition, an array's index is zero-based, which means that counter needs to start at 0 rather than 1 (you were skipping the first value in the array).

var someNumbers = [12, 67, 90, 34, 32, 67, 29, 74, 49, 22];
var sumOfNumbers = 0;
// Start at '0' rather than '1'
var counter = 0;
while (counter < someNumbers.length) {
 sumOfNumbers += someNumbers[counter];
 counter++;
}
console.log(sumOfNumbers); // 476

Answer 2

You just need to modify the counter to start from zero. Remember, Javascript is zero-based and the problem why you were getting NaN is because your last counter value was out of bounds:

const MAXIMUM_NUMBER = 10;
var someNumbers;
var sumOfNumbers;
var output;
var counter;
//assign 10 variables to the array
someNumbers = [12,67,90,34,32,67,29,74,49,22];
//assign variable to counter for the loop
counter = 0; // Changed this line
sumOfNumbers = 0;
while (counter < someNumbers.length) { // and this one
 sumOfNumbers += someNumbers[counter];
 counter++;
}
output = document.getElementById('outputPart1');
output.innerHTML = "Array: [" + someNumbers + "]<br />Sum: " + sumOfNumbers;

<div id="outputPart1"></div>

Answer 3

You are looping out of the bounds of the array. Use this condition:

counter < someNumbers.length

Additionally, array indexing in Javascript begins at zero, so counter should be initialized to zero, in order to sum the entire array.

Answer 4

just simple change to your code,

function exercise07Part1() {
 //declare variables
 const MAXIMUM_NUMBER = 10;
 var someNumbers;
 var sumOfNumbers;
 var output;
 var counter;
 //assign 10 variables to the array
 someNumbers = [12,67,90,34,32,67,29,74,49,22];
 //assign variable to counter for the loop
 counter = someNumbers.length; //start counting from tail
 sumOfNumbers = 0;
 while (counter) {
 sumOfNumbers += someNumbers[--counter]; 
 }
 output = document.getElementById('outputPart1');
 output.innerHTML = "Array: [" + someNumbers + "]<br />Sum: " + sumOfNumbers;
}

Answer 5

The array function .reduce() is built specifically for operations like this:

var someNumbers = [12,67,90,34,32,67,29,74,49,22];
var result = someNumbers.reduce(function(sum, item) {
 return sum += item;
}, 0);
// display results
document.getElementById("data").innerHTML = JSON.stringify(someNumbers);
document.getElementById("results").innerHTML = result;

Data: <span id="data"></span><br><br>
Sum: <span id="results"></span>

Reference info in .reduce() here.

---

If you want to use your own loop rather than a built-in loop, you can use a simple for loop:

var someNumbers = [12,67,90,34,32,67,29,74,49,22];
var result = 0;
for (var i = 0; i < someNumbers.length; i++) {
 result += someNumbers[i];
}
// display results
document.getElementById("data").innerHTML = JSON.stringify(someNumbers);
document.getElementById("results").innerHTML = result;

 Data: <span id="data"></span><br><br>
 Sum: <span id="results"></span>

---

If you want to use a while loop instead, you can do this:

var someNumbers = [12,67,90,34,32,67,29,74,49,22];
var result = 0, i = someNumbers.length;
while (--i >= 0) { 
 result += someNumbers[i];
}
// display results
document.getElementById("data").innerHTML = JSON.stringify(someNumbers);
document.getElementById("results").innerHTML = result;

Data: <span id="data"></span><br><br>
 Sum: <span id="results"></span>

• Saad: He said he wanted to do it by using a loop. The name of his function is exercise07Part1, so I'm guessing he's just learning and it would probably be a good idea to get familiar with iteration first.
• jfriend00: @saadq - This is a loop - it's just a built-in loop as it will call the callback N times. If the OP wants to show the verbatim assignment and present the question as a homework assignment with rigid rules, then they can do that and we can better follow that. But, it wasn't presented that way so I'm offering good programming advice for solving the actual problem presented which is part of the point of StackOverflow.
• Saad: Yeah, I understand that it's still a loop, but it might make things more difficult for someone who is new to the language. And the fact that it's still a loop is even more reason for someone to understand how to use a loop first.
• jfriend00: @saadq - I've offered three methods now in my answer. IMO, one should learn how to use the built-in array iterators right away as they are quick and save coding time and save the kind of mistakes the OP made. There's no reason to start out doing things the old way. There are plenty of reasons to use a plain for loop, but summing an array is not one of them.