Javascript array.push replaces all elements instead of adding an array

July 3, 2022

I was just trying stuff out in Vanilla JS and ran into a problem where array.push does not push another array (row) whose elems got changed in a for loop, but rather replaces the whole array (mainArr). It would be better to show the code so please scroll below

function genArray(m, n) {
  let mainArr = [];
  let row = [];
  for (let i = 0; i < m; i++) {
    for (let j = 0; j < n; j++) {
        row.push(j);
    }
    mainArr.push(row)
  }
  return mainArr;
}
let myArr = genArray(3, 2);
console.log(myArr);
/**
 * outputs:
 * 
 * [ [ 0, 1, 0, 1, 0, 1 ],
 *   [ 0, 1, 0, 1, 0, 1 ],
 *   [ 0, 1, 0, 1, 0, 1 ] ]
 * 
 * why not:
 * 
 * [ [ 0, 1 ], 
 *   [ 0, 1, 0, 1 ], 
 *   [ 0, 1, 0, 1, 0, 1 ] ]
 */

At first I thought it was just because of the reference being appended as this SOF answers says, but as the code shows it doesn’t.

let arr1 = []
let arr2 = [1, 2]
arr1.push(arr2)
console.log(arr1); // [ [ 1, 2 ] ]
arr2 = [2, 4]
console.log(arr1); // still [ [ 1, 2 ] ]

let arr3 = []
let obj1 = {name: "John"}
arr3.push(obj1)
console.log(arr3); // [ {name: "John"}]
obj1.name = "Mike"
console.log(arr3); // [ {name: "Mike"} ]

>Solution :

You are updating the same array every time, so all inserted lists will eventually point to the same reference with the value set in the last iteration.

The following is a fix with an enhancement to reach the expected output:

function genArray(m, n) {
  const mainArr = [];
  for (let i = 0; i < m; i++) {
    const row = [];
    let count = i;
    while(count-- >= 0) {
      for (let j = 0; j < n; j++) {
        row.push(j);
      }
    }
    mainArr.push(row)
  }
  return mainArr;
}

console.log( genArray(3, 2) );