# 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 ?

``````
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);

``````

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`.

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.

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.

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

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 `row`s 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

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

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

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: https://developer.mozilla.org/

2 Likes