javascript - When is it necessary to use the Object.assign() method to copy an instance of an object? -

the following example scenario made own practice of problem. if want skip straight technical details, please see 'technical details' below.

i have personal project i've been working on learn javascript. basically, user can design shoe picking available options.

the trick left , right shoe must have same size, among other properties, things color, shoe lace texture, etc. can independent properties per shoe. (i figured decent way me practice object manipulation , inheritance).

the user starts off designing right shoe; when "swap" button clicked @ left shoe, user sees copy of right shoe (but inverted). only on first swapping of shoes left shoe generated , made exact copy of right shoe. onwards, unique options per shoe orientation preserved. then, if user makes specific changes that left-shoe model, , switches right shoe, user supposed see exact same right shoe had designed before clicked "swap" button.

so if right shoe had red laces, switch left shoe view , make left shoe have blue lace, when switching right shoe user should see red laces!

---

technical details

when writing code main project running trouble unique options being perserved. example, if made laces green left shoe, right shoe have green laces. troubleshooting down problem easy because time right shoe losing it's unique options, such red lace, when set lace color left shoe.

console.log("the right lace before: " + rightshoe.laceid); leftshoe.laceid = 'green'; console.log("the right lace after: " + rightshoe.laceid); 

what log console was:

the right lace before: red

the right lace after: green

even though wasn't changing rightshoe, being changed whenever changed leftshoe property.

so went first define leftshoe object, when user clicks "swap" first time in life of script (my amateur thought why propagate , fill leftshoe object if user possibly never customizes left shoe? maybe it's being unnecessarily stingy data, don't know). onward, i never redefined leftshoe copy of rightshoe or vice versa. figured getting hung fact doing object referencing and, other languages, changing reference , not value.

before coming troubles, wanted make jsfiddle recreate problem. being project lengthy (around ~1500 lines, including three.js graphics), did best emulate process. , here is.

except jsfiddle worked expected to! left model preserved it's unique attribute , data set attribute. so, did little more digging , read object.assign() method. in original project code (not fiddle), changed this:

leftshoe = rightshoe; 

to this:

leftshoe = object.assign({}, rightshoe); 

as excited have gotten work, equally amused , perplexed because don't understand why jsfiddle didn't need assign() method identical project code did. thank you.

object.assign makes new copy of left shoe, including enumerable own properties. when use leftshoe = rightshoe, making reference left shoe. reference points same object, not new copy. changing property of reference changing original, noted.