Need help understanding - Nesting For Loops

Hi All!

So I have been doing a bit of web design for a few years, so I honestly whipped through the HTML & CSS, but now I’m in JS and per usual I’m stuck on loops!

I just completed the Nesting for Loops challenge, but I honestly don’t understand how I got it nor how it works.

I was referred to a visual guide and here it is… https://goo.gl/LclMEP

This really just doesn’t make sense how the value of product jumps up. Especially on steps 20 to 21. It goes from 6 to 24 while i and j are values of 1 :confused:

Further I still don’t know if I fully understand the line for ( var j = 0; j < arr[i].length; j++ )

Any insight or help would be greatly appreciated! I don’t feel like I can move onto the next lesson until I fully grasp this as it all builds off of the previous lessons.

Thanks,
Seth

1 Like

The arr array refers to this array:

[
  [1, 2],
  [3, 4],
  [5, 6, 7]
]

When i equals 1, arr[i] refers to the inner array [3, 4]. You can trace it in the diagram. arr points to this array with three blocks. From there the block with the index of 1 (this is i) points to the array that contains the numbers 3 and 4.

When j also equals 1, arr[i][j] refers to the number 4. In the diagram, the block with the index 1 in array [3, 4] contains the number 4.

So arr[i][j] when i and j are both 1 is just the number 4. You multiply this 4 to the number in product (the number 6), so now you have 24.

Related thread:

2 Likes

Thanks for the follow up! One final question, why are we adding .length to the 2nd loop? Aren’t we trying to find the numbers within the array, not the length of the array itself?

I think once I can wrap my head around the j < arr[i].length I’ll be good :smiley:

that’s the length of the the nested array we’re looping through. We are looping into the nested arrays the same way we loop into the external one.

for example in this array:
[
[1, 2],
[3, 4],
[5, 6, 7]
]

arr[1].length is equal to 2, because we have 2 elements inside of the [3, 4] array, which is the one at index [1] of the most external array.
We need the value of the length of each array we’re looping through in order to properly loop into them as we do for the outermost ones.

1 Like

The first loop is to go through the main array.

var arr = [ [1, 2], [3, 4], [5, 6, 7] ]; // this is an array containing sub arrays

To go through the arrays IN the main array, you need to loop through each loop of the main. Essentially, you’ll want to loop through each array.

(i = 0; i < arr.length; i++){
(j = 0; j < arr.length[i]; j++){
}
};

‘i’ is looping through the main array while ‘j’ is looping through the sub arrays (separate arrays in an array). ‘i’ will give you the sub arrays themselves, while ‘j’ will give you the values in each sub array. I like to think of it kinda like the movie Inception. You must go one layer deeper!

Essentially, arr[i] is referencing the sub arrays within the main array arr. Each time i is a new point in the main array, it’ll pull up a new sub array. arr[i].length is the length of the referenced sub array. arr[i][j] will be a value in that sub array. In the loop, it’ll be each value in each sub array (arr[i]) within the main array (arr).

PS: I prefer the term “sub array” instead of “nested array”. It’s less to type out, and it makes more sense to me. They are the same, though! :stuck_out_tongue:

3 Likes

Ah that makes sense, thanks!

So then how are we putting in the values in the last line product *= [i][j]?

If it is only looking at the length of the array and sub array how is it actually pulling out each of the values within the sub array?

[i] makes sense to me I think because it’ll be either 0,1,2, but when we get to [j] how does it know what each of the values are? Is it loading those values in the sub arrays into j? I thought j was only a value to iterate through the array, not a variable that will store the values in the sub array?

Sorry if I’m drilling down into this too much, I just want to make sure I know exactly what is going on. :smiley:

The values that are defined in the first statement of the for loop i.e. j or i in this case, are variables like any others, and if the scope allows it we can access them freely.
So imagine the values of i and j are 0 and 1 respectively at the current round of the loop
[
[1, 2],
[3, 4],
[5, 6, 7]
]
we are then looking at the second item of the first nested array: 2.

1 Like

Oh! I think a light bulb went off!

So the way that we are targeting these values is kind of like in the lesson Accessing Nested Arrays?

    ourPets[0].names[1]; // "Fluffy"
    ourPets[1].names[0]; // "Spot"

Exactly! You are using the For loops to access the nested arrays dynamically. :smiley:

Huzzah! Finally! Thanks for the help brocchini and to all the others that posted in my thread!!

1 Like

this thread helped me a little. I still don’t feel 100% confident but the explanation that i is the big array and j is counting the nested arrays helps me to grasp this concept.