Javascript hasownproperty method
In this article we are going to see the function, and limitations of the hasownproperty method in javascript and compare it against the ‘in’ method in javascript.Table of Contents
- Introduction to hasownproperty method
- ‘in’ vs hasownproperty method
- Parting words
- Other Related Concepts
Introduction to hasownproperty method
This method is used to check whether the property on an object belongs to the mentioned object or not. If the property belongs to the mentioned object then it will return true else it will return false.Syntax
object.hasOwnProperty(propname)
Argument:
Propname:
Pass the string name or symbol to check whether it belongs to the object.// using hasownproperty() to check if property belongs to object or not
var movie = {
name: 'iron man',
genre: 'super hit',
}
var song = {
name: 'cardigan',
}
movie.hasOwnProperty('name');
// returns true
movie.hasOwnProperty('type');
// returns false
song.hasOwnProperty('name');
// returns true
song.hasOwnProperty('status');
// returns false
One key point to note is that hasownproperty method ignores inherited properties. That is, the method will return true if object has a non-inherited property with the name specified by propname; false if object does not have a property with the specified name or if it inherits that property from its prototype object.
// Create an object
var o = new Object();
// Define a noninherited local property
o.x = 3.14;
o.hasOwnProperty("x");
// Returns true: x is a local property of o
o.hasOwnProperty("y");
// Returns false: o doesn't have a property y
o.hasOwnProperty("toString");
// Returns false: toString property is inherited
hasOwnProperty() will return true even if you define the undefined or null value.
let a = new Object();
a.propertyOne = null;
a.hasOwnProperty('propertyOne')
// output: true
a.propertyTwo = undefined;
a.hasOwnProperty('propertyTwo')
//Output: true
One major advantage of using hasownproperty method is that it can be initialized with any object by just using the string as an argument. It quickly returns true if the value is available to the object, else it returns false.
function Car(name) {
this.name = name;
}
Car.prototype.color = 'red';
const bmw = new Car('x1');
console.log(bmw.name);
// property found on object
console.log(bmw.color);
// color property found on prototype
console.log(bmw.hasOwnProperty('name'));
// name is found on the object itself
console.log(bmw.hasOwnProperty('color'));
// color property is not found on the object itself
In the above example, a new Car object is created. We can see that every car is initiated with its own name within the constructor. The color is not mentioned in the object at the beginning, but is available on prototypical hierarchy. So hasOwnProperty() will return true for name but false for color.
hasOwnProperty() also works very smoothly when it comes to loop through an object. With this, now you can easily find if the properties of the object belong to the object and not from the prototype.
// declaring a Car function
function Car(name) {
this.name = name;
}
// setting up new prop with prototype
Car.prototype.color = 'red';
// creating a new Car object
const BMW = new Car('x1');
// looping through every car prop including prototype as well
for (let car in BMW) {
car + ':', BMW[car];
}
/*
output: name: x1
output: color: red
*/
/**************************************/
/*will loop through only self properties of the object,
excludes property generated through prototype method */
for (let car in BMW) {
if (BMW.hasOwnProperty(car)) {
console.log(car + ':', BMW[car]);
}
}
// output: name:
One disadvantage that you may come across while using the hasownproperty method is that the hasOwnProperty method can be rendered useless if an object happens to define a property named hasOwnProperty.
var harrypotter = {
hasOwnProperty: function() {
return true;
}
};
// Outputs: true
console.log(harrypotter.hasOwnProperty("ridikulus"));
Because harrypotter defines its own hasOwnProperty, the call never makes it to Object.prototype.hasOwnProperty. It's highly unlikely that you will encounter such cases but it's good to be aware of the possibility. Here is the workaround:
// Returns false
Obje ct.prototype.hasOwnProperty.call(harrypotter, "ridikulus");
‘in’ vs hasownproperty method
Like the hasownproperty method, the in method also is used to check if an object contains a key. However one of the key differences between hasownproperty and in method is that the in method does not distinguish between inherited properties and the properties created specifically for the object.var fantasyLit = {
tolkien: "The Lord of the Rings",
lewis: "The Chronicles of Narnia"
};
// Outputs: true
console.log("tolkien" in fantasyLit);
// Outputs: false
console.log("asimov" in fantasyLit);
// Outputs: true
console.log("constructor" in fantasyLit);
In this case ‘in’ is seeing the constructor property of Object.prototype which all objects inherit from.
One downside of both these methods is that while they can tell you that a given property has been declared, they can't tell you whether the property has a "real value".
Consider the following examples:
// Puts a "declared" property on the global object
// (window in browsers)
var declared;
// Outputs: true
console.log("declared" in window);
// Outputs: true
console.log(window.hasOwnProperty("declared"));
// Outputs: undefined
console.log(declared);
var obj = {
myUndefined: undefined
};
// Outputs: true
console.log("myUndefined" in obj);
// Outputs: true
console.log(obj.hasOwnProperty("myUndefined"));
// Outputs: undefined
console.log(obj.myUndefined);
