title: Javascript multidimensional array updating specific element
body: <p>I have a string that has been converted into an 2D Array in js.</p>
  <h3>board = &quot;...|.X.|...|&quot;</h3>
  <p>It is used to represent a game board</p>
  <p>each . represents a space</p>
  <p>each | represents a row</p>
  <p>each X represents a wall</p>
  <h3>EDIT: code below for the 2d array creation</h3>
  <pre><code>var src= &quot;...|.X.|...|&quot;;
  board = src.split(/\|/g);
  
  for (var i = 0; i &lt; board.length; i++) {
  var cells = board[i].split('');
  for (var j = 0; j &lt; cells.length; j++) {
      cells[j] = parseInt(cells[j]);
  }
  board[i][j] = cells;
  console.log(board[1][1])
  //returns 'X'
  
                      
  </code></pre>
  <p>when i access board[i][j] it returns correctly:</p>
  <h3>[0][0] = &quot;.&quot;</h3>
  <h3>[1][1] = &quot;X&quot;</h3>
  <h3>[1][2] = &quot;.&quot;</h3>
  <p>etc etc</p>
  <p>I want to update the specific element with a string representing a piece.
  However when i insert into an element like so:</p>
  <h3>board[0][0] = &quot;piece4&quot;</h3>
  <p>The array returns in firebug as so:</p>
  <h3>board = &quot;piece4|.X.|...|&quot;</h3>
  <p>When it should look like:</p>
  <h3>board = &quot;.piece4.|.X.|...|&quot;</h3>
  <p>Why are elements [0][1] and [0][2] being overwritten? Am I not understanding arrays of array index access correctly in js?</p>