Use Caution When Reinitializing Variables Inside a Loop. Step instructions

JavaScript
1

Tell us what’s happening:
I am not able to understand what’s happening here, can somebody give me step by step details of this code ?

Your code so far


function zeroArray(m, n) {
  // Creates a 2-D array with m rows and n columns of zeroes
  let newArray = [];
  let row = [];    
  for (let i = 0; i < m; i++) {
    // Adds the m-th row into newArray

    for (let j = 0; j < n; j++) {
      // Pushes n zeroes into the current row to create the columns
      row.push(0);
    }
    // Pushes the current row, which now has n zeroes in it, to the array
    newArray.push(row);
  }
  return newArray;
}
let matrix = zeroArray(3, 2);
console.log(matrix);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop

1 Like
2

Here’s what I do when I get confused.

  • Grab a pencil and a piece of paper. Step away from the keyboard.
  • Start from the innermost loop, and work my way out.

In this case, you’ve got the name of the function itself, and the first line comment:

function zeroArray(m, n){
  // Creates a 2-D array with m rows and n columns of zeroes.
  ...

So you know each row of this multi-dimensional array will have the same number of columns, given as n in the parameters. So the deepest loop runs n times, pushing a zero onto the row array. Once it has run n times, then row should be an array that long, with [0,0,0,...0] going on.

Then, we break back into the outer loop. This takes that row variable, which now contains our array of n zero elements, and uses it to create a new row in the newArray variable. This loops through to create the rows. How many times? Go back to the opening comment, it should create m number of rows. Each row should look exactly the same.

Once that OUTER loop is done, we simply return the newArray.

It might help to create a test case in your mind. Suppose you wanted to use this to create a tic-tac-toe board. It’s common, and easy to understand. That should be a three-by-three array. We want to get something back that looks like this:

[
  [0, 0, 0], // <-- this is a 'row', made by the inner loop.
  [0, 0, 0], //      Each row is added to the newArray by the outer loop
  [0, 0, 0]
]

Now, there is a bug in this. if you add a console.log(row) just before it gets newArray.push(row), you’ll see that row is growing like crazy – it never gets cleared. Why not? Take a look at the title of your post. :wink:

1 Like
3

The row variable is outside loop. If now i enter parameter (m,n) as (2,2) :

inner loop will add 2 zeroes to row and push it to newArray. Again outer loop will get to work and
inner loop will again add 2 zeroes to row, which already consists 2 zeroes. row will have 4 zeroes and push it to newArray and newArray will have 2 + 4 = 6 zeroes. Now loops will no longer run. So when I finally console.log(newArray), I must get 6 zeroes but I am getting 8.
.
Hope you get my problem, 'cause way I have explained it, I doubt that. :smile:

4

You can see what your code does with this: http://pythontutor.com/javascript.html#mode=edit

you are pushing a reference to row inside the array, not a copy. So each row you have pushed will keep growing.

If you paste your code in the above tool and press “visualise execution” you will see it

3 Likes
5

Neat tool, thanks for the link.

6

Thanks ieahleen, That’s a great tool. But i am still having difficulty understanding that both arrays are having 4 zeroes

7

Umm can You explain it as row is placed outside for loop ?

8

When you do array.push(row)
You are not adding a copy of row to the array, but a reference (this is a characteristic of arrays), that means that whatever modification you do to row will be felt also by the rows in your array - from this the name of the challenge

If you look at your code being executed in the tutor you will see what happens at every step

2 Likes
9

Means reference of row in newArray will also update when original row variable is updated and only final value is then pushed to newArray ?

10

Yes
With zeroArray(2,2) happen this:

First iteration of outer loop,
Two zeros are pushed to row (row is [0, 0]
row is pushed to newArray (newArray is [row] or [[0, 0]])
Second iteration of outer loop
Other two zeros are pushed to row (row is [0, 0, 0, 0])
row is pushed to newArray (newArray is [row, row], as such it is also [[0, 0, 0, 0,], [0, 0, 0, 0]])

It is a characteristic of arrays. There are ways to push a copy of row instead of a reference to row to avoid this.

1 Like
11

Thats what I wanted to know. Thanks you so much.
Beginner without college degree you see, I don’t know where to read about these topics.

12

Well, I am studying chemistry, there is not much difference, other than the time spent on it, I am a few years on and off on this now

The tutor I linked above is useful
Other sources I studied on or still abitually use: FreeCodeCamp, Khan Academy
What the f*ck JavaScript? is also really interesting, this forum, You don’t know JavaScript (scroll down a bit for the free versions online), freecodecamp YouTube channel
And then the documentation: https://developer.mozilla.org/

2 Likes