Understanding the JavaScript hasOwnProperty() Method

The hasOwnProperty() method in JavaScript is vital for differentiating between properties owned by an object and those inherited through its prototype chain. This method checks if a specified property is a direct property of the object, rather than inherited, and returns a boolean value.

Check the following link If you want to understand the basics of JavaScript Objects

How hasOwnProperty() Works

hasOwnProperty() is called on an object, passing the name of the property you want to check as a string. It returns true if the property is an own property of the object and false otherwise. This method does not check the prototype chain.

Simple Example 1: Checking Object Properties

const car = {
  make: 'Toyota',
  model: 'Corolla'
};

console.log(car.hasOwnProperty('make'));  // Output: true
console.log(car.hasOwnProperty('year'));  // Output: false

Simple Example 2: Using hasOwnProperty in a Function

function hasProperty(obj, prop) {
  return obj.hasOwnProperty(prop);
}

const bike = {
  brand: 'Trek',
  type: 'mountain'
};

console.log(hasProperty(bike, 'brand'));  // Output: true
console.log(hasProperty(bike, 'price'));  // Output: false

Complex Example: Filtering Inherited Properties

This example demonstrates filtering an object’s own properties from those inherited from its prototype.

function Vehicle(type) {
  this.type = type;
}

Vehicle.prototype.start = function() {
  return 'Starting...';
};

const car = new Vehicle('Car');
car.make = 'Toyota';
car.model = 'Corolla';

for (let prop in car) {
  if (car.hasOwnProperty(prop)) {
    console.log('Own property:', prop);
  } else {
    console.log('Inherited property:', prop);
  }
}
// Output: Own property: type
// Output: Own property: make
// Output: Own property: model
// Output: Inherited property: start

Let’s Look at a Live Example

This simple example demonstrates how to use the hasOwnProperty() method in JavaScript. The HTML provides an input field where users can enter a property name and a button to trigger the check. When the button is clicked, the JavaScript function checkProperty is executed.

This function retrieves the property name from the input field, checks if this property exists directly on sampleObject (and not inherited from its prototype) using hasOwnProperty(), and displays whether the property is an own property of sampleObject in the paragraph element with id “result”.

The result will indicate if the entered property is an own property or not, helping to differentiate between properties defined directly on an object versus those inherited from the prototype chain.

HTML:

<input type="text" id="propertyName" placeholder="Enter property name">
<button onclick="checkProperty()">Check Property</button>
<p id="result"></p>

JavaScript:

const sampleObject = {
    name: 'Sample',
    value: 100
};

function checkProperty() {
    const propName = document.getElementById('propertyName').value;
    const hasProp = sampleObject.hasOwnProperty(propName);
    document.getElementById('result').textContent = hasProp ?
        `${propName} is an own property.` :
        `${propName} is not an own property.`;
}

Result:

In the provided example, the hasOwnProperty() method will return true for the properties “name” and “value” when entered into the input field. These properties are defined directly on the sampleObject itself.

Any other property name entered that is not “name” or “value” will return false, indicating that it is not an own property of sampleObject.

Conclusion

The hasOwnProperty() method is a powerful tool for managing object properties in JavaScript, ensuring that code behaves as expected when interacting with objects and their prototype chains. Understanding and using this method can help prevent bugs and unexpected behavior in JavaScript applications.