title: When is it necessary to use the Object.assign() method to copy an instance of an object?
body: <p><strong>The following is an example scenario I made up for my own practice of this problem.  If you want to skip straight to the technical details, please see 'Technical Details' below.</strong></p>
  
  <p>I have a personal project I've been working on to learn JavaScript. Basically, the user can design a shoe by picking available options.</p>
  
  <p>The trick is that the left and right shoe must have the same size, among other properties, but things like color, shoe lace texture, etc. can be independent properties per shoe. (I figured this was a decent way for me to practice object manipulation and inheritance).</p>
  
  <p>The user starts off with designing the right shoe; when the "swap" button is clicked to look at the left shoe, the user currently sees a copy of the right shoe (but inverted).  <strong>Only on the first swapping of shoes is the left shoe generated and made an exact copy of the right shoe. From then onwards, unique options per shoe orientation are preserved.</strong> Then, if the user makes specific changes to <em>that</em> left-shoe model, and then switches to the right shoe, the user is supposed to see the exact same right shoe that they had originally designed before they clicked the "swap" button.</p>
  
  <p>So if their right shoe had red laces, they switch to the left shoe view and make the left shoe have a blue lace, then when switching back to the right shoe the user should see red laces!</p>
  
  <hr>
  
  <p><strong>Technical Details</strong> </p>
  
  <p>When I was writing the code for my main project I was running into trouble with the unique options being perserved. For example, if I made the laces green for the left shoe, the right shoe would always have green laces. Troubleshooting down to the problem was easy because the only time the right shoe was losing it's unique options, such as a red lace, was when I would set the lace color for the left shoe.</p>
  
  <pre><code>console.log("THE RIGHT LACE BEFORE: " + rightShoe.laceId);
  leftShoe.laceId = 'green';
  console.log("THE RIGHT LACE AFTER: " + rightShoe.laceId);
  </code></pre>
  
  <p>What would log to the console was:</p>
  
  <blockquote>
    <p>THE RIGHT LACE BEFORE: red</p>
    
    <p>THE RIGHT LACE AFTER: green</p>
  </blockquote>
  
  <p>Even though I wasn't changing the <code>rightShoe</code>, it was being changed whenever I changed the <code>leftShoe</code> property.</p>
  
  <p>So I went back to where I first define the <code>leftShoe</code> object, which is when the user clicks "swap" for the first time in the life of the script (My amateur thought was <em>why propagate and fill the <code>leftShoe</code> object if the user possibly never customizes the left shoe?</em> Maybe it's being unnecessarily stingy with data, I don't know). From then onward, <em>I never redefined the <code>leftShoe</code> to be a copy of <code>rightShoe</code></em> or vice versa. I figured that I was getting hung up by the fact that I was probably doing object referencing and, just like with other languages, I was changing the <em>reference</em> and not the value.</p>
  
  <p>Before coming to SO with my troubles, I wanted to make a JSFiddle to recreate the problem. Being that my project is lengthy (around ~1500 lines, including some <strong>THREE.js</strong> for graphics), I did my best to emulate the process. And so <a href="https://jsfiddle.net/fuayzgxn/2/">here it is</a>.</p>
  
  <p><em>Except the JSFiddle worked exactly as I expected it to!</em> The left model preserved it's unique attribute and data set to that attribute. So, I did a little more digging and read about the <strong>Object.assign()</strong> method. So in my original project code (<em>not</em> the fiddle), I changed this:</p>
  
  <pre><code>leftShoe = rightShoe;
  </code></pre>
  
  <p>to this:</p>
  
  <pre><code>leftShoe = Object.assign({}, rightShoe);
  </code></pre>
  
  <p>As excited as I am to have finally gotten this to work, I am equally amused and perplexed because I don't understand why my JSFiddle didn't need the <code>assign()</code> method but my identical project code did. Thank you.</p>