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!
If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!
Leave us a message!