JavaScript hasOwnProperty vs in

In JavaScript, hasOwnProperty and the in operator are both used to check if an object has a specific property. However, they have some differences in behavior and usage.

hasOwnProperty method: The hasOwnProperty method is a built-in method of the Object prototype. It checks if an object has a property with a specific name and returns a boolean value indicating the result.

const obj = { name: 'John', age: 30 };

console.log(obj.hasOwnProperty('name'));  // true
console.log(obj.hasOwnProperty('gender'));  // false

in operator: The in operator is used to check if a property exists in an object, including properties inherited from the prototype chain. It returns a boolean value indicating the result.

const obj = { name: 'John', age: 30 };

console.log('name' in obj);  // true
console.log('gender' in obj);  // false

Unlike hasOwnProperty, the in operator also considers properties that are inherited from the prototype chain.

Here’s an example demonstrating the difference between the two:

const obj = { name: 'John', age: 30 };

Object.prototype.gender = 'male';

console.log(obj.hasOwnProperty('gender'));  // false
console.log('gender' in obj);  // true

In this example, the hasOwnProperty method returns false because the gender property is inherited from the prototype chain, whereas the in operator returns true because it considers inherited properties as well.

Here’s a tabular representation comparing the hasOwnProperty method and the in operator in JavaScript:

Example of the difference between JavaScript hasOwnProperty vs in

Simple example code that demonstrates the difference between hasOwnProperty and the in operator in JavaScript:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.gender = 'male';

const john = new Person('John', 30);

console.log(john.hasOwnProperty('name'));  // true
console.log(john.hasOwnProperty('gender'));  // false

console.log('name' in john);  // true
console.log('gender' in john);  // true

Output:

In this example, we have a Person constructor function that creates objects with name and age properties. The gender property is added to the Person prototype.

When we create a new Person object called john, we can see the difference between hasOwnProperty and the in operator.

• The john object has its own name property, so john.hasOwnProperty('name') returns true.
• However, the john object does not have its own gender property. It inherits the gender property from the prototype. Therefore, john.hasOwnProperty('gender') returns false.
• On the other hand, the in operator considers inherited properties as well. So, 'name' in john returns true because name is a property of the john object. Similarly, 'gender' in john returns true because gender is inherited from the prototype.

Comment if you have any doubts or suggestions on this JS difference topic.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version