{"id":1401,"date":"2024-01-16T14:43:50","date_gmt":"2024-01-16T14:43:50","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=1401"},"modified":"2024-01-17T10:37:49","modified_gmt":"2024-01-17T10:37:49","slug":"check-if-object-has-property-javascript","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/check-if-object-has-property-javascript\/","title":{"rendered":"Check If Object has a Property in JavaScript (with code)"},"content":{"rendered":"\n<p>Just like we use hashmaps in C++ that store data in the form of \u201ckey-value\u201d pairs, We use Objects in JS to store data in the same way, i.e. in the form of key-value pairs. In this article, we will be taking a deep dive into what Javascript objects are and how to check if a property exists in an object. We will discuss various methods to check for key existence in an object.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>3 Ways to Check if Property exists in Object<\/strong><\/h2>\n\n\n\n<p><strong>The association between key and value in an object is called property, so objects are a collection of properties.<\/strong> When working with objects, we might need to check if the property exists before attempting to access its value. Also, this allows you to implement conditional logic based on whether a specific property is present or not.<\/p>\n\n\n\n<p>Let us discuss the various methods to check if the JavaScript object has a particular property:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1) Using the \u2018in\u2019 Operator<\/strong><\/h3>\n\n\n\n<p>A simple way to check if the object contains a certain property is by using the \u201cin\u201d operator. It returns true if the property is found, and false otherwise. The syntax of the in operator is:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background has-link-color wp-elements-48f7917c3d7fe1714d27297dc790d4cd\" style=\"background-color:#fedcba\"><code>\u201cpropertyName\u201d in objectName;<\/code><\/pre>\n\n\n\n<p>where,&nbsp;<\/p>\n\n\n\n<p><strong>propertyName: <\/strong>name of the property to check<\/p>\n\n\n\n<p><strong>objectName: <\/strong>name of the object in which property has to be checked<\/p>\n\n\n\n<p>Let us see an example of the same.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/\/defining an object employee\nlet employee={\n    empId:2301,\n    name: &quot;Joshua&quot;,\n    email:&quot;josh232@gmail.com&quot;,\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\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background has-link-color wp-elements-deb50932b6886ba2dd2c1082c5222403\" style=\"background-color:#fedcba\"><code>true\ntrue\nfalse\n<\/code><\/pre>\n\n\n\n<p>The 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<h3 class=\"wp-block-heading\"><strong>2) Using the hasOwnProperty() Method<\/strong><\/h3>\n\n\n\n<p><strong>The best wa to check if a JavaScript object contains a property is by using an inbuilt \u2018hasOwnProperty()\u2019 method. 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. 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.<\/strong><\/p>\n\n\n\n<p>The<strong> <\/strong>syntax for using this method is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background has-link-color wp-elements-a47965bbd9985194b40ade40b2018f00\" style=\"background-color:#fedcba\"><code>object_name.hasOwnProperty(\u2018property_name)<\/code><\/pre>\n\n\n\n<p>Let 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<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/\/defining an object employee\nlet employee={\n    empId:2301,\n    name: &quot;Joshua&quot;,\n    email:&quot;josh232@gmail.com&quot;,\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\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background has-link-color wp-elements-deb50932b6886ba2dd2c1082c5222403\" style=\"background-color:#fedcba\"><code>true\ntrue\nfalse\n<\/code><\/pre>\n\n\n\n<p>The code above uses the inbuilt method \u2018hasOwnProperty(\u2018property_name\u2019)\u2019 and returns true for the properties &#8211; name and age. It returns false when checking for \u201csalary\u201d.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3) Using the typeof Operator<\/strong><\/h3>\n\n\n\n<p>The typeof operator is used to determine the type of a value in JavaScript. It can also be used to check if a property exists in an object by comparing the property to undefined. If the type of the property comes out to be undefined, then the property does not exist in the object.\u00a0<\/p>\n\n\n\n<p>The basic syntax for using the typeof operator:<\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background has-link-color wp-elements-bc6b02155b5a568c745ad12ae469123c\" style=\"background-color:#fedcba\"><code>typeof(object_name.property_name)<\/code><\/pre>\n\n\n\n<p>where,&nbsp;<\/p>\n\n\n\n<p><strong>property_name: <\/strong>name of the property to check<\/p>\n\n\n\n<p><strong>object_name: <\/strong>name of the object in which we check a specific property<\/p>\n\n\n\n<p>Let us see an example:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;JavaScript&quot;,&quot;modeName&quot;:&quot;js&quot;}\">\/\/defining an object employee\nlet employee={\n    empId:2301,\n    name: &quot;Joshua&quot;,\n    email:&quot;josh232@gmail.com&quot;,\n    age:32\n};\n\n\/\/both the statements below return true\nconsole.log(typeof(employee.empId));\nconsole.log(typeof(employee.name));\n\n\/\/below statement returns false\nconsole.log(typeof(employee.rollno));<\/pre><\/div>\n\n\n\n<p><strong>Output:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-black-color has-text-color has-background has-link-color wp-elements-db1fa0b826a1dff1515d102512d9808b\" style=\"background-color:#fedcba\"><code>number\nstring\nundefined\n<\/code><\/pre>\n\n\n\n<p>In this article, we check the type of various object properties to see if they belong to an object or not using the typeof operator. We see that the properties \u201cempId\u201d and \u201cname\u201d belong to the object and hence they return number and string as types respectively. On the other hand, the \u201crollno\u201d property doesn\u2019t belong to the object and hence returns undefined. We have got the desired result.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In this article, We discussed various methods how to check if the JavaScript object has a property. Some of these include using the \u201cin\u201d operator, using the hasOwnPropertyMethod(), and the typeof operator.\u00a0Also, learn <a href=\"https:\/\/favtutor.com\/articles\/check-if-key-exists-in-javascript-object\/\" data-type=\"link\" data-id=\"https:\/\/favtutor.com\/articles\/check-if-key-exists-in-javascript-object\/\">how to check if the key exists in a JavaScript object<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Understand different methods to check if the object has property in JavaScript using in operator, hasownproperty() and typeof operator..<\/p>\n","protected":false},"author":9,"featured_media":1404,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jnews-multi-image_gallery":[],"jnews_single_post":null,"jnews_primary_category":{"id":"","hide":""},"footnotes":""},"categories":[9],"tags":[11],"class_list":["post-1401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/comments?post=1401"}],"version-history":[{"count":4,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1401\/revisions"}],"predecessor-version":[{"id":1420,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1401\/revisions\/1420"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/1404"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=1401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=1401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=1401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}