Nesting For Loops freeCodeCamp

JavaScript
1

In the challenge “Nesting For Loops” in freeCodeCamp, I’m not sure how this piece of code does what the challenge says it does.

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

“This outputs each sub-element in arr one at a time. Note that for the inner loop, we are checking the .length of arr[i], since arr[i] is itself an array.”

I don’t understand because it look like this code would just output the 2nd number of the 2nd array then it would output the 3rd number of the 3rd array. Clearly I got something messed up here like how the loop system works.
Can someone please explain how this outputs every number and sub-array?

2

When I’m confused, I put in console.log statements and figure it out. Don’t know your original data, but this is an example:

var arr = [
  [ 'apple', 'bear', 'cat' ],
  [ 'dog', 'egg', 'frond' ],
  [ 'gourd', 'hasp', 'igloo' ]
];

for (var i=0; i < arr.length; i++) {
  console.log('\n\nouter loop, i=' + i);
  for (var j=0; j < arr[i].length; j++) {
    console.log('** inner loop, j=' + j);
    console.log('**** arr[' + i + '][' + j + ']=' + arr[i][j]);
  }
}

You can see a working pen here.

Output is:

outer loop, i=0
** inner loop, j=0
**** arr[0][0]=apple
** inner loop, j=1
**** arr[0][1]=bear
** inner loop, j=2
**** arr[0][2]=cat

outer loop, i=1
** inner loop, j=0
**** arr[1][0]=dog
** inner loop, j=1
**** arr[1][1]=egg
** inner loop, j=2
**** arr[1][2]=frond

outer loop, i=2
** inner loop, j=0
**** arr[2][0]=gourd
** inner loop, j=1
**** arr[2][1]=hasp
** inner loop, j=2
**** arr[2][2]=igloo
2 Likes
3

Hello Yurko -

One thing that might be helpful and instructive for you is to try the site PythonTutor - javascript editor and observe how those loops interact with each other.

The basic idea, though, is that if you have an array that contains another set of arrays as elements, you index through the top-level array with one index value, and that is used in the first set of square brackets. But then to reference the elements of the sub-arrays, you access those using arr[i] and that is how you determine the length of the sub-array, using arr[i].length, and in the inner for loop you are using arr[i] in conjunction with the variable j that is tracking the index of the sub-array, so if you have this example data:

var arr = [[10, 11, 12], [20, 21], [30, 31, 32]];

The outer for loop will start by generating the variable i with the value of 0, and the inner for loop will iterate through the values in the sub-array, so you get this addressing:

arr[0][0] // 10
arr[0][1] // 11
arr[0][2] // 12

then you have reached the end of the first sub array. The outer loop then takes over, i is incremented to 1, and you repeat the same sequence, using:
arr[1][0] // 20
arr[1][1] // 21

And finally the last iteration of the loop will access arr[2] in a similar way.

Try the pythontutor site - it could help you to visualize the process.

Regards,
Ken

2 Likes
4

Thanks but can remind me what \n means? I looked it up and it said new line but if that’s true then why would you put two of them at the beginning of a string?

5

Oh, so I didn’t realize the first loop ignored the var++. Thanks.

6

When you put a for loop in a for loop does the for loop inside the for loop continue until it’s done?

7

I just did that so the formatting in the console would look better - so there was space between the i loops. It works just fine without it, just that now all the lines are jumbled together.

8

I understand now was just asking about that.