Javascript multidimensional array updating specific element

Question

I have a string that has been converted into an 2D Array in js.

board = "...|.X.|...|"

It is used to represent a game board

each . represents a space

each | represents a row

each X represents a wall

EDIT: code below for the 2d array creation

var src= "...|.X.|...|";
board = src.split(/\|/g);

for (var i = 0; i < board.length; i++) {
var cells = board[i].split('');
for (var j = 0; j < cells.length; j++) {
    cells[j] = parseInt(cells[j]);
}
board[i][j] = cells;
console.log(board[1][1])
//returns 'X'

                    

when i access board[i][j] it returns correctly:

[0][0] = "."

[1][1] = "X"

[1][2] = "."

etc etc

I want to update the specific element with a string representing a piece. However when i insert into an element like so:

board[0][0] = "piece4"

The array returns in firebug as so:

board = "piece4|.X.|...|"

When it should look like:

board = ".piece4.|.X.|...|"

Why are elements [0][1] and [0][2] being overwritten? Am I not understanding arrays of array index access correctly in js?

Answer 1

I just had the same problem, but it had a more complex reason and I want to add it, in case someone finds this page searching for the same problem I had:

I had created and filled a 2-dimensional array like this:

var foo = Array(n).fill(Array(n).fill(0));

which creates a 2-dimensional n*n array filled with zeroes.

Now when I tried to overwrite a cell like this

foo[1][1] = 1;

I ended up with these values:

[[0,1,0],
 [0,1,0],
 [0,1,0]]

which is really surprising IMHO.

The reason for this was, that there has only been one row, which had internally been referenced three times. So when I changed the first index in "the second" row, it effectively changed all rows.

Bottom line: don't use Array.fill to create multi-dimensional arrays!

Answer 2

PROBLEM:

I'm betting that you have a one-dimensional array with strings stored in each. So your array actually looks like:

array (
    [0] => '...',
    [1] => '.X.',
    [2] => '...'
)

When this is what you want:

array (
    [0] => array (
        [0] => '.',
        [1] => '.',
        [2] => '.'
    ),
    [1] => array (
        [0] => '.',
        [1] => 'X',
        [2] => '.'
    ),
    [2] => array (
        [0] => '.',
        [1] => '.',
        [2] => '.'
    )
)

SOLUTION:

When constructing your 2D array, make sure you explicitly declare each entry in board as an array. So to construct it, your code might look something like this:

board = new Array();
rows = 3;
for (var i = 0; i < rows; i++)
    board[i] = new Array('.', '.', '.');