JavaScript hasOwnProperty

In this tutorial, we will see the aspects of limitations and functions related to the hasOwnProperty() method in JavaScript. We will also learn about its implementations and usage in the sections.

Introduction

In JavaScript, the hasOwnProperty() method is defined as a property to ensure whether the object belongs to the mentioned project or not. If it is found that the property belongs to a recognized object, then it shall return a Boolean statement based output, i.e. true or false.

Syntax

Argument

Propname:

Here, we need to pass the symbol or the string name because this is the place of prop where it is checked if the symbol or string belongs to the object. This is done using the method given below.

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 important aspect to note here is that the method hasOwnProperty() generally ignores inherited properties. This means that method shall return its true if the object is found to have a non-inherited property and the name is specified by propname. If it returns false, then it means that the object does not have any property with a specified name, or it has inherited the property from the object of the proptype.

// 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

Another added advantage of using the hasOwnProperty() method is that it can initialize an object by following up with the concept of passing a string as the default argument. It shall respond quickly with true if the value is found to be available to the object. Else, it will return false if not found. It can be demonstrated using the code snippet given below.

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 code snippet given above, the variable creates a new object, Car. It can now be stated that the Car is initiated having its properties and name defined under the constructor. Although the colour might not be mentioned within the object when initiated, it will always be available on the prototypical hierarchy. Therefore, the hasOwnProperty() will return true always for the name, but for colour, it will return false.

When it comes to performance, hasOwnProperty() works smoothly while making its way through the object with loops. By now, we can say that if the properties specifically belong to the object. They don't have any correlation with the prototype. The demonstration of this can be shown using the code snippet given below.

// 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:

While using the hasOwnProperty() method, it may turn useless because the rendering of the object happens when defining a property named hasOwnProperty. To support this, try to understand the code snippet given below.

var harrypotter = {

    hasOwnProperty: function() {

        return true;

    }

};

// Outputs: true
console.log(harrypotter.hasOwnProperty("ridikulus"));

In the above code snippet, it is evident that harrypotter already have hasOwnProperty. Thus, it will never make a call to the object.prototype.hasOwnProperty. It is assumed that this might encounter cases where it may allow to make a call, but it may eventually fail. So, it is always recommended to be aware of the possibility of calls. The below code snippet shows its workaround.

// Returns false

Object.prototype.hasOwnProperty.call(harrypotter, "ridikulus");

In the above code snippet, it is clear that harrypotter defines its own hasOwnProperty. It will never make calls to the Object.prototype.hasOwnProperty because there is a possibility that it may return false if it encounters some cases where the value is false and it becomes difficult to make things work around the corner. To support this statement, see the code snippet given below.

// Returns false

Obje ct.prototype.hasOwnProperty.call(harrypotter, "ridikulus");

Similar to the hasOwnProperty, there is another method called "in" method. It is also used to check if the key is present for the object or not. However, it is important to note that is the key difference between hasOwnProperty and in method lies in the fact that the in method will not follow the order of distinguishing between the properties that get inherited and the that inherited properties are specially created for the object. This can be shown using the code snippet given below.

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 the above code snippet, it is evident that the 'in' method follows the constructor property of Object.prototype from where all the objects get inherited.

To add a few points, there is a disadvantage for both the methods. Both the methods can easily give us the information about a property that has already been declared but they can't tell us about the property containing a real value.

Consider the following code snippet that shows how both the methods carry this workaround.

// 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);

Conclusion

In this tutorial, we discussed about the hasOwnProperty() method in JavaScript. In general, this method is a great choice for most of the developers to enquire and avoid issue relating to some special keys like constructor. It is recommended that if we find any object having any property, it will use hasOwnProperty() by default. In case of the presence of function intended to make a call by checking the object for toString() method, we must use in.

Next TopicHow to make a curved active tab in the navigation menu using HTML CSS and JavaScript

← prev next →