Should hasOwnProperty still be used with for..in statements

Question

There are a lot of blogs saying that a hasOwnProperty check should be used whenever the for..in loop is used, but I don't understand why that's the case. Both with and without the check we get the same results.

Check out this fiddle.

Answer 1

Without hasOwnProperty you don't know whether the property is a native property of your object or inherited from it's prototype.

Your modified fiddle

var obj1 = {a:"10",b:"20"};

Object.prototype.c = "prototype:30";

var i;
for(i in obj1) {
    document.getElementById("div1").innerHTML += obj1[i]+" ";
}
// result 10 20 prototype:30

for(i in obj1) {
    if(obj1.hasOwnProperty(i)) {
        document.getElementById("div2").innerHTML += obj1[i] +" ";
    }          
}
// result 10 20
​

In this case obj1 inherits the property c from it's Prototype Object and you would erroneously list it in your first loop.

Answer 2

If you're creating a basic object with {}, or getting it from JSON using JSON.parse, then hasOwnProperty is globally useless.

But if you're extending a "class" (using prototype), then it helps you to know if you're accessing your "own properties" (direct properties, including direct functions).

Note that a basic object has at least one (not direct) property, that you may discover with console.log({}); or console.log({}.toString) but it's not enumerable and not seen in a for... in loop :

A for...in loop does not iterate over non–enumerable properties. Objects created from built–in constructors like Array and Object have inherited non–enumerable properties from Object.prototype and String.prototype that are not enumerable, such as String's indexOf method or Object's toString method. The loop will iterate over all enumerable properties of the object or that it inherits from its constructor's prototype (including any which overwrite built-in properties).