How to duplicate property in JS constructor function without changing original

Question

I am new to JS constructor functions. I have an object/constructor. The function takes data as a property. However I need two copies of the data: one to change and then one as a reference to reset to. However, changing one seems to change the other no matter what:

var myData = [1, 2, 3, 4, 5]
myFunction(myData)

function myFunction(data){
   this.updatableData = data;
   this.resetData = data;

   this.updatableData.pop()

   console.log(this.resetData)

   //expect [1,2,3,4,5]
   //but get [1,2,3,4]


}

nyarthan · Answer 1 · 2021-04-16T00:16:41.613

1

use the spread syntax to make a copy of the original array

var myData = [1, 2, 3, 4, 5]
myFunction(myData)

function myFunction(data){
   this.updatableData = data;
   this.resetData = [...data];

   this.updatableData.pop()

   console.log(this.resetData)
}

edited Apr 16 '21 at 00:16

answered Apr 16 '21 at 00:09

nyarthan

350
2
10

[It is not an operator.](https://stackoverflow.com/questions/44934828/is-it-spread-syntax-or-the-spread-operator) – Unmitigated Apr 16 '21 at 00:11
thanks for pointing it out I will edit my answer – nyarthan Apr 16 '21 at 00:16
Thanks. I've never heard of `spread syntax` – auto Apr 16 '21 at 00:27

score 0 · Answer 2 · answered Apr 16 '21 at 00:08

0

You can use spread syntax for a shallow copy.

this.updatableData = [...data];

Or Array#slice:

this.updatableData = data.slice();

answered Apr 16 '21 at 00:08

Unmitigated

76,500
11
62
80

score 0 · Answer 3 · answered Apr 16 '21 at 00:32

That's called reference type.

When you change the reference, it affects all objects pointed to that address.

In good old javascript we used to copy arrays like this:

var arr = [1,2,3,4];
var arr_copy = [].concat(arr);

arr.pop(); // remove last item from the original array

console.log(arr) // prints [1,2,3]

console.log(arr_copy) // prints [1,2,3,4]

And this approach is still actual if you are looking for a cross-browser solution.

How to duplicate property in JS constructor function without changing original

3 Answers3