Updating one object in javascript 2d array updates every single object

Question

I declare a 2d array in javascript as follows:

cell = {visited:false, left:true, top:true, right:true, bottom:true}

cells = new Array(10);

for (i = 0; i < 10; i++) //Initiate 2d cells array.
{
    cells[i] = new Array(cell,cell,cell,cell,cell,cell,cell,cell,cell,cell);
}

Later in the code I update one object in the array:

cells[0][0].visited = true;

However after I do this every visited attribute of every object in the array is marked true.

You have only a single cell, referenced repeatedly in the array. You either need to clone them, or create each cell in the loop. — Dave Newton, Apr 25 '16 at 13:07
You're code is putting the exact same object in the array 10 times. The array will contain 10 references to the same single object. — Pointy, Apr 25 '16 at 13:08
By creating each cell on its own, or cloning the initial state. — Dave Newton, Apr 25 '16 at 13:08
Like this? cells[i] = new Array({visited:false, left:true, top:true, right:true, bottom:true}, '', ''.....); — Goblaz, Apr 25 '16 at 13:11

score 0 · Answer 1 · edited May 23 '17 at 11:45

As @Pointy said, your code have this reference problem. You can resolve this with Object.create() building a "clone" of the object:

cell = {visited:false, left:true, top:true, right:true, bottom:true}

cells = new Array(10);

for (i = 0; i < 10; i++) //Initiate 2d cells array.
{
    cells[i] = new Array(
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell),
      Object.create(cell)
    );
}

cells[0][0].visited = true;

See also Clone Object without reference javascript [duplicate]

score -1 · Answer 2 · answered Apr 25 '16 at 13:20

Sorry I needed to initiate the array with separate objects not the same "cell":

for (i = 0; i < 10; i++) //Initiate 2d cells array.
{
cells[i] = new Array({visited:false, left:true, top:true, right:true,                     bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true},
    {visited:false, left:true, top:true, right:true, bottom:true});
}

Updating one object in javascript 2d array updates every single object

2 Answers2