How does this nested loop get to this output?-CodePudding

I have struggled to understand the output of this nested loop for a long time. I really want to understand what it does.

I would expect it to output: [ [ 0, 0 ], [ 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0 ] ]

But the actual output is: [ [ 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0 ], [ 0, 0, 0, 0, 0, 0 ] ]

After the first inner loop row contains two 0's and should be pushed to the newArray in the outer loop. It looks like this isn't happenening and I can't figure out why. The first element should be [0, 0], right?.

I really hope someone can see what I mean here and explain what's happening! Thank you!

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

CodePudding user response：

You're passing row to all the iterations of the loop. To achieve what you want, row must be unique through each iteration of the loop, so you need to move it inside the first loop.

To better understand the issue, read more about values and by references in JavaScript: https://www.javascripttutorial.net/javascript-pass-by-value/#:~:text=JavaScript pass-by-value or pass-by-reference&text=It means that JavaScript copies,variables outside of the function.

function zeroArray(m, n) {

  // Creates a 2-D array with m rows and n columns of zeroes
  
  let newArray = [];
  for (let i = 0; i < m; i  ) {
    let row = [];
  
    // 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);

CodePudding user response：

That's because JavaScript objects (and arrays), are just a reference in memory. so you are creating a single array of arrays that share the same address in memory, because they share the same address, when you update it (Array.prototype.push), you are updating all of them. The solution is to create a new row in the first loop:

function zeroArray(m, n) {  
  const newArray = [];

  for (let i = 0; i < m; i  ) {
    // If this isn't the first run, take the last value of row
    const prevRow = i > 0 ? newArray[i-1] : [];
    const row = [...prevRow]; // By using the spread operator(...), you can copy an array

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

Important note

This isn't a natural way of writing JavaScript, you can achive the same with:

const zeroArray = (m, n) => Array.from({ length : m }).map((value, index) => {
  return Array.from({ length : (index   1) * n }).map(() => 0);
});