clone a decoupled version of object in JavaScript

Question

I'm trying to clone and object, then make changes to the original object and do some tests encase the test fails restore the clone back.

Currently I've tried _.clone (underscore), angular.extend, angular.merge, angular.copy, Object.create, Object.assign, JSON.parse(JSON.stringify(o)), but somehow my changes in the original object gets reflected back into the clone.

_.clone does shallow copy of the object, but you need a deep copy. Try _.cloneDeep instead. — František Žiačik
– František Žiačik, Commented Dec 15, 2016 at 0:33
unfortunately we are not using lodash, i've tried to use angular equivalent but all of them reflect the change — Ash
– Ash, Commented Dec 15, 2016 at 0:35

Joe Karlsson · Accepted Answer · 2016-12-15 01:27:02Z

1

You can shallow copy an object in vanilla JavaScript using Object.assign.

// Shallow copy an object in vanilla JS
let oldObj = {
  name: 'Joe',
  favColor: 'Green',
}

// Shallow copy oldObj to the newObj using assign
var newObj = Object.assign({}, oldObj);

// Changes made to the new object are not reflected in the new object
newObj.favFood = 'pizza';
console.log(oldObj.favFood); // undefined

To perform a "deep copy", you can use JSON.parse(JSON.stringify(a)).

let oldObj = {
  name: 'Joe',
  favColor: 'Green',
  favPizza: {
    cheese: true,
    pepperoni: false,
  },
};

// Deep copy an object using JSON.parse(JSON.stringify(a))
let newObj = JSON.parse(JSON.stringify(oldObj));

// Changes made to the new object are not reflected in the new object
newObj.favPizza.sausage = true;
console.log(oldObj.favPizza.sausage); //undefined

Reference:

Object.assign() - MDN

edited Dec 15, 2016 at 1:27

answered Dec 15, 2016 at 0:46

Joe Karlsson

385 bronze badges

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

2 Comments

Ash Over a year ago

I did { originalPizza : Object.assign({}, pizza) }, but when i made changes to pizza toppings it got reflected into original pizza.

Joe Karlsson Over a year ago

@ArashKiani - I added an example for performing both a "shallow copy" and a "deep copy." I hope it helps!

Collectives™ on Stack Overflow

clone a decoupled version of object in JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related