What is the difference between in and hasOwnProperty()?

👨‍💻 Frontend Developer 🟠 May come up 🎚️ Medium
#JavaScript #Objects #JS Basics

Brief Answer

The in operator checks if a property exists in an object or its prototype chain. The hasOwnProperty() method checks only own properties of an object, ignoring inherited ones. Main difference: in sees everything, hasOwnProperty sees only own properties.


Full Answer

In JavaScript there are two ways to check property existence: [in] operator and hasOwnProperty() method. They are similar, but have an important difference.

How in Operator Works

Checks property in object and its prototypes:

const obj = { name: 'John' };
console.log('name' in obj); // true
console.log('toString' in obj); // true (inherited)

How hasOwnProperty() Works

Checks only own properties of an object:

const obj = { name: 'John' };
console.log(obj.hasOwnProperty('name')); // true
console.log(obj.hasOwnProperty('toString')); // false

Main Differences

in Operator

  • Sees own properties
  • Sees inherited properties
  • Checks entire prototype chain

hasOwnProperty()

  • Sees only own properties
  • Ignores inherited properties
  • Checks only the object itself

Simple Examples

When Difference Matters

const user = { name: 'John' };
 
// Check with in
if ('toString' in user) {
  console.log('toString exists'); // Will trigger
}
 
// Check with hasOwnProperty
if (user.hasOwnProperty('toString')) {
  console.log('toString exists'); // Won't trigger
}

When to Use What

Use in Operator When:

  • Need to check any property, including inherited
  • Working with polymorphism
  • Want to know if property can be accessed

Use hasOwnProperty() When:

  • Need to check only own properties
  • Want to distinguish own from inherited properties
  • Working with object as data map

Important Features

1. Inherited Methods

const obj = {};
// All objects have inherited methods
console.log('toString' in obj); // true
console.log(obj.hasOwnProperty('toString')); // false

2. Prototype Chain

const parent = { inherited: 'value' };
const child = Object.create(parent);
child.own = 'value';
 
console.log('inherited' in child); // true (through prototype)
console.log(child.hasOwnProperty('inherited')); // false (not own)

Common Mistakes

1. Not Understanding Inheritance

// ❌ Thinking toString is object property
const obj = {};
if (obj.hasOwnProperty('toString')) {
  console.log('Has toString');
} else {
  console.log('No toString'); // Will correctly trigger
}
 
// ✅ Proper check for general case
if ('toString' in obj) {
  console.log('Can use toString'); // Will trigger
}

2. Using Only hasOwnProperty

// ❌ Missing inherited methods
const obj = { name: 'John' };
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    // Missed toString and other methods
  }
}
 
// ✅ If all properties needed
for (let key in obj) {
  if (key in obj) {
    // Will work, but meaningless
    // Better without check
  }
}

Simple Rules

  1. in — for general property existence check
  2. hasOwnProperty — for checking only own properties
  3. Inherited — in sees them, hasOwnProperty doesn’t
  4. Prototype chain — in goes through it, hasOwnProperty doesn’t
  5. Practice — hasOwnProperty is often needed for data work

Understanding the difference between in and hasOwnProperty helps work with objects properly and avoid errors with inherited properties.


Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