Nested arrays in JavaScript

Question

Looking at the following code, does theme[sprite].img get nested inside result[definition].data (as theme[sprite].img is inside theme[sprite]) as well as .img becoming its own element in result[definition]?

result[definition].data = theme[sprite];
result[definition].img = theme[sprite].img;

And if that is the case, what would happen if result[definition].data.img was deleted, would that also delete result[definition].img and even theme[sprite].img?

Thanks.

Answer 1

If you delete result[definition].data.img, then theme[sprite].img will be deleted too, because result[definiton].data and theme[sprite] are exactly the same single object. result[definition].img will retain its value beacuse result[definition] is separate object that have in its .img property copy of .img from another object.

This is not related in any way to nesting though. You simply reference the same object.

• Nate: Why is 'result[definition].img' a copy? Isn't it a reference to the same object as 'theme[sprite].img;'?
• Oleg V. Volkov: If img is object, then yes. But you never modify object stored in img, you only modify (delete property) object that is referenced by result[definition].data and theme[sprite]. You do not touch object that might be stored in .img in any way.
• Nate: I see. For some reason I thought that if and object that contained a reference to another object was deleted, then that contained referenced object would also be deleted. Thanks

Answer 2

if result[definition].data.img was deleted, would that also delete result[definition].img...

No. Objects are reference types. While the deletion will be observed from theme[sprite] , it will not be observed from result[definition].

Because theme[sprite] and result[definition].data are references to the same object, any changes made to that object are observable from any reference to it.

But because result[definition].img is a reference to a different object that happens to be referenced by the other, it is an entirely unique reference, and isn't affected by what happens in the other object.

---

 +-----------+ +-----------+
 | | sprite | |
 theme | |-------->| |\ v---deleting this reference...
 | | | | \
 +-----------+ +-----------+ \ img +-----------+
 ^ \ | |
 / \----> | |
 / | |
 / +-----------+
 definition / ^
 / /
 +-----------+ / /
 | | / /
result | |-------/ img /
 | |----------------------------------/
 +-----------+
 ...doesn't affect this one-----------^
 and vice versa

If you delete one of the img properties, the other stays intact.

• Nate: Nice diagram, though it does make it look like the object attached to sprite/definition belongs to sprite, where (correct me if I'm wrong) the object is equally belonging to definition. I understand there is only so much that can be done with ascii diagrams :) Thanks
• cliffs of insanity: @Exceii: Good point. I may try to tweak it a bit as an exercise in my markdown diagram skills. :) But you're right, the rightmost object is no more or less owned by one object than by another. They're identical references.

Answer 3

The answers from Oleg and Cliffs are correct. However, I thought it might be useful, for the purposes of visualization, to see what these objects are actually shaped like:

var definition = "Foo",
 sprite = "Bar",
 result = {},
 theme = {}
;
result[ definition ] = {}
// => result == { Foo : {} }
theme[ sprite ] = { img : "BAZ" }
// => theme == { Bar : { img : "BAZ" } }
result[ definition ].data = theme[ sprite ];
// => result == { Foo : {
// data : { img : "BAZ" }
// }
// }
result[ definition ].img = theme[ sprite ].img;
// => result == { Foo : {
// data : { img : "BAZ" },
// img : "BAZ"
// }
// }
delete result[ definition ].data.img;
console.log( result.[ definition ].data.img );
// => undefined
console.log( theme[ sprite ].img );
// => undefined
console.log( result[ definition ].img
// => "BAZ"