Cloning an array in Javascript/Typescript

Clone an object:

const myClonedObject = Object.assign({}, myObject);

Clone an Array:

• Option 1 if you have an array of primitive types:

const myClonedArray = Object.assign([], myArray);

• Option 2 - if you have an array of objects:

const myArray= [{ a: 'a', b: 'b' }, { a: 'c', b: 'd' }];const myClonedArray = [];myArray.forEach(val => myClonedArray.push(Object.assign({}, val)));

Cloning Arrays and Objects in javascript have a different syntax. Sooner or later everyone learns the difference the hard way and end up here.

In Typescript and ES6 you can use the spread operator for array and object:

const myClonedArray  = [...myArray];  // This is ok for [1,2,'test','bla']                                      // But wont work for [{a:1}, {b:2}].                                       // A bug will occur when you                                       // modify the clone and you expect the                                       // original not to be modified.                                      // The solution is to do a deep copy                                      // when you are cloning an array of objects.

To do a deep copy of an object you need an external library:

import {cloneDeep} from 'lodash';const myClonedArray = cloneDeep(myArray);     // This works for [{a:1}, {b:2}]

The spread operator works on object as well but it will only do a shallow copy (first layer of children)

const myShallowClonedObject = {...myObject};   // Will do a shallow copy                                               // and cause you an un expected bug.

To do a deep copy of an object you need an external library:

 import {cloneDeep} from 'lodash'; const deeplyClonedObject = cloneDeep(myObject);   // This works for [{a:{b:2}}]

Using map or other similar solution do not help to clone deeply an array of object. An easier way to do this without adding a new library is using JSON.stringfy and then JSON.parse.

In your case this should work :

this.backupData = JSON.parse(JSON.stringify(genericItems));

• When using the last version of JS/TS, installing a large library like lodash for just one/two function is a bad move. You will heart your app performance and in the long run you will have to maintain the library upgrades! check https://bundlephobia.com/result?p=lodash@4.17.15

• For small objet lodash cloneDeep can be faster but for larger/deeper object json clone become faster. So in this cases you should not hesitate to use it. check https://www.measurethat.net/Benchmarks/Show/6039/0/lodash-clonedeep-vs-json-clone-larger-object and for infos https://v8.dev/blog/cost-of-javascript-2019#json

• The inconvenient is that your source object must be convertible to JSON.