I just came across this concept of
var copy = Object.assign({}, originalObject); which creates a copy of original object into the "copy" object. However, my question is, does this way of cloning object create a deep copy or a shallow copy?
PS: The confusion is, if it creates a deep copy, then it would be the easiest way to clone an object.
Forget about deep copy, even shallow copy isn't safe, if the object you're copying has a property with enumerable attribute set to false.
MDN :
The Object.assign() method only copies enumerable and own properties from a source object to a target object
take this example
var o = {}; Object.defineProperty(o,'x',{enumerable: false,value : 15}); var ob={}; Object.assign(ob,o); console.log(o.x); // 15 console.log(ob.x); // undefined By using Object.assign(), you are actually doing Shallow Copy of your object. Whenever we do an operation like assigning one object to other, we actually perform a shallow copy, i.e. if OBJ1 is an object, modifying it through another object which is OBJ2 will reflect changes in OBJ1 too.
It creates a shallow copy, according to this paragraph from MDN:
For deep cloning, we need to use other alternatives because Object.assign() copies property values. If the source value is a reference to an object, it only copies that reference value.
For the purposes of redux, Object.assign() is sufficient because the state of a redux app only contains immutable values (JSON).
For small Data structures I see that JSON.stringify() and JSON.parse() work nice.
// store as JSON var copyOfWindowLocation = JSON.stringify(window.location) console.log("JSON structure - copy:", copyOfWindowLocation) // convert back to Javascript Object copyOfWindowLocation = JSON.parse(copyOfWindowLocation) console.log("Javascript structure - copy:", copyOfWindowLocation)