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.

Oleg V. Volkov · Accepted Answer · 2012-05-20 14:45:04Z

5

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.

answered May 20, 2012 at 14:45

Oleg V. Volkov

22.6k4 gold badges49 silver badges68 bronze badges

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

3 Comments

Nate Over a year ago

Why is 'result[definition].img' a copy? Isn't it a reference to the same object as 'theme[sprite].img;'?

Oleg V. Volkov Over a year ago

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 Over a year ago

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

cliffs of insanity · Accepted Answer · 2012-05-20 15:40:45Z

3

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.

edited May 20, 2012 at 15:40

answered May 20, 2012 at 14:52

cliffs of insanity

3,7041 gold badge18 silver badges18 bronze badges

2 Comments

Nate Over a year ago

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 Over a year ago

@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.

Jordan Running · Accepted Answer · 2012-05-20 15:07:55Z

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"

Collectives™ on Stack Overflow

Nested arrays in JavaScript

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related