175

I have array of two objects:

genericItems: Item[] = [];
backupData: Item[] = [];

I am populating my HTML table with genericItemsdata. The table is modifiable. There is a reset button to undo all changes done with backUpData. This array is populated by a service:

getGenericItems(selected: Item) {
this.itemService.getGenericItems(selected).subscribe(
  result => {
     this.genericItems = result;
  });
     this.backupData = this.genericItems.slice();
  }

My idea was that, the user changes will get reflected in first array and second array can be used as backup for reset operation. The issue I am facing here is when the user modifies the table (genericItems[]) the second array backupData also gets modified.

How is this happening and how to prevent this?

Improve this question
11
  • 1
    Looks like you made a shallow copy of the array. It sounds like you're modifying the objects they were holding and seeing the changes. You need to make a deep copy or come up with a different way to represent your data. Commented Jun 28, 2017 at 17:22
  • 1
    They are pointing to the same reference. If you return a new array using a library like lodash or similar, you won't have that problem. Commented Jun 28, 2017 at 17:24
  • slice() will create new object from another array I guess... Commented Jun 28, 2017 at 17:25
  • 1
    The second array is being modified because rather than creating a new array you are merely referencing the original one. If your using type script and ES6 you can create a copy like this this.backupData = [...this.genericItems] this will create a copy of the array. Hope that helps! Commented Jun 28, 2017 at 17:26
  • 3
    @MolikMiah I'm saying that slice takes an array and copies each reference into a new array. So the old array and new array are actually different, but the objects inside are exactly the same. So it should be the same as doing [...array] Commented Jun 28, 2017 at 17:38

18 Answers 18

Reset to default
272

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)));
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

If your array is an array of objects, (not primitive types), then you need to go one level deeper with your shallow copy. For me the solution was to iterate through the array and clone the objects. I.e. const myArray= [{ a: 'a', b: 'b' }, { a: 'c', b: 'd' }]; const myClonedArray = []; myArray.map(val => myClonedArray.push(Object.assign({}, val)));. An alternative solution for a proper deep copy would be for JSON serialization as mentioned in other answers.
@mumblesNZ, if you're really talking about a deep copy, two levels won't suffice either. You'd have to use something like Lodash's _.cloneDeep(obj). JSON serialization would work, like you said, but that's a very roundabout way to do it.
The option 2 part of this answer works fine for an object that holds primitives. If an array element contains a value which is an array or object, deep copy helps as @user2683747 mentioned.
A helpful reference about deep and shallow copy.. techmeet360.com/blog/playing-with-javascript-object-clone
158

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}}]
Improve this answer

5 Comments

Ah! The penny drops! Time to stop using the spread operator to clone arrays of objects
const myClonedArray = [...myArray] is working for [{a:1}, {b:2}].
No it does not. try modifying your cloned item and it will also modify the original. what you have is copy by reference and not value.
For deepcloning can also use "Object.assign(Object.create(Object.getPrototypeOf(obj)), obj);" instead of using an external library.
This is the answer that works for array of arrays
45

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));
Improve this answer

1 Comment

The best solution to clone deeply an array of objects without using any new libraries
20

try the following code:

this.cloneArray= [...this.OriginalArray]
Improve this answer

1 Comment

While the spread operator is helpful, it will only be a shallow copy if the array contains objects
9

The following line in your code creates a new array, copies all object references from genericItems into that new array, and assigns it to backupData:

this.backupData = this.genericItems.slice();

So while backupData and genericItems are different arrays, they contain the same exact object references.

You could bring in a library to do deep copying for you (as @LatinWarrior mentioned).

But if Item is not too complex, maybe you can add a clone method to it to deep clone the object yourself:

class Item {
  somePrimitiveType: string;
  someRefType: any = { someProperty: 0 };

  clone(): Item {
    let clone = new Item();

    // Assignment will copy primitive types

    clone.somePrimitiveType = this.somePrimitiveType;

    // Explicitly deep copy the reference types

    clone.someRefType = {
      someProperty: this.someRefType.someProperty
    };

    return clone;
  }
}

