JavaScript Objects Deep Dive: Enumerating Through Object Properties with for/in Loop

Instead of testing to see if a property exists in the object you could just use the for/in loop to iterate through all the enumerable properties in the object.  Enumerable properties are the properties that owned by the object.  In JavaScript there are always two objects that are created with each object, one hidden object that's always there is the prototype object.  It's like the blueprint for the object you just created.  The owned properties are the properties that explicitly created with your object. The prototype properties are what's called inherited properties. So if we use the for/in loop we  will get the owned properties and the prototype properties.

So to use the for/in loop to iterate through the object let's use our product object again.

        var product = new Object();

        product.name = "Chai";
        product.category = "Tea";
        product.country = "India";
        product.supplier = {
            name: "ACME Tea Of India",
            location: "New Delhi"
        };

Now type in the following to loop through the object with the for/in loop and outputs the property name and property value to the console

for (prop in product)
console.log(prop + ": " + product[prop]);

As you can see we only got through the first level of the properties, since supplier is nested object how do we get the properties for it?  You would think it's as easy as changing the code to have nested for/in loop would do the trick.


Like this


But as you can see that's not the case, instead you get the characters of the property names.  As you can see the supplier property is actually an object itself.