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!
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");
}
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.
"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.
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.
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.
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.
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?
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.
(and here’s more characters to reach the 20 character minimum)