Then call clone() on each item:

this.backupData = this.genericItems.map(item => item.clone());
Improve this answer

Comments

8

Array copy explained - Deep & Shallow

Below code might help you to copy the first level objects

let original = [{ a: 1 }, {b:1}]
const copy = original.map(item=>({...item}))

so for below case, values remains intact

copy[0].a = 23
console.log(original[0].a) //logs 1 -- value didn't change voila :)

Fails for this case

let original = [{ a: {b:2} }, {b:1}]
const copy = original.map(item=>({...item}))
copy[0].a.b = 23;
console.log(original[0].a) //logs {b: 23} -- lost the original one :(

Try lodash separate ES module - cloneDeep:

I would say go for lodash cloneDeep API ( This can be installed as a separate module, reduced code footprint for treeshaking ) which helps you to copy the objects inside objects completely dereferencing from original one's. As another option you can rely on JSON.stringify & JSON.parse methods to dereference quickly and performant too.

Refer documentation: https://github.com/lodash/lodash

Individual Package : https://www.npmjs.com/package/lodash.clonedeep

Improve this answer

1 Comment

no real need for destructuring. const copy = original.map(item=>({...item}))
7

you can use map function

 toArray= fromArray.map(x => x);
Improve this answer

1 Comment

if it is an array of simple objects like [{name:'a'},{name:'b'}] you should use const clone= fromArray.map(x => ({...x}));
5

Clone an object / array (without reference) in a very powerful way

You can get deep-copy of your object / array using @angular-devkit.

import { deepCopy } from '@angular-devkit/core/src/utils/object';

export class AppComponent {

  object = { .. some object data .. }
  array = [ .. some list data .. ]

  constructor() {
     const newObject = deepCopy(this.object);
     const newArray = deepCopy(this.array);
  }
}
Improve this answer

4 Comments

Excellent, this works, a native solution for people who don't prefer or have loaddash dependency
That did it, thank you very much. I'm amazed as to why the spread operator or other methods like slice, etc. didn't work. assigning the destination array to the source array, always changed the source array too, what a disaster.
@Nexus An array of "objects" (object as in { ... }) is not actually an array of objects. It's subtle, but an array of objects is actually an array of references. As a real world metaphor, think of "objects" as websites on the web: in that case an "array of objects" would actually be an array url addresses. The array does not contain the websites themselves, and If you copy the array, you will get a copy of the urls. If one website owner changes their homepage, you would "see" it from both arrays. (cont...)
(...cont) The websites (objects) were not copied because they are not in the array to begin with. The objects are somewhere else (in computer memory) - you don't need to know because the javascript engine keeps track of that - just like a website resides on some server at a physical address somewhere - but you don't need to know where exactly since you can reference it with the url. Clearly if you wanted to copy the websites themselves you would need a lot more code to do the job, which is why other smart people have made such "deepCopy" methods.
3

I have the same issue with primeNg DataTable. After trying and crying, I've fixed the issue by using this code.

private deepArrayCopy(arr: SelectItem[]): SelectItem[] {
    const result: SelectItem[] = [];
    if (!arr) {
      return result;
    }
    const arrayLength = arr.length;
    for (let i = 0; i <= arrayLength; i++) {
      const item = arr[i];
      if (item) {
        result.push({ label: item.label, value: item.value });
      }
    }
    return result;
  }

For initializing backup value

backupData = this.deepArrayCopy(genericItems);

For resetting changes 

genericItems = this.deepArrayCopy(backupData);

The magic bullet is to recreate items by using {} instead of calling constructor. I've tried new SelectItem(item.label, item.value) which doesn't work.

Improve this answer

Comments

2

the easiest way to clone an array is 

backUpData = genericItems.concat();

This will create a new memory for the array indexes

Improve this answer

1 Comment

