Deleting original object while preserving a copy of it in JavaScript

Question

I tested how JavaScript Objects behave in Chrome Console. Is it safe to assume this will work anywhere ? :

a = new Object()
>> Object {}
b = a
>> Object {}
a.boo = "Yiss!"
>> "Yiss!"
b
>> Object {boo: "Yiss!"}
a = new Object()
>> Object {}
b
>> Object {boo: "Yiss!"}
a = b
>> Object {boo: "Yiss!"}
delete a.boo
>> true
b
>> Object {}
a
>> Object {}
delete a
>> true
a
>> Uncaught ReferenceError: a is not defined
b
>> Object {}

TL;DR

I just want to be clear about if the following statement is true: Modifications made in 1 of many copies of an object are available on all copies of that object. If a copy or the original is deleted or replaced by a new object, it doesn't impact other copies.

you have copies of the same address, so they all point to the same object — Prabhu Murthy, Dec 12 '14 at 15:50
The term is clone, http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-an-object... tl;dr: var b = JSON.parse(JSON.stringify(a)); don't use $.clone() because it's only for DOM objects. — Steven Lacks, Dec 12 '14 at 15:51
Yeah, I know about clone, I just wasn't 100% clear on the "non-cloned" behavior. — pyronaur, Dec 12 '14 at 16:02

score 4 · Accepted Answer · answered Dec 12 '14 at 15:50

All that delete does is remove a property from an object. It does not actually do anything to the value of the property.

a and b here are equivalent to window.a and window.b because they are global, and window is the global object. delete a is therefore equivalent to delete window.a which simply removes the a property from the window object.

Since variables in JavaScript don't store objects but rather references to objects, all that delete a does is remove a variable that contains a reference to the same object that continues to be referenced by b.

So, your question itself is flawed because it is based on a false understanding of object semantics in JavaScript:

If a copy or the original is deleted or replaced by a new object, it doesn't impact other copies.

There is no such this as a "copy" or an "original" in this context. The object is not being copied at all. You simply have one object that is referenced by multiple variables. And, further, there is no concept of explicitly "deleting an object" in JavaScript.

Thanks, I needed that clarity. Never thought of variables being attached to window. What about if they were wrapped in a self-invoking function and are not explicitly attached to the window global ? Does that change anything at all ? — pyronaur, Dec 12 '14 at 16:08
`delete` always refers to a property. In `(function () { var x = {}; delete x; }());`, `delete x` still means `delete window.x`. The local variable `x` will continue to refer to the object after the `delete` statement because `delete` never operates directly on local variables. ([See a demo](http://jsfiddle.net/nrk62bce/)) — cdhowie, Dec 12 '14 at 16:14
Note that `delete` can delete properties of objects referred to by local variables (`var x = {foo: "bar"}; delete x.foo;`) but it never deletes local variables themselves, because local variables are not properties of an object. — cdhowie, Dec 12 '14 at 16:18

apsillers · Answer 2 · 2014-12-12T16:06:35.490

This behavior is completely normal and should be expected from all JavaScript environments. Let's walk through it step by step.

Create a new object and store it in a:

a = new Object()
>> Object {}

Make b refer to the same single object that b does:

b = a
>> Object {}

(You seem to think this "copies" the object somehow. This is not correct: there is still only one object so far, but you can refer to it with a and b. You've given one single object two different variable names.)

Modify the object referred to by a (remember this is the same single object referred to by b as well) to have a boo property:

a.boo = "Yiss!"
>> "Yiss!"

Confirm that object referred to by b (which is the same as the one referred to by a) has changed:

b
>> Object {boo: "Yiss!"}

Make a refer to a new object:

a = new Object()
>> Object {}

b still refers to the first object:

b
>> Object {boo: "Yiss!"}

Make a refer to the original object again:

a = b
>> Object {boo: "Yiss!"}

Remove the boo property from the original object:

delete a.boo
>> true

Confirm that the boo property has been removed from the object referred to by b (which is the same as the object referred to by a):

b
>> Object {}

Confirm that the boo property has been removed from the object referred to by a (which is the same as the object referred to by b):

a
>> Object {}

Remove the variable name "a" from the global namespace:

delete a
>> true

The variable name "a" no longer exists:

a
>> Uncaught ReferenceError: a is not defined

The variable b still refers to the original object:

b
>> Object {}

You seem to think delete destroys values. It does not. Instead, it removes properties from objects. Since global variables are properties on the global object, they can be removed as well (i.e., here, a is the same as window.a).

score 0 · Answer 3 · answered Dec 12 '14 at 15:52

Objects in JavaScript are [almost] always passed by reference. In your case, a and b are the same object.

delete operator does not delete objects or variables, but properties. In your example, you define a and b in global scope - so they are treated as window properties. It's only reason behind delete working as you expect.

Deleting original object while preserving a copy of it in JavaScript

TL;DR

3 Answers3