Hello!
I had the same question as @awesomeHu, @Juskink
And that’s what i found
Problem is that row never resets. Arrays and objects act as pointers in JavaScript. When you push row into the matrix array, you are pushing a pointer to row into the matrix array, not a copy of row at that point in time. The next time you change row by pushing a 0 onto it, the row already in the matrix array changes too. That’s because matrix[0] is a pointer to a location in memory, and when you call row.push(0), you are changing that location in memory. Therefore the next time you call matrix[0] it will include all changes you’ve made.
You’ll find that matrix[0] === matrix[1]. Same is true for matrix[2]. They are all three pointers to the same location in memory (row).
To solve this, you want to put your row = [] inside the first for loop. This tells it to make a new row (or a new location in memory) every iteration.
If you want to get your expected outcome of 2 columns, 4 columns, 6 columns, then instead of pushing row to matrix, push row.slice(0). This pushes a copy of row to matrix, meaning that all subsequent changes to row will not affect the copy that you pushed. That is, matrix will not contain a pointer to row, but a pointer to a copy of row at some point in time.
Hope this helps. 