In this article, we will be taking a deep dive into the hasOwnProperty() method that helps in checking whether a property exists within an object. Let us get started!<\/p>\n\n\n\n
We will begin with a short introduction of Objects.\u00a0 Objects are non-primitive data types in Javascript that store an unordered collection of key-value pairs. The association between the key and value is called property, so objects are a collection of properties.<\/p>\n\n\n\n
For example, we have defined an object \u201cstudent\u201d with various properties below:<\/p>\n\n\n\n
let student={\n name:'Komal',\n rollNumber:200101,\n age:21\n}\n<\/code><\/pre>\n\n\n\nSeveral properties such as name, rollNumber, and age are defined for the object student\u201d. The name, rollNumber, and age here indicate the keys, and \u201cKomal\u201d, 200101 and 21 are the values corresponding to the related keys.<\/p>\n\n\n\n
The hasOwnProperty() is an in-built method in JavaScript is used to check if an object contains a property. This method takes an argument in the string form as the parameter and checks whether that string (the property) is present in the object or not.<\/strong><\/p>\n\n\n\n It returns a boolean value. If it returns true, it means that the property exists in the object. If it returns false, it means that the object doesn\u2019t contain that particular property.<\/p>\n\n\n\n
The <\/strong>syntax for using this method is as follows:<\/p>\n\n\n\nobject_name.hasOwnProperty(\u2018property_name)<\/code><\/pre>\n\n\n\nLet us understand it with the help of the previous example. We have an object \u2018employee\u2019 with certain properties(key-value pairs). Now, We will check if the object employee contains a certain property or not using this method. The code for the same is given below:<\/p>\n\n\n\n
\/\/defining an object employee\nlet employee={\n empId:2301,\n name: "Joshua",\n email:"josh232@gmail.com",\n age:32\n};\n\n\/\/both the statements below return true\nconsole.log(employee.hasOwnProperty('name'));\nconsole.log(employee.hasOwnProperty('age'));\n\n\/\/below statement returns false\nconsole.log(employee.hasOwnProperty('salary'));<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\ntrue\ntrue\nfalse\n<\/code><\/pre>\n\n\n\nThe code above uses the inbuilt method \u2018hasOwnProperty(\u2018property_name\u2019)\u2019 and returns true for the properties – name and age. It returns false when checking for \u201csalary\u201d.<\/p>\n\n\n\n
When working with objects in JavaScript, it’s important to distinguish between properties that are directly defined on the object and those inherited from its prototype. Using hasOwnProperty allows developers to ensure they are only considering properties that belong directly to the object.<\/strong><\/p>\n\n\n\nThe hasOwnProperty() method also considers properties with values of null or undefined as direct properties of the object. Let us see an example of the sample:<\/p>\n\n\n\n
\/\/defining an object employee\nlet employee={\n empId: null,\n name: undefined,\n};\n\n\/\/both the statements below return true\nconsole.log(employee.hasOwnProperty("empId"));\nconsole.log(employee.hasOwnProperty("name"));<\/pre><\/div>\n\n\n\nIn this example, we have an object employee with properties empId and name, both having values of null and undefined, respectively. Themethod returns true for both properties, indicating that they are direct properties of the object.<\/p>\n\n\n\n
hasOwnProperty() vs the “in” Operator<\/strong><\/h2>\n\n\n\nWhile the hasOwnProperty() method is effective for checking the direct properties of an object, the “in” operator is used to determine if a property exists in an object, regardless of whether it is a direct property or an inherited property.<\/strong><\/p>\n\n\n\nThe syntax of the in operator is:<\/p>\n\n\n\n
\u201cpropertyName\u201d in objectName;<\/code><\/pre>\n\n\n\nwhere, <\/p>\n\n\n\n
propertyName:<\/strong> name of the property to check<\/p>\n\n\n\nobjectName:<\/strong> name of the object in which property has to be checked<\/p>\n\n\n\nLet us see an example of the same:<\/p>\n\n\n\n
\/\/defining an object employee\nlet employee={\n empId:2301,\n name: "Joshua",\n email:"josh232@gmail.com",\n age:32\n};\n\n\/\/both the statements below return true\n'name' in employee;\n'age' in employee;\n\n\/\/below statement returns false\n'salary' in employee<\/pre><\/div>\n\n\n\nOutput:<\/strong><\/p>\n\n\n\ntrue\ntrue\nfalse\n<\/code><\/pre>\n\n\n\nThe above code checks if the name and age properties exist in the object \u2018employee\u2019 and hence returns true, whereas returns false when checking for the property \u2018salary\u2019 as it doesn\u2019t exist in the object.<\/p>\n\n\n\n
It’s important to choose the appropriate method based on the specific use case. <\/p>\n\n\n\n
\n- If we want to check for direct properties only, use the hasOwnProperty() method. <\/li>\n\n\n\n
- If we need to check for properties in both direct and inherited ways, the “in” operator is the preferred choice.<\/li>\n<\/ul>\n\n\n\n
Can hasOwnProperty be used with any type of object?<\/strong> Yes, this method available on all objects in JavaScript. It can be used with objects created using object literals, constructor functions, or instances of built-in classes.<\/p>\n\n\n\nHowever, one of the common limitations when iterating over object properties, leading to unintended inclusion of inherited properties. It’s essential to keep this in mind to ensure accurate and expected behavior when working with objects.<\/p>\n\n\n\n
Conclusion <\/strong><\/h2>\n\n\n\n