Https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop

Https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop
0

I was working through the debugging section of the javascript course and managed to get through the challenges just fine. However, I couldn’t wrap my mind around why the push() function was giving the (intentionally) erroneous output that the challenge was presenting.
I have pasted the code below with an additional console.log() statement to track how the push statements are updating newArray:

//beginning of example 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);
      console.log(newArray); // checking number of zeroes in each pass of for loop
    }
    return newArray;
  }

  let matrix = zeroArray(3, 2);
  console.log(matrix);
// end of example code

I would expect the final output of the matrix variable to be:
[ [0,0] , [0,0,0,0] , [0,0,0,0,0,0] ]

rather than the actual output of:
[ [0,0,0,0,0,0] , [0,0,0,0,0,0] , [0,0,0,0,0,0] ]

Why does the push statement update the previous element(s) of newArray on the second and third passes of the outer for loop?

EDIT: I’m not sure why the forum is putting only the inner for loop into a block and I’m not sure how to correct this. Thank you in advance for your patience as this is my first post on this forum.

This is tricky. When newArray.push(row); is executed, it doesn’t insert to the newArray just values from the “current” row list, but the reference to the object itself. Since lists are mutable, and row list isn’t reinitialized in the outer loop, every time row.push(0) is executed in the inner loop the newArray also gets changed as it has row objects “inside”.

The behavior you expect would happen if only copy of the row would be pushed to array, i.e. like:
newArray.push([...row]);

1 Like

Thank you for your reply! That makes a lot more sense now. If i am understanding what you’re saying correctly, the newArray.push(row); command pushes a reference or pointer to the row object so anytime row gets updated with new values, the references are likewise updated.

To be exact the list is updated, to which all references are pointing. You can paste the code on
http://pythontutor.com/javascript.html#mode=edit and then visualize execution, it should make things even more clear.

1 Like

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

1 Like

Awesome! Thank you for improving my post and thank you for the advice.

This is a very neat tool. I will have to play around with it. Thank you for all your help!