Understanding the in keyword in Javascript

Question

In my attempt to truly understand Javascript, instead of copying and pasting the Javascript googler, I look at the Eloquent Javascript E-book and I happen to cross the following example:

var chineseBox = {}; chineseBox.content = chineseBox; show("content" in chineseBox); show("content" in chineseBox.content); 

Surprisingly, both of them print true . The book itself states: "The in operator can be used to check whether an object has a specific property. It creates a logical value."

I understand that show("content" in chineseBox); looking for the content property that it has, its chineseBox value. However, why does the second show() ?

To check further, I tried:

 show("content" in chineseBox.content.content); //true show("contents" in chineseBox.contents.content); //type error: undefined show("contents" in chineseBox.content.contents); // invalid "in" operand 

The question is basically, the variable chineseBox {} does not have a content property ... or does it?

Answer 1

The key to this line is:

 chineseBox.content = chineseBox; 

This gives chineseBox link to itself. So:

 show(chineseBox.content === chineseBox); 

You should see that this also outputs true .

Therefore, 'content' is in chineseBox , as well as chineseBox.content (and chineseBox.content.content , etc.), because they are all the same objects that have the content property.

---

Look at your second and third examples. Why does one give a TypeError and the other complains about an invalid in operand?

In the second example, you have:

 show("contents" in chineseBox.contents.content); 

In order for the in operator to check whether the specified property ("content s ") is specified in the specified object, you first need to evaluate what the object is. You get a type error because chineseBox.contents is undefined and therefore you cannot access the content property because there is no access to the object.

Compare this with a third example:

 show("contents" in chineseBox.content.contents); 

Now the in operator will at least be further than in the second example. The chineseBox.content property exists, and access to its contents s gives you undefined . So there are no errors there. But then you get an error with the in keyword because you cannot check if the property is in undefined .

In other words, in the second example, this is similar to how you ask: "Are there any elves in Santa's house?" Santa does not exist, so there is no place like "Santa House". In the third example, this is more like what you ask: "Where is the oval office in Obama's brown house?" Obama exists, but he does not have a brown house.

Answer 2

 chineseBox.content = chineseBox; 

Due to self-reference, note that chineseBox is the same object as chineseBox.content . The meaning of chineseBox , chineseBox.content , chineseBox.content.content , chineseBox.content.content.content , ad infinitum, all refer to the same object.

 show("content" in chineseBox); show("content" in chineseBox.content); show("content" in chineseBox.content.content); show("content" in chineseBox.content.content.content); show("content" in chineseBox.content.content.content.content); show("content" in chineseBox.content.content.content.content.content); 

(In your tests, notice the difference between content and contents with 's'.)