Is there a benefit to use "hasOwnProperty()" when iterating through object keys in JavaScript

Question

I'm trying to understand the goal of using hasOwnProperty() check when iterating through object keys. As I know, the iteration will be executed for every object property (not more, not less) in both cases: with hasOwnProperty() or without. For example, in code below results with hasOwnProperty() check and without are the same:

const obj = {
  prop1: [],
  prop2: {},
  prop3: "",
  prop4: 0,
  prop5: null,
  prop6: undefined
}

const resultWithHasOwnProperty = [];
const resultWithoutHasOwnProperty = [];

for(key in obj) {
  if(obj.hasOwnProperty(key)) {
    resultWithHasOwnProperty.push(obj[key])
  }
}

for(key in obj) {
  resultWithoutHasOwnProperty.push(obj[key])
}

console.log("Result WITH hasOwnProperty check: ", resultWithHasOwnProperty);
console.log("Result WITHOUT hasOwnProperty check: ", resultWithoutHasOwnProperty);

So my question is: why and when should we use hasOwnProperty() check?

I'll rephrase my question: without hasOwnProperty() check we will always iterate through all existing properties anyway?

Notice, this question is not really a duplicate.

Possible duplicate of [Javascript what is property in hasOwnProperty?](https://stackoverflow.com/questions/9396569/javascript-what-is-property-in-hasownproperty) — samnu pel, Sep 29 '17 at 00:56
I'll rephrase my question: without `hasOwnProperty()` check we will always iterate through all existing properties anyway? — P.S., Sep 29 '17 at 00:58
Good article here: http://adripofjavascript.com/blog/drips/the-uses-of-in-vs-hasownproperty.html — jmargolisvt, Sep 29 '17 at 00:58
See [Can I finally let `hasOwnProperty()` die in for loops?](https://stackoverflow.com/q/45014347/1048572) — Bergi, Sep 29 '17 at 01:40
you _almost never_ need to use `.hasOwnProperty()`. jQuery manages perfectly well (and intentionally so) without it. — Alnitak, Sep 29 '17 at 09:56

Duc Filan · Accepted Answer · 2017-09-29T01:05:03.090

The docs indicate that:

The hasOwnProperty() method returns a boolean indicating whether the object has the specified property as own (not inherited) property.

The hasOwnProperty method ensure that the property you are checking is directly on an instance of an object but not inherited from its prototype chain. If you don't check, it will loop through every property on the prototype chain.

const obj = {
  prop1: [],
  prop2: {},
  prop3: "",
  prop4: 0,
  prop5: null,
  prop6: undefined
}

obj.prototype = {foo: 'bar'};

P/s: NOTE that:

JavaScript does not protect the property name hasOwnProperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasOwnProperty to get correct results:

var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // always returns false

So you need to use:

Object.prototype.hasOwnProperty.call(foo, 'bar');

Cool, short and clear! I'll accept your answer after timeout — P.S., Sep 29 '17 at 01:03

Is there a benefit to use "hasOwnProperty()" when iterating through object keys in JavaScript

1 Answers1