title: Properties of an object being changed, even though they should be passed by Value
body: <p>I was working on a small JavaScript project to make a tile based game (not homework, don't worry!), however I ran into a problem with my 'tile' class.</p>
  
  <p>Each 'tile' has an X and a Y property, for its X and Y position on a grid. The grid is stored as a 2 dimensional array of these tiles. The tiles are constructed like so:</p>
  
  <pre><code>class tile {
      constructor(x,y) {
          this.x = x;
          this.y = y;
          console.log(`Genned Tile: ${x} , ${y}`);
      }
  }
  </code></pre>
  
  <p>There's also a small logging message contained</p>
  
  <p>So then, I wrote a small loop to fill an array with 'tile' objects:</p>
  
  <pre><code>for (var x = 0; x &lt; width; x++) {
      for (var y = 0; y &lt; height; y++) {
          tiles[x,y] = new tile(x,y);
      }
  }
  </code></pre>
  
  <p>width and height are both set to 5. This should fill slots 0-4.</p>
  
  <p>However, when displaying the tiles, the X coord is wrong! I'll attach a snippet to show you what I mean</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// tile class
  class tile {
      constructor(x,y) {
          this.x = x;
          this.y = y;
          console.log(`Genned Tile: ${x} , ${y}`);
      }
  }
  
  var width = 5;
  var height = 5;
  var tiles = new Array(width,height);
  
  // populates array
  for (var x = 0; x &lt; width; x++) {
      for (var y = 0; y &lt; height; y++) {
          tiles[x,y] = new tile(x,y);
      }
  }
  
  // displays each item in the array
  for (var x = 0; x &lt; width; x++) {
      for (var y = 0; y &lt; height; y++) {
          let tile = tiles[x,y];
          console.log(`Checked Tile: ${tile.x} , ${tile.y}`);
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>The Y coord looks correct, however the X coord remains at 4! The logging message seems to tell me that it's putting the correct number in the constructor, so I'm unsure why the X coord is changing like this. I did some research and found out that the 'x' and 'y' numbers SHOULD be passed by value (they are primitives), so any changes to 'x' and 'y' in the loop shouldn't affect my class, right?</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Thanks for reading! :)</p>