Confused with Iterate Through an Array with a For Loop

1

var myArr = [ 2, 3, 4, 5, 6];
var total = 0;

for (var i = 0; i < myArr.length; i++)

{

total += myArr [i];

}

I have been staring at this for ages and I just cant seem to grasp what is happening with it. Could somebody break it down into small pieces so I know what is happening in each stage of the code?

4 Likes
2

First myArr and total are declared. Then the for loop starts. First i = 0, this is smaller than myArr.length (which is 5) so it will run the code inside the brackets: total += myArr[i] with i = 0, so: total += myArr[0] and myArr[0] = 2: total += 2. So now 2 is added to the total variable which is now 2 (0+2). Now i is incremented by 1 and becomes 1. Since this is smaller than myArr.length it will run the code between the brackets. Again it will add myArr[i], which is: myArr[1] which is: 3 to total variable. total is now 5 (2+3). These steps continue till myArr[4] has been added. Then i will become 5 and will no longer satisfy the condition (i < myArr.length).

Hope this helps.

9 Likes
3

Ok, so here we start with a variable called myArr, which holds an array of Number values: var myArr = [2, 3, 4, 5, 6];.

The next variable is a number, holding a Number value of zero: var total = 0;

In the for loop, we declare an index counter var i = 0 on initialization of the loop, a condition during which to execute the logic inside the loop (i < myArr.length), and final expression to call at the end of each iteration through the loop (i++).

Each time the loop runs, which is once for each entry in the array myArr, we are going to update the total by adding the value that is in the array at the index i. Recall that total += myArr[i] is shorthand for total = total + myArr[i].

So the loop will initialize an index counter, run until the index counter is equal to the length of myArr, and at the end of each iteration, the index counter will be incremented by one. Thus for each iteration of the loop, myArr[i] is equal to the value in the array at the index i. In the first iteration, myArr[i] == myArr[0] == 2. With each loop, this value is added to the total variable, giving you the total of all values in the array.

I hope that wasn’t too confusing! Best of luck!

9 Likes
4

thank you both very much for taking the time to explain it. I will digest this properly before moving on.

1 Like
5

yep, makes perfect sense now. Thanks again!

2 Likes
6

so sorry for this question because it sounds silly as i type it… but i cant grasp it…

First myArr and total are declared. Then the for loop starts. First i = 0, this is smaller than myArr.length (which is 5) so it will run the code inside the brackets: total += myArr[i] with i = 0, so: total += myArr[0] and myArr[0] = 2: total += 2.

Where does the 2 come from? Why are we adding 2? Is the 2 from the first number in the array?

1 Like
7

myArr = [2, 3, 4 ,5, 6] This is an array with 5 elements.

myArr [0] is referencing the first element in the array. The first element is 2. So myArr[0] is 2. Arrays start counting from 0.

myArr[0] = 2
myArr[1] = 3
myArr[2] = 4
myArr[3] = 5
myArr[4] = 6

3 Likes
8

i made my own post (which you are helping me on) after i figured this out… im just trying to understand the language and reasoning behind everything now… still over on the other post staring at your answers

9

Thanks so much that cleared that up a lot and I am glad I was able to understand before moving on.
I do have another question about what it says in the lesson

“Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our condition for this loop is i < arr.length, which stops when i is at length - 1.”

I’m having a hard time figuring out what they are talking about with the -1.
I thought that zero based numbering just meant that the array count starts with 0 and goes up from there 0,1,2,3,4 So where does the -1 come in?
Can someone please explain this part too?

1 Like
10

I still don’t understand why does this code ends up with “total = 5” in the console? How can I make it total = 20?

11

Pardon, my code was different. Mine has “total <= myArr.length” instead of " i < myArr.length". Pardon.

12

It’s just a regular for loop which iterates over myArr step by step until it reaches the last index.
You can a lot about for loops on the web and it’s not that complicated.
Just learn how to use it correctly and you will be okay and cause yourself with errors. If you are having problems dealing with those you can try using an application to help you solve errors. I know one called checkmarx, pretty good.
Good luck!
Michael.

13

arr.length === 5 (arr has 5 elements), but the last index is [4] because the numbering starts at 0. The reason the code stops iterating before i === 5 is because the condition to continue is i < arr.length, not i <= arr.length. Because the increment is in steps of 1 (i++), the last value of i is 4, i.e. the last index of the array.

1 Like
14

Thank you so much. I was able to pass the challenge but had no idea what the function of that code was, this made things clear.

1 Like
15

This is incredibly helpful. The wording in the lesson is rather difficult but this is far more palatable.

16

I’m not understanding or seeing something somewhere.
My Code;
Result; NaN.

// Only change code below this line
var myArr = [ 2, 3, 4, 5, 6, 7, 8, ];
var total = 0;

for (var i = 0; i < myArr.length; i++);
{
total += myArr [i];
}

I removed the “;”

var myArr = [ 2, 3, 4, 5, 6 ];
var total = 0;

for (var i = 0; i < myArr.length; i++) <--------------- from here.
{
total += myArr [i];
}

Durrr!!!

1 Like
17

Setting up some variables
(things that will be reusable)
var myArr = [ 2, 3, 4, 5, 6];
The total variable is being initialized as a global variable
(its sticking around till the end)
var total = 0;

This next bit is the function which produces your output.

  1. var i=0 --> random variable(this could be literally anything) like the total variable
  2. i < myArr.length --> lets the function know once all of the numbers inside of the myArr array are used.
  3. i++ --> the eventual count of all the numbers within the myArr array.
  4. total += myArr [i]; --> total is back( told you it would stick around till the end) and this time it’s asking the myArr array for all them i digits it’s holding. += simply means that total won’t stop until all of the is are collected.
  5. total walks away with the myArr array digits
    (In the end myArr == total)
for (var i = 0; i &lt; myArr.length; i++) {
  total += myArr [i];
}
18

I created a tutorial video about looping in Javascript if you are still looking for additional resources to understand looping:

2 Likes
19

I managed to complete this task but I have no idea what it was I was writing and I can’t get my head around the workings of this. I can’t even follow the explanations above for some reason!

I don’t want to just move on to the next challenge not knowing what I have just written and why.

If someone could have another stab at explaining this in simple terms for me, I would be ever so grateful :persevere:

20

Ok I get it. With the help of YouTube :see_no_evil: