23

I thought objects are passed as reference. But when I delete b, it still exists in c. Please see this example:

This first part makes sense to me as its passed by reference:

var a = {b: {val:true}};

a.c = a.b;
a.b.val = 'rawr';

console.log(uneval(a)); // outputs: "({b:{val:"rawr"}, c:{val:"rawr"}})"

Now this part does not make sense to me:

var a = {b: {val:true}};

a.c = a.b;
a.b.val = 'rawr';
delete a.b;

console.log(uneval(a)); // outputs: "({c:{val:"rawr"}})"

so b property is deleted, but c property is holding the properties to what the referenced before delete. is this a bug in javascript?

edit: thanks all to the replies! so its not a bug, and this behavior is actually very good, it allows people to change "key"/"property" names while retaining the object! :)

4
  • Thanks Awal! I'll re-title it.
    – Noitidart
    Oct 27, 2014 at 16:31
  • 2
    P.S. If you're using a debugger, it's better just to use console.log(a) instead of console.log(uneval(a)) because it will show you properties and other useful debugging stuff anyway (firebug and chrome console).
    – soktinpk
    Oct 27, 2014 at 23:52
  • 1
    "I thought objects are passed as reference." JavaScript is always pass by value, just like Java.
    – newacct
    Oct 28, 2014 at 1:47
  • Thanks guys. Yeah about console.log you're right, but i did in uneval just to show output in this example. Thanks for the pass-by-value note.
    – Noitidart
    Oct 28, 2014 at 5:47

6 Answers 6

55

...I am late to the party? Here is my take on explaining it (Read the other answers as well, this is just to support those answers with a visual representation):

  1. Initialization of the empty object a with another object (value:true).

enter image description here

  1. Assigning the empty object a with a property b referring to the other object (value:true).

enter image description here

  1. Assigning the object a with a property c referring to the same object (value:true).

enter image description here

  1. Deletion of the key b, thus a.b no longer refers to the sub-object (value:true).

enter image description here

  1. Final representation of the main object a.

enter image description here

So we can easily see by visual representation how the sub-object was being preserved :)

5
  • 8
    This is great. I love visual representations.
    – Sacho
    Oct 27, 2014 at 14:37
  • This is real awesome thanks for this visual explanation! Can you add to the visual what happens when we delete both props of b and c. the subobject should disappear no?
    – Noitidart
    Oct 27, 2014 at 15:11
  • @Noitidart Yes, it would disappear. I would add the explanation later when I have time. Oct 27, 2014 at 15:24
  • 2
    And just a few edits later we have the whole Garbage collection process described with little pictures! (Just write GC-Magic on a cloud and let the object vanish)
    – Falco
    Oct 27, 2014 at 15:56
  • When I've tried to illustrate a GC graphically, I usually go with something vaguely pacman-like.
    – Frost
    Oct 28, 2014 at 13:49
32

No, this is not a bug in JavaScript.

What you are doing with a.c = a.b is that you are creating another link to the same object, meaning that both a.b and a.c are referencing the same sub-object {val: "rawr"}.

When you do delete a.b, you are not removing the sub-object, you are only removing the a.b property from a. This means that a.c will still reference the same object.

If you were to delete the a.c property as well, then the sub-object will vanish.

1
  • 3
    Thanks for this explanation Frost! My next question was how to remove that sub-object, and you answered that as well, if nothing is holding reference to that object (by deleting a.c) then it is totally gone. Thanks very much! This behavior is actually very good, it allows people to change "key"/"property" names while retaining the object! :)
    – Noitidart
    Oct 27, 2014 at 8:45
6

There are two things to note, first, as said in other answers, the delete keyword removes a property only for the object through which you go to access the property.

The second thing to note is that JavaScript does not pass by reference, ever. It always passes as a value, values are sometimes references.

For instance:

var a = {
   someObject: {}
};
var someObject = a.someObject;

someObject = 'Test';

console.log(a.someObject); // outputs {}

In a language which passes by reference this would probably cause an error because it often implies strong variable typing.

1
  • Thanks for the correction for pass by value that will help me a lot. This is a very good point you brought up and I was taking for granted by not thinking about it. Really appreciate this clarification.
    – Noitidart
    Oct 27, 2014 at 8:57
5

That's because:

The delete operator removes a property from an object. MDN Delete

The entry b that corresponds to the Object {val: true} is removed from a. The entry c in a still refers to this object. If you try deleting c.val or a.b.val, you can still see the effect cascading to the other.

What you're trying to do, i.e, deallocating data and expecting it to be cascaded across, doesn't happen in javascript. If you have a C++ background, consider thinking of all javascript objects as being reference counted. Ican remove a reference to it (i.e, the entry that 'points' to this object), but I can't remove the object itself. That is the pure prerogative of the javascript engine.

2
  • Thanks Sharadh that was a very interesting point: how deleting the val property from a also is same in b.
    – Noitidart
    Oct 27, 2014 at 8:48
  • Sure, anytime. It's the same as your example. Like changing the value of the key val in the Object to rawr, here we're deleting the key from the object itself.
    – Sharadh
    Oct 27, 2014 at 8:50
5

With this line, you think c points to b:

a.c = a.b;

but actually both c and b point to {val:true} object, so if you delete b, the object remains. you can think simply that both c and b are just "label" is sticked on {val:true} object

1
  • Thanks yelliver! The different words you used really enforce what other people are saying. I appreciate these mutiple solutions very much!
    – Noitidart
    Oct 27, 2014 at 8:56
4

No, it's not a bug.

The delete command doesn't delete the object that that the property is referencing, it only deletes the property. If the object is referenced from somewhere else (the other property in this case), the object is still alive.

This is the same as if you have two variables pointing to the same object, and change the value of one variable:

var a = { val: true };
var b = a;
a = null;
console.log(b.val); // b still has a reference to the object
1
  • Thanks Guffa for your alternative example to explain this, I really appreciate it!
    – Noitidart
    Oct 27, 2014 at 8:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.