Two arrays update together when I only want one to change

Question

Here is my code:

let rowValues = [];
let gridValues = [];
let testArray = [[1,1,1],[0,0,0],[1,1,1],[0,0,0],[1,1,1]];
let rows = 5;
let cols = 3;

for (let i = 0; i < rows; i++) {
    rowValues.length = [];

    for (let j = 0; j < cols; j++) {

        if (testArray[i][j] === 0) {
            rowValues.push(0);
        } else if (testArray[i][j] === 1) {
            rowValues.push(1);
        }
    }
    gridValues.push(rowValues);
}

The problem is that the gridValues array updates with the rowValues array after the first iteration of the first for loop (once i = 1). It's like they become linked and when you update one the other follows suit. What is going on here??

All I want to have happen is build the rowValues array and then push it into the gridValues array to build a 2D array. But when rowValues is cleared at the start of the next iteration, gridValues is cleared too.

because you pushing a reference to rowValues into gridValues. the easiest fix for this would be to spread the contents of rowValues into gridValues, instead of pushing a reference to rowValues into gridValues. `gridValues.push([...rowValues])` — about14sheep, Dec 15 '21 at 02:36

Ro Milton · Answer 1 · 2021-12-15T04:22:28.903

gridValues.push(rowValues) inserts a reference of rowValues into gridValues. And since you execute that command 5 times (once for each row), the same reference is inserted 5 times, which explains why the result contains 5 copies of the last row's data [1,1,1]. When you reset the array using rowValues.length = [], the references you've already inserted into gridValues will point to the new value.

You can avoid this problem by replacing line 18 with the following that pushes a copy of the array using the spread syntax:

gridValues.push([...rowValues]);

Also, I'm not sure what you're trying to achieve - perhaps you contrived your example - but if you simply want to clone the array testArray then there's no need for a for loop or .push() at all because you can just use the spread syntax on that:

const testArray = [[1,1,1],[0,0,0],[1,1,1],[0,0,0],[1,1,1]];
const gridValues = [...testArray];

Thank you for this excellent explanation! I'm pretty new to JS and I didn't know about the spread syntax until now! Thank you so much :) And yes, testArray is contrived, the real input array is generated on the fly from graphics data. I just created a known test input to hammer out this particular function. Thanks again friend! — WilloWeird, Dec 15 '21 at 04:21

score 0 · Answer 2 · answered Dec 15 '21 at 04:35

0

gridValues.push(JSON.parse(JSON.stringify(rowValues))

answered Dec 15 '21 at 04:35

Linda Taylor

44
4

1

This does actually provide an answer, which works (solves the problem). It is definitely an honest attempt at answering the question. However, since it is a code-only answer and does not touch on why the suggested code works, it qualifies as a low-quality answer. @CinCout please refrain from reviewing answers on technologies you're not familiar with. – tao Dec 17 '21 at 01:27

score -1 · Answer 3 · answered Dec 15 '21 at 02:42

-1

Change

rowValues.length = [];

to

rowValues = [];

answered Dec 15 '21 at 02:42

pancial

1

Two arrays update together when I only want one to change

3 Answers3