This doesn't create a new memory for backUpData. backUpData still holds reference of genericItems.
2

If your items in the array are not primitive you can use spread operator to do that.

this.plansCopy = this.plans.map(obj => ({...obj}));

Complete answer : https://stackoverflow.com/a/47776875/5775048

Improve this answer

Comments

1

Try this:

[https://lodash.com/docs/4.17.4#clone][1]

var objects = [{ 'a': 1 }, { 'b': 2 }];

var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true
Improve this answer

Comments

1

It looks like you may have made a mistake as to where you are doing the copy of an Array. Have a look at my explanation below and a slight modification to the code which should work in helping you reset the data to its previous state.

In your example i can see the following taking place:

  • you are doing a request to get generic items
  • after you get the data you set the results to the this.genericItems
  • directly after that you set the backupData as the result

Am i right in thinking you don't want the 3rd point to happen in that order?

Would this be better:

  • you do the data request
  • make a backup copy of what is current in this.genericItems
  • then set genericItems as the result of your request

Try this:

getGenericItems(selected: Item) {
  this.itemService.getGenericItems(selected).subscribe(
    result => {
       // make a backup before you change the genericItems
       this.backupData = this.genericItems.slice();

       // now update genericItems with the results from your request
       this.genericItems = result;
    });
  }
Improve this answer

Comments

1

array level cloning solutions didn't work for me, added this clone utility in typescript which does a deeper clone that worked in my case

export function cloneArray<T>(arr: T[]): T[] {
  return arr.map((x) => Object.assign({}, x))
}

by "didn't work" i meant, that if i passed an array to a function [...arr] or Object.assign([], arr) or arr.splice() it was still mutating the original array

Improve this answer

Comments

1

Use structuredClone!!!

newfiles = structuredClone(oldFiles);

Improve this answer

Comments

1

Since March 2022 (baseline availability date), I'd generally recommend using the built-in structuredClone function to deep-clone arrays of data:

const plans = [
  {
    id: "plan-1",
    steps: [
      { name: "Step 1A" },
      { name: "Step 1B" },
      { name: "Step 1C" },
    ],
  },
  {
    id: "plan-2",
    steps: [
      { name: "Step 2A" },
      { name: "Step 2B" },
    ],
  },
]

const plansClone = structuredClone(plans)

assert(plans[0].id === plansClone[0].id, 'String prop equal')
assert(plans[0].steps[0].name === plansClone[0].steps[0].name, 'Nested string prop equal')
assert(JSON.stringify(plans) === JSON.stringify(plansClone), 'JSON serialization equal')

assert(plans !== plansClone, 'Array not reference equal')
assert(plans[0] !== plansClone[0], 'Object not reference equal')
assert(plans[0].steps !== plansClone[0].steps, 'Nested array not reference equal')
assert(plans[0].steps[0] !== plansClone[0].steps[0], 'Nested object not reference equal')

console.info('All tests passed!')

function assert(condition, message) {
  if (!condition) throw new Error(`Assertion failed: ${message}`)
}

Improve this answer

Comments

0

Looks like what you want is Deep Copy of the object. Why not use Object.assign()? No libaries needed, and its a one-liner :)

getGenericItems(selected: Item) {
    this.itemService.getGenericItems(selected).subscribe(
        result => {
            this.genericItems = result;
            this.backupDate = Object.assign({}, result); 
            //this.backupdate WILL NOT share the same memory locations as this.genericItems
            //modifying this.genericItems WILL NOT modify this.backupdate
        });
}

More on Object.assign(): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

Improve this answer

2 Comments

This will do the same thing as slice(). It creates a new array, but copies the object references from the old array.
Also, I think it should be Object.assign([], result). Otherwise, I think you'll lose the length property (and maybe some other things).
-1

Try this

const returnedTarget = Object.assign(target, source);

and pass empty array to target

in case complex objects this way works for me

$.extend(true, [], originalArray) in case of array

$.extend(true, {}, originalObject) in case of object

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.