What do i and j actually represent? - Basic JavaScript - Nesting For Loops

JavaScript
1

Tell us what’s happening:

Hey all! New to JavaScript, I’ve got the solution for this, but I don’t understand what’s actually happening in the loop. I’m going to try my best to explain what I think is happening, and I hope that someone can figure out where my logic went wrong.

From my understanding,

i represents the placement inside the array, which starts at a 0-count.

so the outside for loop will continue until i === 3 (the length of the outside array)

during this, j represents the placement inside of the nested array

which will stop the second for loop when j === (the length of the array (in the position of i??? I think this number is 3? but I don’t quite understand that)

then somehow the product (which I know I can write it product *= arr[i][j]) is multiplied by the array outside and inside??

what I don’t understand is if i has a value that is determined inside the loop, how is it also equivalent to the value that is in that position?

and if this code were to stay, wouldn’t j be limited to the number of elements inside the first array?

for example, the array [[1, 2, 3, 4], [5, 6], [7, 8]] wouldn’t work because the length of arr[1] would be 3, but there are 4 values inside the first nested array?

Can someone break down what is actually happening in each loop for me? I’m struggling to comprehend this, and I feel like I’m going to have trouble with concepts further on if I don’t have this foundational understanding.

Thank you so much for your time and your energy in advanced!

The Solution

function multiplyAll(arr) {
  let product = 1;
  // Only change code below this line
for (let i = 0; i < arr.length; i++) {
  for (let j = 0; j < arr[i].length; j++) {
    product = product * arr[i][j]
    console.log(product)
  }
}
  // Only change code above this line
  return product;
}

multiplyAll([[1, 2], [3, 4], [5, 6, 7]]);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/113.0

Challenge: Basic JavaScript - Nesting For Loops

Link to the challenge:

2

Let’s look at your example:

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

This is an array that has three items in it (I’ll refer to this as the “main” array). Each of those items also happens to be an array (I’ll refer to each of them as “subarrays”). Let’s pretend you just want to print out each subarray in the main array. Your for loop would look like:

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

You will see the following in the console:

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

The key here to remember is that arr[i] holds the current subarray.

But what if you want to do something with each of those values in the subarrays, such as multiply them? Then you need to access each value in each subarray. How do you do this? The same way you access each subarray in the main array. You go through the subarray one item at a time using a for loop.

for (let i = 0; i < arr.length; i++) {
  const subArray = arr[i];
  for (let j = 0; j < subArray.length; j++) {
    product = product * subArray[j]
  }
}

Notice I have added an extra variable (subArray) to make it clearer what is going on. But it is doing the exact same thing as your original code. The outer for loop snags each subarray and then the inner for loop goes through that subarray one item at a time and multiplies it to the running product. But this is such a common pattern that most people leave out the extra variable and just access each item in the inner for loop with arr[i][j].

I hope it is clear now that j is counting the elements in each subarray and has nothing to do with the number of elements in the main array.

3

Thank you for taking the time to write this out for me, I really appreciate your help!

Please correct me if I’m wrong, but it sounds like you’re saying that:

i and j are not just giving us what place the value is in, but also pulling the value itself to be used?

arr[i].length would be the number of elements that are within ALL of the sub arrays of the main array, which is why the variable subArray for the inner loop is able to access all of the values within it?

when we use arr[i][j] to multiply the product, we’re essentially using subArray[j] because it’s indexing the values attributed to j which are inside of i which is representative of the values from inside of the main array?

4

i and j are just counters. They are being used to keep track of which element we are currently accessing in the array. You are pulling the value from the array by using bracket notation on the array:

arr[i] // get the i'th item in arr

arr[i][j] // get the j'th item in the subarray arr[i]

arr[i].length is the length for that particular sub array stored in arr[i]. Each sub array can have a different number of items in it. Thus, arr[i].length may be different for each value of i.

5

I think that my main problem was not understanding the brackets and what they do, thank you so much for your explanation. I saw ‘counters’ on another site while I was trying to research my own answer, but I don’t think that it was properly defined in my brain until now.

I hope you have a wonderful day and happy coding!

1 Like
6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.