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 · Accepted Answer · 2021-04-16 00:16:41Z

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, 2021 at 0:16

answered Apr 16, 2021 at 0:09

nyarthan

5355 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Unmitigated Over a year ago

It is not an operator.

nyarthan Over a year ago

thanks for pointing it out I will edit my answer

auto Over a year ago

Thanks. I've never heard of spread syntax

Unmitigated · Accepted Answer · 2021-04-16 00:08:11Z

0

You can use spread syntax for a shallow copy.

this.updatableData = [...data];

Or Array#slice:

this.updatableData = data.slice();

answered Apr 16, 2021 at 0:08

Unmitigated

91.5k12 gold badges103 silver badges109 bronze badges

Comments

Ashot · Accepted Answer · 2021-04-16 00:32:12Z

0

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.

answered Apr 16, 2021 at 0:32

Ashot

1,3091 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to duplicate property in JS constructor function without changing original

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related