{"id":1433,"date":"2024-01-19T13:00:00","date_gmt":"2024-01-19T13:00:00","guid":{"rendered":"https:\/\/favtutor.com\/articles\/?p=1433"},"modified":"2024-01-22T06:49:58","modified_gmt":"2024-01-22T06:49:58","slug":"check-javascript-object-empty","status":"publish","type":"post","link":"https:\/\/favtutor.com\/articles\/check-javascript-object-empty\/","title":{"rendered":"Check if an JavaScript Object is Empty (5 Easy Methods)"},"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 Javascript. Objects are non-primitive data types that store data in the form of key-value pairs. This article will look into various methods to check whether a JavaScript object is empty or not.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>5 Methods to Check If a JavaScript Object Is Empty<\/strong><\/h2>\n\n\n\n<p>You may be required to check if a JavaScript object is empty or not when executing conditional logic. That way, if certain properties exist within an object, then we apply them. Also, when we process user input from external sources, we may need to validate that the data is not only present but also contains meaningful values. And don&#8217;t forget, about testing and debugging.<\/p>\n\n\n\n<p>In this section, we will look into various methods to check if a JavaScript object is empty:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1) Using the Object.keys() Method<\/strong><\/h3>\n\n\n\n<p>Keys are typically used as the names of the identifiers to access the object\u2019s properties. <strong>The Object.keys() method allows us to obtain the keys of an object and store them in an array.<\/strong> By checking the length of this array, we can determine if the JavaScript object is empty. This method was introduced in ES6 and is supported in modern browsers.<\/p>\n\n\n\n<p>Here\u2019s 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;}\">\/\/declaring two objects\nlet studentObject1={\n  name:'John',\n  rollNumber:12\n};\n\nlet studentObject2={\n\/\/this is an empty object\n};\n\n\/\/declaring variables to store object keys\nlet studentKeysArray1=Object.keys(studentObject1);\nlet studentKeysArray2=Object.keys(studentObject2);\n\n\/\/checking the length of the keys arrays\nif(studentKeysArray1.length==0){\n  console.log(&quot;studentObject1 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject1 is not an empty object&quot;);\n}\n\nif(studentKeysArray2.length==0){\n  console.log(&quot;studentObject2 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject2 is not an empty object&quot;)\n}<\/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-2ab88ce21d3c39d00a70183d48824e78\" style=\"background-color:#fedcba\"><code>studentObject1 is not an empty object\nstudentObject2 is an empty object\n<\/code><\/pre>\n\n\n\n<p>In this example, we have declared two objects. We have used the Object.keys() method to store the object keys in an array. Then we check the length of the the array. If the length of the array comes out to be zero, the object is empty otherwise it is not empty. Thus, we have obtained the desired result.\u00a0\u00a0<\/p>\n\n\n\n<p>This method is also useful when we need to <a href=\"https:\/\/favtutor.com\/articles\/loop-through-object-javascript\/\">loop through a JavaScript object<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2) Using the Object.values() Method<\/strong><\/h3>\n\n\n\n<p>Values represent the values corresponding to the keys in an object.<strong> The Object.values() method allows us to obtain the values corresponding to the keys of an object and store them in an array.<\/strong> By checking the length of this array, we can determine if the object is empty. This method was introduced in ES6 and is supported in modern browsers.<\/p>\n\n\n\n<p>Here\u2019s 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;}\">\/\/declaring two objects\nlet studentObject1={\n  name:'John',\n  rollNumber:12\n};\n\nlet studentObject2={\n  \/\/this is an empty object\n};\n\n\/\/declaring variables to store object values\nlet studentValuesArray1=Object.values(studentObject1);\nlet studentValuesArray2=Object.values(studentObject2);\n\n\/\/checking the length of the Values arrays\nif(studentValuesArray1.length==0){\n  console.log(&quot;studentObject1 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject1 is not an empty object&quot;);\n}\n\nif(studentValuesArray2.length==0){\n  console.log(&quot;studentObject2 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject2 is not an empty object&quot;)\n}<\/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-2ab88ce21d3c39d00a70183d48824e78\" style=\"background-color:#fedcba\"><code>studentObject1 is not an empty object\nstudentObject2 is an empty object\n<\/code><\/pre>\n\n\n\n<p>In this example, we have declared two objects. We have used the Object.values() method to store the object values in an array. Then we check the length of the the array. If the length of the array comes out to be zero, the object is empty otherwise it is not empty. Thus, we have obtained the desired result.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3) Using the Object.entries() Method<\/strong><\/h3>\n\n\n\n<p>The key-value pairs as a whole are called entries. <strong>The Object.entries() method is used to convert the key-value pairs of an object as entities to a 2D array. <\/strong>This method was also introduced in ES8 and is supported in modern browsers. If the array obtained comes out to be empty, i.e. the length of the 2d array is zero, then the object is empty.<\/p>\n\n\n\n<p>Here\u2019s 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;}\">\/\/declaring two objects\nlet studentObject1={\n  name:'John',\n  rollNumber:12\n};\n\nlet studentObject2={\n  \/\/this is an empty object\n};\n\n\/\/declaring variables to store object entries\nlet studentEntriesArray1=Object.entries(studentObject1);\nlet studentEntriesArray2=Object.entries(studentObject2);\n\n\/\/checking the length of the Entries 2d arrays\nif(studentEntriesArray1.length==0){\n  console.log(&quot;studentObject1 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject1 is not an empty object&quot;);\n}\n\nif(studentEntriesArray2.length==0){\n  console.log(&quot;studentObject2 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject2 is not an empty object&quot;)\n}<\/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-2ab88ce21d3c39d00a70183d48824e78\" style=\"background-color:#fedcba\"><code>studentObject1 is not an empty object\nstudentObject2 is an empty object\n<\/code><\/pre>\n\n\n\n<p>In this example, we have declared two objects. We have used the Object.entries() method to store the object entries in a 2D array. Then we check the length of the the array. If the length of the array comes out to be zero, the object is empty otherwise it is not empty. Thus, we have obtained the desired result.&nbsp;&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4) Using for&#8230;in loop<\/strong><\/h3>\n\n\n\n<p>We can use the for\u2026in loop to iterate over the keys or properties of the JavaScript object. We can use a for&#8230;in loop to iterate over the object&#8217;s properties to determine if it is empty.\u00a0<\/p>\n\n\n\n<p>Here&#8217;s 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;}\">\/\/function to check if an object is empty using for...in loop\nfunction checkEmptyObject(obj) {\n  for(let property in obj){\n    if(obj.hasOwnProperty(property)) {\n      return false;\n    }\n  }\n  return true;\n}\n\n\/\/declaring two objects\nlet studentObject1={\n  name:'John',\n  rollNumber:12\n};\n\nlet studentObject2={\n  \/\/this is an empty object\n};\n\n\/\/calling function and checking if object is empty\nif(checkEmptyObject(studentObject1)){\n  console.log(&quot;studentObject1 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject1 is not an empty object&quot;);\n}\n\nif(checkEmptyObject(studentObject2)){\n  console.log(&quot;studentObject2 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject2 is not an empty object&quot;)\n}<\/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-2ab88ce21d3c39d00a70183d48824e78\" style=\"background-color:#fedcba\"><code>studentObject1 is not an empty object\nstudentObject2 is an empty object\n<\/code><\/pre>\n\n\n\n<p>In this example, we use the for\u2026in loop to traverse over the object\u2019s properties or keys. We have made a function to check if the object is empty or not. If the function returns true, then the object is empty. Thus, we have obtained the desired result.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5) JSON.stringify()<\/strong><\/h3>\n\n\n\n<p>The JSON.stringify() method converts a JavaScript object to a JSON string. By comparing the resulting string with an empty object string, &#8220;{ }&#8221;, we can easily check if the object is empty.&nbsp;<\/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;}\">\/\/declaring two objects\nlet studentObject1={\n  name:'John',\n  rollNumber:12\n};\n\nlet studentObject2={\n  \/\/this is an empty object\n};\n\n\/\/using the JSON.stringify() method\nlet studentObjectStr1=JSON.stringify(studentObject1);\nlet studentObjectStr2=JSON.stringify(studentObject2);\n\n\/\/checking if the objects are empty\nif(studentObjectStr1==&quot;{}&quot;){\n  console.log(&quot;studentObject1 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject1 is not an empty object&quot;);\n}\n\nif(studentObjectStr2==&quot;{}&quot;){\n  console.log(&quot;studentObject2 is an empty object&quot;);\n}\nelse{\n  console.log(&quot;studentObject2 is not an empty object&quot;)\n}<\/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-2ab88ce21d3c39d00a70183d48824e78\" style=\"background-color:#fedcba\"><code>studentObject1 is not an empty object\nstudentObject2 is an empty object\n<\/code><\/pre>\n\n\n\n<p>In this example, we use the JSON.stringify method to convert the JavaScript object into a JSON string. If the converted JSON string is \u201c{ }\u201d, that is an empty JSON string, the object is empty. Thus, we have obtained the desired result.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion<\/strong><\/h2>\n\n\n\n<p>In this article, we looked into various methods to check if an object is empty in JavaScript. We can use Object.keys() method, Object.values() method, Object.entries() method, for\u2026in loop or the JSON.stringify() method to check whether an object is empty.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p> Learn about various easy methods for How to check if a Javascript Object is Empty or not with Examples.<\/p>\n","protected":false},"author":9,"featured_media":1435,"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,10],"class_list":["post-1433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-javascript","tag-javascript-object"],"_links":{"self":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1433","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=1433"}],"version-history":[{"count":3,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1433\/revisions"}],"predecessor-version":[{"id":1486,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/posts\/1433\/revisions\/1486"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media\/1435"}],"wp:attachment":[{"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/media?parent=1433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/categories?post=1433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/favtutor.com\/articles\/wp-json\/wp\/v2\/tags?post=1433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}