I was directed to MDN's for..in page when it said, "for..in Iterates over the enumerable properties of an object."
Then I went to the Enumerability and ownership of properties page where it said "Enumerable properties are those which can be iterated by a for..in loop."
The dictionary defines enumerable as countable, but I can't really visualize what that means. Could i get an example of something being enumerable?
Well, whether a property is considered enumerable or not is based on its own [[Enumerable]]
attribute. You can view this as part of the property's descriptor:
var descriptor = Object.getOwnPropertyDescriptor({ bar: 1 }, 'bar'); console.log(descriptor.enumerable); // true console.log(descriptor.value); // 1 console.log(descriptor); // { value: 1, writable: true, enumerable: true, configurable: true }
> var descriptor = Object.getOwnPropertyDescriptor({ bar: 1 }, 'bar'); undefined > undefined > console.log(descriptor.enumerable); // true true undefined > console.log(descriptor.value); // 1 1 undefined > undefined > console.log(descriptor); { value: 1, writable: true, enumerable: true, configurable: true } undefined > // { value: 1, writable: true, enumerable: true, configurable: true } undefined >
A for..in
loop then iterates through the object's property names.
var foo = { bar: 1, baz: 2}; for (var prop in foo) console.log(prop); // outputs 'bar' and 'baz'
> var foo = { bar: 1, baz: 2}; undefined > undefined > for (var prop in foo) ... console.log(prop); // outputs 'bar' and 'baz' bar baz undefined
But, it only evaluates its statement -- console.log(prop);
in this case -- for those properties whose [[Enumerable]]
attribute is true
.
This condition is in place because objects actually have many more properties, especially those from inheritance:
> console.log(Object.getOwnPropertyNames(Object.prototype)); [ 'constructor', 'toString', 'toLocaleString', 'valueOf', 'hasOwnProperty', 'isPrototypeOf', 'propertyIsEnumerable', '__defineGetter__', '__lookupGetter__', '__defineSetter__', '__lookupSetter__' ] undefined > // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", /* etc. */]
console.log(Object.getOwnPropertyNames(Object.prototype)); // ["constructor", "toString", "toLocaleString", "valueOf", "hasOwnProperty", "isPrototypeOf", "propertyIsEnumerable", /* etc. */]
Each of these properties still exists on the object:
console.log('constructor' in foo); // true console.log('toString' in foo); // true // etc.
But, they're skipped (or "not counted") by the for..in
loop because they're non-enumerable.
var descriptor = Object.getOwnPropertyDescriptor(Object.prototype, 'constructor'); console.log(descriptor.enumerable); // false