Question

UPDATED FROM ORIGINAL QUESTION

I am trying to learn what a javascript object ‘looks like’ by viewing it’s properties like so:

//create object without prototype
var obj = Object.create(null);
//add properties
obj.a = 3;
obj.b = 76.3;
obj.c = { a : 23 , b : true , c : 1};
obj.s = "ABC!";
//output string
var outStr = new String();

for(var prop in obj)
{
    outStr += "Property " + prop + " is a " + typeof(obj[prop]) + " with value " + obj[prop] + "\n";

    for(var prop1 in obj[prop])
    {
        outStr += "Property " + prop1 + " is a " + typeof(obj[prop][prop1]) + " with value " + obj[prop][prop1] + "\n";
        for(var prop2 in obj[prop][prop1])
        {
            outStr += "Property " + prop2 + " is a " + typeof(obj[prop][prop1][prop2]) + " with value " + obj[prop][prop1][prop2] + "\n";
            for(var prop3 in obj[prop][prop1][prop2])
            {
                outStr += "Property " + prop3 + " is a " + typeof(obj[prop][prop1][prop2][prop3]) + " with value " + obj[prop][prop1][prop2][prop3] + "\n";
                for(var prop4 in obj[prop][prop1][prop2][prop3])
                {
                    outStr += "Property " + prop4 + " is a " + typeof(obj[prop][prop1][prop2][prop3][prop4]) + " with value " + obj[prop][prop1][prop2][prop3][prop4] + "\n";
                }
            }
        }
    }
}   

alert(outStr);

Which gives output:

Property a is a number with value 3
Property b is a number with value 76.3
Property c is a object with value [object Object]
  Property a is a number with value 23
  Property b is a boolean with value true
  Property c is a number with value 1
Property s is a string with value ABC!
  Property 0 is a string with value A
  Property 0 is a string with value A
  Property 0 is a string with value A
  Property 0 is a string with value A
  Property 1 is a string with value B
  Property 0 is a string with value B
  Property 0 is a string with value B
  Property 0 is a string with value B
  Property 2 is a string with value C
  Property 0 is a string with value C
  Property 0 is a string with value C
  Property 0 is a string with value C
  Property 3 is a string with value !
  Property 0 is a string with value !
  Property 0 is a string with value !
  Property 0 is a string with value !

Now this behaves exactly as I expect for every property except the String property obj.s = “ABC!”;

I understand that obj.s contains the properties (keys and values):

“0” = “A”

“1” = “B”

“2” = “C”

“3” = “!”

And from a previous answer (thank you very much @pimvdb and @deestan) I gather that because each of these property values are strings they too each contain the property key “0” which itself must then also contain the property key “0” etc, etc? which is why I am getting the additional lines written out for the string property.

So my question now becomes:

Should the type of value of all properties at some point eventually revert to a primitive type like number or boolean to stop this recursive chain? I am thinking of the memory that actually holds this object and when I started writting this small test script to ‘look’ at the object I basically wanted to see all the primitives and how the object stored them, but there can’t actually be an infinite allocation of string to string to string … I imagine that it is just stored as the string object with it’s 4 characters (or 5 if theres an end of string character too \0)

Answer 1

Maybe not an answer to the question as posted, but I consider this an answer to your actual problem: 🙂

Install Chrome and open the Javascript Console (CTRL+SHIFT+J). There you can create objects and inspect them visually from the Javascript debugger.

> x = "stringystringstring"
  "stringystringstring"
>

Then in the upper right, add x to “Watch Expressions” to inspect it.

As you can see, x as a string isn’t very interesting, so let’s make it more complex:

> x = { a: "b" }
|> Object
>

Refresh the Watch Expressions and expand x to see the object structure. It should look something like this:

v x: Object
    a: "b"
  v __proto__: Object
    |> __defineGetter__: function __defineGetter__()...
    |> __defineSetter__: function __defineSetter__()...
    ...
    |> valueOf: function valueOf() { [native code] }

What we learn from this is that the object x has one property, and a bunch of methods inherited from the Object prototype.

---

If you need to see all properties and methods accessible to e.g. strings, type "derp". in the console. After half a second, an autocomplete list showing all available properties should appear.