# Thread: Help with understanding a Javascript for loop

1. ## Help with understanding a Javascript for loop

Hi all, I'm going through this book called "Head First HTML5 Programming" and it is teaching a lot of javascript in the first few chapters in order to understand the javascript APIs you can use with HTML5. The book doesn't seem to have it's own forum so thought I'd just post my question here if that's ok. Here's the code I'm having a hard time understanding:

Code:
```function addUp(numArray) {
var total = 0;
for (var i = 0; i < numArray.length; i++) {
total += numArray[i];
}
}

var theTotal = addUp([1, 5, 3, 9]);```
So then the question in the exercise is what is the value of theTotal? I couldn't figure out what it was so I looked up the answer and found it to be 18. So I see that the numArray was added up right? 1 + 5 + 3 + 9 = 18
But I'd like to understand why? I understand up to the point of the line that says:

Code:
`total += numArray[i];`
That's what's throwing me off. So if I understand right...the for loop will loop as long as it's less than 4 because numArray.length is the amount of the items in the array which is 4 right incrementing by 1 each time from 0 up? But I don't understand that total line.

2. I'm really not that great with Javascript (in fact, I'm actually pretty bad/basic), but I think I know what it does. (Confident in this post, yet? )

Right.

I'll just break down the entire line of code.

So first the author is defining the function 'addUp'. A practical name, to be sure. I hope you understand what I mean when I say that the 'input' for the function is the variable numArray (which seems to be an array that he/she's already defined.

In the function, the author wants the following to occur:

1. The browser to define the variable total for a value of 0.

2. To run the for loop such that:
a. variable i is defined for 0 (the first number in the array - tricky, isn't it?)
b. that it continue while i is less than the length of the numArray array (which, in this case, is 4).
c. if it is less, then the browser should add 1 to i after it's done.

3. Every time the for loop runs, the following should happen:
a. the variable total (right now, it's 0) should be added to the current value in the array. If you want to think of it in a different way, think of it as, "Add the value of the array 'numArray' to the existing total".

4. Finally, after the for loop completes, the function addUp will return the variable 'total'

The author then defines the Total as the returned value (the variable 'total') of the function addUp for values 1, 5, 3, and 9 of the array numArray.

Hope I helped.
~TehYoyo

3. Originally Posted by TehYoyo
I'm really not that great with Javascript (in fact, I'm actually pretty bad/basic), but I think I know what it does. (Confident in this post, yet? )

Right.

I'll just break down the entire line of code.

So first the author is defining the function 'addUp'. A practical name, to be sure. I hope you understand what I mean when I say that the 'input' for the function is the variable numArray (which seems to be an array that he/she's already defined.

In the function, the author wants the following to occur:

1. The browser to define the variable total for a value of 0.

2. To run the for loop such that:
a. variable i is defined for 0 (the first number in the array - tricky, isn't it?)
b. that it continue while i is less than the length of the numArray array (which, in this case, is 4).
c. if it is less, then the browser should add 1 to i after it's done.

3. Every time the for loop runs, the following should happen:
a. the variable total (right now, it's 0) should be added to the current value in the array. If you want to think of it in a different way, think of it as, "Add the value of the array 'numArray' to the existing total".

4. Finally, after the for loop completes, the function addUp will return the variable 'total'

The author then defines the Total as the returned value (the variable 'total') of the function addUp for values 1, 5, 3, and 9 of the array numArray.

Hope I helped.
~TehYoyo
Thank TehYoyo for answering. This is somewhat helpful but I still don't see what the loop has to do with 1 + 5 + 3 + 9 = 18. If all we're doing is adding the numArray up then what's the point of the loop? I just don't know why I can't get this. These loop things just confuse me.

4. Originally Posted by capescafe
Thank TehYoyo for answering. This is somewhat helpful but I still don't see what the loop has to do with 1 + 5 + 3 + 9 = 18. If all we're doing is adding the numArray up then what's the point of the loop? I just don't know why I can't get this. These loop things just confuse me.
The purpose of the loops is to keep adding numbers until you finish all of your addition. Keep in mind that, as it's a textbook, it might not use the most efficient way of doing things, it might use things just to show how it's done.

A better example of where a for loop would be necessary is if you're using a timer to display instructions (like a contest - option1, 'the contest is still going!', option 2 - 'sorry! the contest is over!', but even then you could use an if...else statement.

~TehYoyo

5. Originally Posted by TehYoyo
The purpose of the loops is to keep adding numbers until you finish all of your addition. Keep in mind that, as it's a textbook, it might not use the most efficient way of doing things, it might use things just to show how it's done.

A better example of where a for loop would be necessary is if you're using a timer to display instructions (like a contest - option1, 'the contest is still going!', option 2 - 'sorry! the contest is over!', but even then you could use an if...else statement.

~TehYoyo
Ok...would it be possible to show me what the math is doing each time the loop runs through? Maybe that would help me see it better. I've understood other loops that were shown but I'm not sure why I just do see what's happening here.

6. Originally Posted by capescafe
Ok...would it be possible to show me what the math is doing each time the loop runs through? Maybe that would help me see it better. I've understood other loops that were shown but I'm not sure why I just do see what's happening here.
You can add a console.log to view what is going on in your browser/Firebug's debugger:
Code:
```total += numArray[i];
console.log(total);```

7. Originally Posted by capescafe
Ok...would it be possible to show me what the math is doing each time the loop runs through? Maybe that would help me see it better. I've understood other loops that were shown but I'm not sure why I just do see what's happening here.
Here is the function that we are using:

Code javascript:
```function addUp(numArray) {
var total = 0;
for (var i = 0; i < numArray.length; i++) {
total += numArray[i];
}
}```

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:

Code javascript:
`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.
• 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.

When the interpreter gets to the for statement, this is the value of the variables:

Code:
```total: 0
i: undefined```
The for loop runs the initial expression (var i = 0), which sets i to 0;

Code:
```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.

Code:
`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:

Code:
```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.

Code:
`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:

Code:
```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.

Code:
`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:

Code:
```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.

Code:
`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:

Code:
```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.

8. Originally Posted by capescafe
I understand up to the point of the line that says:

Code:
`total += numArray[i];`
Doesn't your book list JavaScript operators? https://developer.mozilla.org/en/Cor...ment_operators

9. Originally Posted by Logic Ali
Doesn't your book list JavaScript operators? https://developer.mozilla.org/en/Cor...ment_operators