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;
}

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>