I’m having difficulty understanding the logic of this exercise and why we need to move the empty row array from outside the loop to inside the outer loop. I read draber06’s explanation, however it still doesn’t make complete sense to me. Here is what he wrote:
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.
I’d really appreciate if someone could break it down in somewhat different terms to make it more comprehensible to me, or link to an article somewhere that goes into this issue at a slower pace and in perhaps more detail.
This is quite an important topic because I know that later challenges in the intermediate algorithms section will make use of problems similar to this one.