Use Caution When Reinitializing Variables Inside a Loop. Step instructions

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
    // Pushes the current row, which now has n zeroes in it, to the array
  return newArray;
let matrix = zeroArray(3, 2);

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:

1 Like

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

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:

You can see what your code does with this:

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


Neat tool, thanks for the link.

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

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

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


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

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

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.

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: