title: Set two-dimensional array value as property of object javascript
body: <p>I have the following class:
  I am trying to set the value of <code>this.grid[0][0]</code> to <code>0</code>, however when I run the following code I get the output in the console:</p>
  <pre><code>this.grid = 0: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  1: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  2: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  3: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  4: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  5: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  6: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  7: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  8: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  9: (10) [0, 1, 1, 1, 1, 1, 1, 1, 1, 1]
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class Pane {
    turnChance = 0.4;
    maxLength = 100;
    gridMultiplier = 20;
    constructor({
      height,
      width,
      p,
      start
    } = {}) {
      this.height = height;
      this.width = width;
      this.start = start;
      this.grid;
      this.initGrid();
    }
    initGrid() {
      this.grid = Array(this.width).fill(Array(this.height).fill(1));
    }
    generateLines() {
      this.grid[0][0] = 0;
    }
  }
  const pane = new Pane({
    height: 10,
    width: 10,
    start: [0, 0]
  });
  console.log(pane.grid)
  pane.generateLines()
  console.log(pane.grid)</code></pre>
  </div>
  </div>
  </p>
  <p>Why is this happening, and how can I set <code>this.grid[0][0]</code> solely, without it affecting any other elements in the array?</p>