In vs hasOwnProperty in JavaScript

Because JavaScript is an object-oriented language, everything can be thought of as an object, each with their own functions and attributes.

Because of this, it is important to understand how to use the built-in functions of JavaScript to fetch what attributes and functions are available to an object.

The two most common functions used to do this are the in operator and the hasOwnProperty() function.

In this post, we'll learn the difference between the two and when to use each in JavaScript.

The in Operator

The in operator is used to check if a property exists in an object.

	const fruit = {
    name: "Apple",
    color: "Red",
    taste: "Sweet"
};

Now, let's say we want to check if the fruit object has a property called color. We can do this by using the in operator.

	const fruit = {
    name: "Apple",
    color: "Red",
    taste: "Sweet"
};

const hasColor = "color" in fruit;

console.log(hasColor);

	true

The hasOwnProperty() Function

The hasOwnProperty() function is used to check if a property exists in an object and is not inherited from the object's prototype.

	const fruit = {
    name: "Apple",
    color: "Red",
    taste: "Sweet"
};

const hasColor = fruit.hasOwnProperty("color");

console.log(hasColor);

	true

Just like with the in operator, the hasOwnProperty() function returns true if the property exists in the object.

The Difference Between the in Operator and hasOwnProperty()

Because the hasOwnProperty() function checks if a property exists in an object and is not inherited from the object's prototype, it is more strict than the in operator.

Let's look at an example where the in operator returns true but the hasOwnProperty() function returns false.

Let's create a simple object again.

	const fruit = {
    name: "Apple",
    color: "Red",
    taste: "Sweet"
};

Now let's try and check if the fruit object has a property called toString by using both the in operator and the hasOwnProperty() function.

	const fruit = {
    name: "Apple",
    color: "Red",
    taste: "Sweet"
};

const hasToString1 = "toString" in fruit;
const hasToString2 = fruit.hasOwnProperty("toString");

console.log(hasToString1);
console.log(hasToString2);

	true
false

As you can see, you can call the toString() function on the fruit object, so the in operator returns true.

However, the hasOwnProperty() function returns false because the toString() function is inherited from the object's prototype, and not native to the object itself.

With this in mind, it is important to understand whether you want to check only the properties that are native to the object or if you want to check all properties, including those inherited from the object's prototype.

Conclusion

In this post, we learned the difference between the in operator and the hasOwnProperty() function in JavaScript.

In short, because the hasOwnProperty() function is more strict, it is recommended to use it when checking if a property exists in an object only, but if you want to check if a property exists in an object and is inherited from the object's prototype, then the in operator is the way to go.

Thanks for reading!

• Support Us
• Join
• Share
• Tweet
• Share