JavaScript's hasOwnProperty() method

A common question asked by students who are learning JavaScript is: “what is the purpose of the hasOwnProperty() method?”

This is a good question. It can be confusing why you would need to use this method, and what it actually does. We will look at what the method does, why you need to use it, and what are some ways to avoid having to use it.

What does `hasOwnProperty()` do?

For this section, you might find it helpful to jump over to the Mozilla Developer Network web site and review the documentation. So, what does the hasOwnProperty() method do? Simply put, it checks if a property of an object belongs to the specified object, or is inherited (via the prototype chain). The method is defined by JavaScript on the window.Object object, so it is available to all objects in JavaScript. Almost everything is an Object (inherited from window.Object) in JavaScript:

Strings
Regular Expressions
Arrays
Numbers
Boolean
Dates
Functions
And, of course, objects

Who said JavaScript isn’t an object-orientated language?

Why use `hasOwnProperty()`?

The main reason why you need to use hasOwnProperty() is when using the for-in iterative loop in JavaScript. Consider the following example:

var people = ['Bonnie', 'Isaac', 'Bridget', 'Ted', 'Jamey'];
for (var person in people) {
  window.alert('Hello, ' + person);
}

In the above example, I am defining an array (which is an object) of people, then iterating over each person. What you might easily forget is that we might have other code we created ourselves, or other code included in our page, that is adding properties to the Array object. Our for-in loop will iterate over all of the properties of the people object, whether a direct decedent of the people array, or an inherited property. The use of hasOwnProperty() prevents the loop from enumerating over any inherited properties on the object (in this case, the array of strings containing persons names). This is considered a best practice when using the for-in loop for JS objects since you can have inherited members that are child objects that you do not want to iterate over. This is common when using prototype-based inheritance.

For example, let’s say you wanted to add an each() iterative helper function to all arrays in JS. This might be a common solution that a framework would implement, though it is generally advisable against. But, let’s go ahead and do it anyways, for the sake of learning. Check out the code below.

Array.prototype.each = function (callback) {
  for (var i = 0; i < this.length; i++) callback(this[i]);
};
var people = ['Bonnie', 'Isaac', 'Bridget', 'Ted', 'Jamey'];
for (var person in people) {
  window.alert('Hello, ' + people[person]);
}
people.each(function (i) {
  window.alert(i);
});

Here, I am first declaring a new method called each, which is added to the Array object via it’s prototype object. Then, I am declaring the array of people names like before. Next, I do a traditional for-in loop without checking the result of hasOwnProperty(). You will notice that there is a fifth alert, which is the “each” property (which happens to be a function). Finally, I am using the each function that I declared on the global Array object to alert out the five names.

In this case, the for-in loop is syntactically correct, but the user will be very confused when the sixth alert is a bunch of code. To prevent this, we would add the check of hasOwnProperty() to prevent the inherited “each” property from being displayed to the user.

var people = ['Bonnie', 'Isaac', 'Bridget', 'Ted', 'Jamey'];
for (var person in people)
  if (people.hasOwnProperty(person)) {
    window.alert('Hello, ' + people[person]);
  }

If you want to play with this some more, I created a fiddlerJs for this: http://jsfiddle.net/blove/zGUwK/

Avoid `hasOwnProperty()`

This is actually quite simple: don’t use the for-in iterator. Use the classic for loop instead:

var people = ['Bonnie', 'Isaac', 'Bridget', 'Ted', 'Jamey'];
for (var i = 0; i < people.length; i++) {
  window.alert('Hello, ' + people[i]);
}

This might seem like a little more work, but it avoids the potential error exposed by using for-in when looping over arrays in JavaScript.

What does hasOwnProperty() do?

Why use hasOwnProperty()?

Avoid hasOwnProperty()

What does `hasOwnProperty()` do?

Why use `hasOwnProperty()`?

Avoid `hasOwnProperty()`