Here is the function that we are using:
function addUp(numArray) {
var total = 0;
for (var i = 0; i < numArray.length; i++) {
total += numArray[i];
}
return total;
}
When the function is called with an array of [1, 5, 3, 9], the addUp function will be passed that array in the variable called numArray and the array will contain four values.
numArray[0] will be 1
numArray[1] will be 5
numArray[2] will be 3
numArray[3] will be 9
It is possible to not use a for loop, and to just return a total with:
return numArray[0] + numArray[1] + numArray[2] + numArray[3];
but doing that restricts it to being able to work only with arrays that have at least four items.
This is why we use the length of the array as a part of the loop, so that we can go from 0 up to the last item of the array.
Here’s how it works with the addUp function.
The for statement is made up of three parts: initial, condition, and the final expression.
[list][]The initial part is executed only once, before any of the looping in the for loop occurs.
[]The condition is checked before each loop, to check if the code inside of the for loop should be executed.
[*]The final expression is done at the end of each loop.[/list]
When the interpreter gets to the for statement, this is the value of the variables:
total: 0
i: undefined
The for loop runs the initial expression (var i = 0), which sets i to 0;
total: 0
i: 0
The for loop then checks if the condition is still true.
i < numArray.length
i is 0, and numArray.length is 4. 0 is less than 4, so the condition is true and the code in the for loop is executed.
total += numArray[i];
i equals 0, and the value at numArray[0] is 1, so 1 is added on to the total.
After executing the above line the total will be 0 + 1 which ends up being 1.
At the end of the for loop, the final expression is executed (i++), which increases the i value from 0 to 1
Now at the end of the loop, these are the values that we now have:
total: 1
i: 1
The for loop then checks if the condition is still true.
i < numArray.length
i is now 1, and numArray.length is 4. 1 is less than 4, so the condition is true and the code in the for loop is executed.
total += numArray[i];
i equals 1, and the value at numArray[1] is 5, so 5 is added on to the total.
After executing the above line the total will be 1 + 5 which ends up being 6.
At the end of the for loop, the final expression is executed (i++), which increases the i value from 1 to 2
Now at the end of the loop, these are the values that we now have:
total: 6
i: 2
The for loop then checks if the condition is still true.
i < numArray.length
i is 2, and numArray.length is 4. 2 is less than 4, so the condition is true and the code in the for loop is executed.
total += numArray[i];
i equals 2, and the value at numArray[2] is 3, so 3 is added on to the total.
After executing the above line the total will be 6 + 3 which ends up being 9.
At the end of the for loop, the final expression is executed (i++), which increases the i value from 2 to 3
Now at the end of the loop, these are the values that we now have:
total: 9
i: 3
The for loop then checks if the condition is still true.
i < numArray.length
i is 3, and numArray.length is 4. 3 is less than 4, so the condition is true and the code in the for loop is executed.
total += numArray[i];
i equals 3, and the value at numArray[3] is 9, so 9 is added on to the total.
After executing the above line the total will be 9 + 9 which ends up being 18.
At the end of the for loop, the final expression is executed (i++), which increases the i value from 3 to 4
Now at the end of the loop, these are the values that we now have:
total: 18
i: 4
The for loop then checks if the condition is still true.
i < numArray.length
i is 4, and numArray.length is 4. 4 is not less than 4, so the condition is false.
The for loop is now finished, and execution carries on from the statement that comes after the for loop.
In this case, that is to return the value in the total variable, which is 18.