Creating new object from another object without persisting changes

Question

I'm using an Array as a container for some basic boilerplate objects which can be copied and added to another Array and then modified. The problem is when I assign the new array ownership of the object any changes persist down to the original object (which shouldn't change).

An example:

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = [];

notOriginal.push(originals[0]);

// THIS GIVES ME - notOriginal = [{ name: "One", value: 1 }];

notOriginal[0].name = "Uno";

// THIS RESULTS IN - originals = [{ name: "Uno", value: 1 },...];

I'm trying to keep the "originals" variable the same - it shouldn't change.

I've googled quite a bit and tried some things but not sure where to find a solution.

Specifically this is happening in VueJS whereas the object is in my data()

Possible duplicate of JavaScript - copy array of objects and make changes without modifying original array — yuriy636
– yuriy636, Commented Jan 25, 2018 at 18:09

brk · Accepted Answer · 2018-01-25 18:15:46Z

3

Make a deep copy of it using JSON.parse & JSON.stringify

var originals = [{
  name: "One",
  value: 1
}, {
  name: "Two",
  value: 2
}, {
  name: "Three",
  value: 3
}];

var notOriginal = [];

notOriginal.push(JSON.parse(JSON.stringify(originals[0])));



notOriginal[0].name = "Uno";
console.log(originals)

answered Jan 25, 2018 at 18:15

brk

50.3k10 gold badges59 silver badges85 bronze badges

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

Comments

Chris Riebschlager · Accepted Answer · 2018-01-25 18:08:19Z

1

You can use Object.assign to make a copy of the object.

var originals = [{
  name: "One",
  value: 1
}, {
  name: "Two",
  value: 2
}, {
  name: "Three",
  value: 3
}];

var notOriginal = [];

notOriginal.push(Object.assign({}, originals[0]));

notOriginal[0].name = "Uno";

console.log(originals);

answered Jan 25, 2018 at 18:08

Chris Riebschlager

1,3331 gold badge8 silver badges12 bronze badges

Comments

zfrisch · Accepted Answer · 2018-01-25 18:10:28Z

1

Objects are passed by reference.

In order to copy an object you can use Object.assign({}, obj) which will return a new object with the duplicated properties within obj.

var originals = [{ name: "One", value: 1 }, { name: "Two", value: 2 }, { name: "Three", value: 3 }];

var notOriginal = originals.map(obj => Object.assign({}, obj));

notOriginal[0].name = "bart";
console.log(originals[0], notOriginal[0]);

answered Jan 25, 2018 at 18:10

zfrisch

8,6901 gold badge26 silver badges39 bronze badges

Comments

Jon Walker · Accepted Answer · 2018-01-25 18:47:26Z

0

I found a solution by using jQuery.extend(true, {}, myObj); but would still like to know what this is called so I can understand this reactivity better.

Thanks

answered Jan 25, 2018 at 18:47

Jon Walker

1431 silver badge8 bronze badges

Collectives™ on Stack Overflow

Creating new object from another object without persisting changes

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related