Javascript debugging: I need some help understanding this behavior

[juliflorezg]

Hello guys! I'm currently doing the 'JavaScript algorithms and data-structures' course here on freeCodeCamp and I'm stuck with this lesson: '**Use Caution When Reinitializing Variables Inside a Loop**, the main thing I don't understand is the behavior of the push method used for pushing the row array to newArray and why it first pushes this array:

[0,0]

But the next time it pushes row again to newArray it pushes:

[0,0,0,0]

and it overwrite the first position that have been already pushed on the previous step, and it does the same thing the last time the push method is used, so newArray ends up like this:

[ [ 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0 ],
[ 0, 0, 0, 0, 0, 0 ] ]

whereas in my mind, newArray should end like this:

[ [ 0, 0],
[ 0, 0, 0, 0],
[ 0, 0, 0, 0, 0, 0 ] ]

I think the whole point is that I don't get why every time it pushes the row array with its current value but also changes the previous positions in the array.

Here's the code of the entire lesson:

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

Thank you for your time and help . :slightly_smiling_face:

[liyaquathhassan]

I found a solution to your problem.

function zeroArray(m, n) {

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 copy of current row**
    newArray.push([...row]);
}
return newArray;
}
let matrix = zeroArray(3, 2);
console.log(matrix);

I will try my best to explain the issue.

1. In the for (let j = 0; j < n; j++) loop you push two 0’s in the row array.
   Now row is [0, 0]
2. After the inner loop you push the row array (newArray.push(row);) inside newArray
   Note: this will create a reference to the row array inside newArray and modifying the row array will also modify the array inside newArray since it has created a reference.
   Now newArray is [[0,0]]
3. The inner loop will push two new 0’s in the row array.
   Now row is [0,0,0,0] and newArray is [[0,0,0,0]] (because we modified the row array)
4. You push the row array again in newArray
   now newArray is [[0,0,0,0], [0,0,0,0]]
5. Again the inner loop will push two new 0’s in the row array.
   Now row is [0,0,0,0,0,0] and newArray is [[0,0,0,0,0,0], [0,0,0,0,0,0]] (because we modified the row array)
6. You push the row array again in newArray
   now newArray is [0,0,0,0,0,0], [0,0,0,0,0,0], [0,0,0,0,0,0]]

To tackle this problem, you can use the spread operator to push a copy of the row array in newArray like this newArray.push([...row]);.

[silgarth]

While you might think you are pushing row into the newArray, you are actually pushing a reference (pointer to ) to row. So when you change row in the second pass through the loop, all the references to row see this changed value.
newArray is really (internally) [row, row, row] where row references (points to) the same array.
Using the spread operator newArray.push([...row]); will make a copy of row and pushes a reference to this new copy rather than the original row

[juliflorezg]

Thank you so much! I completely ignored the reference thing with arrays, your explanation really helped me understand this issue, now I can move forward.

[juliflorezg]

Yeah I ignored the reference thing with arrays and thought I was pushing the actual array lol, now I know better, thanks for your help with this one!!

[Diego_Perez]

Hi @juliflorezg,

Yeah I ignored the reference thing with arrays and thought I was pushing the actual array

For this kind of problems I think that python tutor[0][1] is a really good tool:

The above image is step 41, you can see the execution of the code step by step.

Cheers and happy coding

Notes:

[0] Python Tutor code visualizer: Visualize code in Python, JavaScript, C, C++, and Java

[1] Not the same exercise (the video is a demo of how to use python tutor):

Python tutor, freeCodeCamp Recursion Countdown, Example

[juliflorezg]

Wow I didn’t know about that tool (I haven’t touched python not even with a stick lol) thank you so much Diego!!