Iterate though an array with a for loop - I'm not understanding this

So on this topic, I got the answer correct, but I still don’t really understand it. Could anybody walk me through this? Here is the example used in the problem.

var ourArr = [ 9, 10, 11, 12];
var ourTotal = 0;

for (var i = 0; i < ourArr.length; i++) {
ourTotal += ourArr[i];

Okay. So let me describe what I understand vs what I don’t.

ourArr is declared as an array. I get that.
ourTotal is declared and set at 0. I got it.
var i = 0 I sort of get this. i is whatever number is up in the loop. I think it starts at zero because that is the position in the array that should begin? So in this case, 0 means that 9 will start the loop.
i < ourArr.length; I think this means that as long as i is not outside of the numbers given (9-12) then the loop will keep going.
i++ This means that i will be increased by 1 each loop. I don’t get this. So, 9 goes through the loop and becomes 10, 10 goes through and becomes 11, and so on. I don’t really understand.
ourTotal += ourArr[i]; I understand that this means ourTotal = ourTotal + ourArr[i]. What I don’t understand is what all of that actually means.

I am so sorry for typing this novel. I just feel like I can’t understand this. Any help would be so appreciated! Thank you so much!

1 Like

Before I go further, do you remember array indexes?

Yes. For example, I’m understanding that i=0 is referring to the first number in the array, is that right.

You may want to convert a for loop to a while loop until you grasp for loops. For loops are just more compact. While loops are easier to comprehend as a beginner. Test little snippets of your code when you’re unsure about something.You can test your code in the browser console or here;
You can pull up the console in chrome browser by pressing F12.

var ourArr = [9,10,11, 12]; // ourArr variable is declared. Then it is assigned [9,10, 11, 12] array.
var ourTotal = 0; // ourTotal is declared and set at 0. Correct!
var i = 0 // variable is declared and assigned the value of 0. You start at 0 because you want to add every value in ourArr. The variable i keeps track of the index you are at in the array. Accessing the array at a particular index returns a value.
ourArr.length // <-- this is the length of your array.

| 0 | 1 | 2 | 3 | index of array index stops at three
-------------------- |
| 9 | 10 | 11 | 12 | values in array

( i < ourArr.length ) // A conditional statement similar to an if statement conditional
if( i < ourArr.length ) {
// some code

i++ is same as i = i + 1;
ourTotal += ourArr[i]; // Accessing ourArr at index i and adding the value at that index to ourTotal

// copy this code and test it. Spend a few minutes to try and guess what console.log() should print.
var ourArr = [9, 10, 11, 12];
var ourTotal = 0;
var i = 0; 

console.log( "Value of ourArr at index 0: " + ourArr[0] + "\n" ); // access array at index 0
console.log( "Value of ourArr at index 1: " + ourArr[1] + "\n" ); // access array at index 1
console.log( "Value of ourArr at index 2: " + ourArr[2] + "\n"); // access array at index 2
console.log( "Value of ourArr at index 3: " + ourArr[3] + "\n"); // access arr at index 3

console.log( "Length of array: " + ourArr.length );

while( i < ourArr.length ) {  // conditional statement
  console.log( "Current index: " + i + ", Current value at index " + i + ": " + ourArr[i] + "\n");
  console.log( "ourTotal: " + ourTotal + " before adding value of ourArr at index: " + i + "\n");
  ourTotal += ourArr[i];
  console.log( "ourTotal: " + ourTotal + ", " + "after adding value of ourArr at index: " + i + "\n" );
  console.log( "Increment index by 1. Now index is: " + i + "\n");
1 Like

I wonder if you’ve met the same kind of mental block that I get when it comes to the for loop.

For me i < array.length is counter-intuitive, because I think the loop should run until the index (i) has exceeded the array length. So my brain really wants it to be i > array.length.

So I need to remind myself the logic isn’t ‘run until this condition is met’ it’s ‘run while this condition is true’.

Which confuses me as well, because I think - shouldn’t it loop until i is equal to the array length and then stop - so shouldn’t it be i <= array.length?

Well no, because the array is zero-indexed, so the length of the array, which is 3 in this case, is greater than the last index. (i.e.the three elements in an array are going to have an index of 0, 1 and 2 - but the length will be 3 ). If you reach index 3, you will have exceeded the length of the array… even though the array has a length of 3.

Anyway, hope I haven’t muddied the issue further.


"Which confuses me as well, because I think - shouldn’t it loop until i is equal to the array length and then stop - so shouldn’t it be i <= array.length?"
This is correct. In the for loop the variable i is incremented by 1 after your code runs between the braces. So the last conditional check is ( 4 < array.length ).

for( var i = 0; i < array.length; i++ ) {
  //1. your code runs

  // 2.  i++ happens here
  // 3.  then conditional check
  // start back at 1.

You can see where variable i is incremented in a while loop. In the for loop the increment is not visible in the flow of the code. So it’s confusing at first.

1 Like

I can’t thank you enough for taking the time to explain this out for me. This is very helpful. I have read over this several times and it is helpful!

The only thing I still don’t understand is this part:
ourTotal+= ourArr[i]

Okay. So this means ourTotal=ourTotal + ourArr[i]

So this seems counterintuitive. If our total is 42, then 42=42+ourArr[i]. So the total is not 42? The total is 42+each index point in the array? I just don’t understand that part. I’m sure it’s very simple and I’m just over-thinking it.

Thank you again so much for taking the time to help me. I appreciate it!!!

When the code runs, ourTotal is initialized with the value 0. After the first pass, it is 0+9, after the second pass it’s 0+9+10, after the third: 0+9+10+11, then 0+9+10+11+12, i.e. 42. Every array element is added to ourTotal individually.
EDIT: You might want to add the line console.log( "ourTotal: " + ourTotal ); inside the loop and look in your browser console.

1 Like

The thing to remember is that in programming = in most languages doesn’t mean mathematical equivalent. It means set the variable to mean the stuff to the right.

Usually the only mathematical equivalent is a conditional statement == and === in JavaScript. This means does the left equal the right.

1 Like

This is very helpful. I really needed to be walked through that just he way you said it! Thank you so much!

1 Like

I needed to hear this. That’s why I think I’m not getting this easily. I keep thinking of it as a math problem. Thank you!

I put together a quick pen to show what I mean - click on the button and it’ll loop over an array with three elements [“jane”, “jack”, “john”]. (I rely on alerts to show me what’s happening within the code - though I’m sure there’s a better debugging approach out there.)

Note that the loop will stop when the index hits 3, since it’s now equal to the length of the array - 3 - and no longer less than 3 - so the condition is false. This is different from what Reggie01 said - because a loop over an array with three values using the condition (i=0; i < array.length; i++) is not going to reach index 4. I don’t mean to be pedantic - but it’s a good point to get down, because this approach is used in many different coding languages. (if it comes up in preview mode just click on Edit in Codepen)


Thanks for making that and sharing! That is interesting. I was puzzled over that because it seemed like the index should be <= the array length.

So you’re saying it the array length can be. [1,2,3] and the index will be 0,1,2, therefore it is three values but still “less than” three. Is that right?


Bingo!! :slight_smile: (and here’s more characters to reach the 20 character minimum)


I had a hundred million queries regarding this challenge…
And this post solved it!!!
I read the answer wiki, only to find out that its just a copy-paste from the challenge.
So guys, thanks a lot for the question and the detailed answers.