Strange behavior when deleting object property after copying object

Question

  myObj = {
    prop1: 'alpha',
    prop2: 'beta',
    priceUpdatedOn: new Date()
  };

  myObjQuery = myObj;
  delete myObjQuery.priceUpdatedOn;

console.log(myObj);
console.log(myObjQuery);

When I do that, the priceUpdatedOn gets deleted from myObj as well for some reason. Any idea why?

Try this thread: [Javascript cloned object looses its prototype functions](http://stackoverflow.com/questions/10151216/javascript-cloned-object-looses-its-prototype-functions) — RobG, Apr 14 '12 at 13:29

Matt Greer · Answer 1 · 2012-04-14T13:26:23.253

4

This is because myObjQuery and myObj are the same object. When you do myObjQuery = myObj, you aren't making a copy of the object itself, rather a copy of a reference to it. You never directly manipulate objects in JavaScript, instead always through a reference.

EDIT: Cloning objects in JavaScript is not straightforward. Most libraries like jQuery or Ext have a means to do it. To do it manually, something like this works.

var clone = {};
for(var prop in myObj) {
   if(myObj.hasOwnProperty(prop)) {
       clone[prop] = myObj[prop];
   }
}

Keep in mind that is a shallow copy. To do a deep copy, you need to detect if the properties themselves are objects and recursively clone them too. Best to use a library that does all this for you. And also keep in mind this is missing lots of edge cases, and weird things like the object's constructor property. JavaScript is really messy here.

edited Apr 14 '12 at 13:26

answered Apr 14 '12 at 13:20

Matt Greer

60,826
17
123
123

So how do I duplicate the object? – Shamoon Apr 14 '12 at 13:20
@Shamoon -- I editted my answer and added how to duplicate an object in JS – Matt Greer Apr 14 '12 at 13:23
1

@jimw—there is no point referencing a question that doesn't answer this question. The accepted answer there won't tell the OP much about copying or cloning objects. – RobG Apr 14 '12 at 13:25
1

@Shamoon: Instead of duplicating it, you may be better off using `Object.create` to set the original as the `prototype` of the new *(depending on your actual situation)*. – Apr 14 '12 at 13:25
1

@amnotiam—and there you have the issue—what does the OP actually mean by "duplicate the object"? – RobG Apr 14 '12 at 13:27

score 3 · Accepted Answer · edited May 23 '17 at 11:56

3

Javascript works with references. myObjQuery and myObj are references to the same data in memory. Altering property of one will alter the copy in memory, and hence - all references to it. You have to clone the object instead

edited May 23 '17 at 11:56

Community

1
1

answered Apr 14 '12 at 13:21

Maxim Krizhanovsky

26,265
5
59
89

score 1 · Answer 3 · answered Apr 14 '12 at 13:22

With that command

myObjQuery = myObj;

you do not create a copy of the object, but just a copy of the reference to the object. So afterwards both myObjQuery and myObj still point to the same object. If you delete a property of that object, both references will reflect that change.

score 1 · Answer 4 · edited May 22 '14 at 14:57

1

Because myObjQuery is just another name for myObj. Modifying one will reflect on the other.

Refer to: http://docstore.mik.ua/orelly/webprog/jscript/ch11_02.htm

edited May 22 '14 at 14:57

BenMorel

34,448
50
182
322

answered Apr 14 '12 at 13:22

Annie Lagang

3,185
1
29
36

Strange behavior when deleting object property after copying object

4 Answers4