Javascript - Nested Array explanation

I was watching the video Learn Javascript - Full Course and I was confused. I didn’t know how the code worked so that it came up with the answer. I was wondering if someone could explain this to me, so I can better understand how the nested array worked with the multiplication. If you could explain it to me, I’d greatly appreciate it.

Hi there,

do you have a specific question?

In the outer for loop, you take the first array [1, 2].
You then go into the inner for loop and multiply the current product with, 1, then with 2.
Then the inner loop is done and you go back to the outer loop again and take the same steps with the next array [3, 4]. And so on.

You first have to understand that [ [1, 2], [3, 4], [5, 6, 7] ] is a two-dimensional array. It just means you have an array (let’s call it the outer array) represented by the outer [ and ] that contains 3 one-dimensional arrays (let’s call these inner arrays).

I can rewrite the for loops as below

for (var outerIndex = 0; outerIndex < arr.length; outerIndex++) {
  for (var innerIndex = 0; innerIndex < arr[outerIndex].length; innerIndex++) {
    product *= arr[outerIndex][innerIndex];
  }
}

and then it is easier to see that the outer for loop is iterating through the elements of the outer array. These elements are the sub-arrays. The inner for loop is iterating through the elements of each sub-array.

Another way to understand how the above code is creating the product, is to add console.log statements within the for loops and then run the code:

var arr = [ [1, 2], [3, 4], [5, 6] ];
var product = 1;
for (var outerIndex = 0; outerIndex < arr.length; outerIndex++) {
  console.log('outerIndex = ' + outerIndex + ' | arr[' + outerIndex + '] = ' + JSON.stringify(arr[outerIndex]));
  for (var innerIndex = 0; innerIndex < arr[outerIndex].length; innerIndex++) {
    console.log('  innerIndex = ' + innerIndex + ' | arr[' + outerIndex + '][' + innerIndex + '] = ' + JSON.stringify(arr[outerIndex][innerIndex]));
    product *= arr[outerIndex][innerIndex];
  }
  console.log();
}

console.log(product); // 720

The result of the above code can be seen below:

The answer on the video shows 5040. I’m just confused because they’re so many things in the loop to go through. I’m probably making it a bigger issue than it’s supposed to be. I’m trying to figure out how its multiplying the numbers. That is what is confusing me. I was curious if the I variable is being multiplied by the 1 then 2 and so on until the numbers in each variable are done, or if it is 1 times 2, then 3 times 4 and then 5 times 6. Could it be that the I variable is multiplied by the first number in the nested array, and then with each time a +1 is added it goes to the next? That’s what is confusing me at the moment.

I was missing the 7 in the 3rd inner array. I have corrected the repl.

The *= operator is how it is multiplying the numbers. The variable i is not being multiplied by anything. The variable i represents the index of each sub-array and the variable j represents the index of each element contained in a sub-array. If you look at the repl.it link above, you will see this.

Okay, I’m going to read and reread what you replied earlier Randell. Thanks so much for rewriting in a way that’s easier to understand. If I’m still having problems I’ll reply again.

Think of this in this way:
The arrays inside the main array are rows and there are multiple elements in each row which are the columns. So if you console.log(arr[0][1]) // 2
or console.log(arr[1],[2]) //4
or console.log(arr[2][1]) // 6

and so on.

The loop can be written as it can be seen below:
loop