Deep copy in ES6 using the spread syntax
Use JSON for deep copy
var newObject = JSON.parse(JSON.stringify(oldObject))var oldObject = { name: 'A', address: { street: 'Station Road', city: 'Pune' }}var newObject = JSON.parse(JSON.stringify(oldObject));newObject.address.city = 'Delhi';console.log('newObject');console.log(newObject);console.log('oldObject');console.log(oldObject);
No such functionality is built-in to ES6. I think you have a couple of options depending on what you want to do.
If you really want to deep copy:
- Use a library. For example, lodash has a
cloneDeepmethod. - Implement your own cloning function.
Alternative Solution To Your Specific Problem (No Deep Copy)
However, I think, if you're willing to change a couple things, you can save yourself some work. I'm assuming you control all call sites to your function.
Specify that all callbacks passed to
mapCopymust return new objects instead of mutating the existing object. For example:mapCopy(state, e => { if (e.id === action.id) { return Object.assign({}, e, { title: 'new item' }); } else { return e; }});This makes use of
Object.assignto create a new object, sets properties ofeon that new object, then sets a new title on that new object. This means you never mutate existing objects and only create new ones when necessary.mapCopycan be really simple now:export const mapCopy = (object, callback) => { return Object.keys(object).reduce(function (output, key) { output[key] = callback.call(this, object[key]); return output; }, {});}
Essentially, mapCopy is trusting its callers to do the right thing. This is why I said this assumes you control all call sites.
From MDN
Note: Spread syntax effectively goes one level deep while copying an array. Therefore, it may be unsuitable for copying multidimensional arrays as the following example shows (it's the same with Object.assign() and spread syntax).
Personally, I suggest using Lodash's cloneDeep function for multi-level object/array cloning.
Here is a working example:
const arr1 = [{ 'a': 1 }];const arr2 = [...arr1];const arr3 = _.clone(arr1);const arr4 = arr1.slice();const arr5 = _.cloneDeep(arr1);const arr6 = [...{...arr1}]; // a bit ugly syntax but it is working!// first levelconsole.log(arr1 === arr2); // falseconsole.log(arr1 === arr3); // falseconsole.log(arr1 === arr4); // falseconsole.log(arr1 === arr5); // falseconsole.log(arr1 === arr6); // false// second levelconsole.log(arr1[0] === arr2[0]); // trueconsole.log(arr1[0] === arr3[0]); // trueconsole.log(arr1[0] === arr4[0]); // trueconsole.log(arr1[0] === arr5[0]); // falseconsole.log(arr1[0] === arr6[0]); // false<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>