CODEWITHSUNDEEP
javascriptobject
BeetleTheNeato
BeetleTheNeato

Reputation: 389

Trouble understanding basic object workings in JavaScript

I'm learning JavaScript and there's an example in the book I'm using that I didn't understand. It's like this:

var chineseBox = {};
chineseBox.content = chineseBox;

Then the book lists two expressions and their values. First, "content' in chineseBox; that returns true. Then, the one I don't get, "content" in chineseBox.content which also returns true. I think it'd be more natural if the second expression evaluated to false, pointing to the empty chineseBox object defined earlier. Is there a reason to work like this? What are the practical implications of this feature? And how do I explore deeper levels of the object? Is chineseBox.content.content right?

Upvotes: 0

Views: 81

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1073968

I think it'd be more natural if the second expression evaluated to false, pointing to the empty chineseBox object defined earlier.

It's not empty anymore. As of chineseBox.content = chineseBox, it now has a property.

When you assign object references to things (variables, properties, etc.), the value stored is a reference to the object, not a copy of it. So both chineseBox (the variable) and chineseBox.content (the property) point to the same object, which has a property called content.

Let's throw some ASCII art at this:

var chineseBox = {};

That gives us:

+−−−−−−−−−−−−−−−−−−−−−−−+
| chineseBox (variable) |
+−−−−−−−−−−−−−−−−−−−−−−−+          +−−−−−−−−−−−−−−−+
| value                 |−−−−−−−−−>|    (object)   |
+−−−−−−−−−−−−−−−−−−−−−−−+          +−−−−−−−−−−−−−−−+
                                   |               |
                                   +−−−−−−−−−−−−−−−+

Now we do

chineseBox.content = chineseBox;

...and we have:

                                            /−−−−−−−−−−−\
+−−−−−−−−−−−−−−−−−−−−−−−+                   |           |
| chineseBox (variable) |                   v           |
+−−−−−−−−−−−−−−−−−−−−−−−+          +−−−−−−−−−−−−−−−+    |
| value                 |−−−−−−−−−>|    (object)   |    |
+−−−−−−−−−−−−−−−−−−−−−−−+          +−−−−−−−−−−−−−−−+    |
                                   |  content      |−−−−/
                                   +−−−−−−−−−−−−−−−+

There's just one object. There are two references pointing to it.

Upvotes: 3

user278064
user278064

Reputation: 10170

'content' in chineBox.content evaluates to true since content points to the original chineseBox object (chineseBox.content --> chineseBox).

chineseBox.content.content, chineseBox.content.content....content are all valid, because you are referring to the same object.

Upvotes: 0

paulslater19
paulslater19

Reputation: 5917

chineseBox.content = chineseBox; means that chinesesBox.content points back to chineseBox. So yes, you can go chineseBox.content.content.content etc, because each time you're going back to the root element

Upvotes: 0

Matt
Matt

Reputation: 75307

chineseBox.content is a reference to chineseBox; and it's important that it's a reference, as it means any future changes to chineseBox are also visible in the chineseBox.content reference.

When you set chineseBox.content to chineseBox, the chineseBox object is indeed empty; however because chineseBox is a reference, as soon as you set the content attribute, it updates to reflect that.

See chineseBox.content === chineseBox // true

Upvotes: 1

Related Questions