for..in and hasOwnProperty
The hasOwnProperty method lets you know if a property is directly on an instance of an object or inherited from its prototype chain.
Consider the following
function ObjWithProto() {
this.foo = 'foo_val';
}
ObjWithProto.prototype = {bar: 'bar_val'};
var dict = new ObjWithProto();
dict.foobar = 'foobar_val';
I.e., you have an Object dict
with properties foo
and foobar
that also inherits a property bar
from its prototype chain.
Now run it through (a modified version of) your code:
function forEach(dict) {
var key;
for (key in dict) {
if (dict.hasOwnProperty(key))
console.log('has', key, dict[key]);
else
console.log('not', key, dict[key]);
}
}
forEach(dict);
You will see
has foo foo_val
has foobar foobar_val
not bar bar_val
This lets you separate properties that an object has itself and those it has inherited (which are usually methods that aren't relevant to the loop).
Furthermore, if you now do dict.bar = 'new_bar_val';
, the last result will change to has bar new_bar_val
, letting you distinguish even between properties of the same name as those inherited.
Every object in JavaScript is a dictionary. This means that "toString" and every other method is a key of every Object:
var myObj = {};
console.log(myObj["toString"]);
But this function is inherited from Object class, so hasOwnProperty tells you if this key is owned by the dictionary or if it is inherited.
"toString" in myObj; // true
myObj.hasOwnProperty("toString") // false
Because if you don't, it will loop through every property on the prototype chain, including ones that you don't know about (that were possibly added by somebody messing with native object prototypes).
This way you're guaranteed only the keys that are on that object instance itself.