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

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

#1

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!


#2

Before I go further, do you remember array indexes?


#3

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


#4

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" );
  
  i++;
  
  console.log( "Increment index by 1. Now index is: " + i + "\n");
}

#5

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.


#6

"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.


#7

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!!!


#8

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.


#9

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.


#10

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


#11

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!


#12

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.

http://codepen.io/sue888/pen/vgrVyM (if it comes up in preview mode just click on Edit in Codepen)


#13

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?


#14

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


#15

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.
:thumbsup: