{"id":592,"date":"2016-11-24T07:28:00","date_gmt":"2016-11-24T07:28:00","guid":{"rendered":"https:\/\/staging.infragistics.com\/blogs\/?p=592"},"modified":"2025-02-21T09:48:26","modified_gmt":"2025-02-21T09:48:26","slug":"properties-of-a-javascript-object","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/properties-of-a-javascript-object","title":{"rendered":"How To Print or Enumerate Properties of a JavaScript Object?"},"content":{"rendered":"\n
In this post, we will explore all the options to iterate and print properties of a JavaScript object. I usually come across the following requirements,<\/p>\n\n\n\n
\n
How to print name of all the properties of an object?<\/li>\n\n\n\n
How to print only the methods of an object?<\/li>\n\n\n\n
How to print even non-enumerable properties of an object? <\/li>\n<\/ul>\n\n\n\n
Let us consider the object cat, as shown in the listing below:<\/p>\n\n\n\n
var cat= {\n name : 'foo',\n age : 12,\n canRun : function() {\n console.log(\"can run\");\n }\n}<\/pre>\n\n\n\n
By default, for all properties of an object enumerable is set to true. So right now, if we print description of cat\u2019s canRun and name properties using the Object.getOwnPropertyDescriptor, we will find enumerable value true for the both properties. <\/p>\n\n\n\n
As you notice besides enumerable, configurable and writable are also set to true.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Let us start with printing all properties which enumerable is true.<\/p>\n\n\n\n
Printing all enumerable properties using for..in loop<\/h2>\n\n\n\n
We can print all enumerable properties either own or inherited of cat object using JavaScript for..in<\/b> loop.<\/p>\n\n\n\n
for (var prop in cat) {\n console.log(prop);\n}<\/pre>\n\n\n\n
Using the for..in loop, all enumerable properties can be iterated. Above for loop will print all the enumerable properties of cat object.<\/p>\n\n\n\n<\/figure>\n\n\n\n
<\/p>\n\n\n\n
JavaScript for..in loop does not iterate non enumerable properties or to properties which enumerable is set to false<\/b>. To understand it better, let us go ahead and make enumerable of cat\u2019s name property to false using the Object.defineProperty function.<\/p>\n\n\n\n
In the above listing, we have set enumerable of name property to false, and then iterating to the properties using the JavaScript for loop. In output, you will notice that JavaScript has omitted the name property, and will give output as shown in the image below<\/p>\n\n\n\n<\/figure>\n\n\n\n
JavaScript for..in loop iterates to all enumerable properties of an object, regardless it is their own property or inherited property. Let us see an example on how for..in loop returns inherited enumerable properties also. I have created an object called animal,<\/p>\n\n\n\n
var animal= {\n color: \"blue\"\n}<\/pre>\n\n\n\n
We are linking animal object as parent of cat object using the __proto__ . So we are creating inheritance between the cat object and the animal object as shown in the listing below:<\/p>\n\n\n\n
cat.__proto__ = animal;<\/pre>\n\n\n\n
Now, the cat object has three enumerable properties. It has its own age and canRun properties, and inherited color property. So the for..in loop will print age,canRun, and color properties for the cat object.<\/p>\n\n\n\n
for (var prop in cat) {\n console.log(prop);\n}<\/pre>\n\n\n\n
Above for..in loop will print us color property besides age and canRun property.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Below, finds entire code together used in the above discussion,<\/p>\n\n\n\n
var animal= {\n color: \"blue\"\n}\n\nvar cat= {\n name: 'foo',\n age: 12,\n canRun: function () {\n console.log(\"can run\");\n }\n}\ncat.__proto__=animal;\n\nObject.defineProperty(cat, 'name', {\n enumerable: false\n});\n\nfor (var prop in cat) {\n console.log(prop);\n}<\/pre>\n\n\n\n
So we can summarize for..in loop in the following points,<\/p>\n\n\n\n
\n
It returns object\u2019s all own enumerable properties<\/li>\n\n\n\n
It returns object\u2019s all inherited enumerable properties<\/li>\n\n\n\n
It does not return non-enumerable properties<\/li>\n<\/ul>\n\n\n\n
Printing all own enumerable properties using Object.keys<\/h2>\n\n\n\n
In ECMA 5, Object.keys() got introduced, which returns an array containing all enumerable properties of the JavaScript object. It only returns object\u2019s own properties; it does not return inherited properties.<\/p>\n\n\n\n
We can print all enumerable properties of cat object using Objecy.keys, as shown in the listing below.<\/p>\n\n\n\n
var cat= {\n\n name: 'foo',\n age: 12,\n canRun: function () {\n console.log(\"can run\");\n }\n}\n\nconsole.log(Object.keys(cat));<\/pre>\n\n\n\n
Printing all methods of an object <\/h2>\n\n\n\n
We may have other requirement, just to print all own methods of an object. To do so, let us create a function, which will return all own methods of an object.<\/p>\n\n\n\n
getAllMethods() function will return all the methods of the passed object. Let us say we have an object cat as shown in the next listing,<\/p>\n\n\n\n
var cat= {\n name: 'foo',\n age: 12,\n canRun: function () {\n console.log(\"can run\");\n }\n}<\/pre>\n\n\n\n
To print methods of cat object, we will pass it to the getAllMethods() function, and function will return canRun method.<\/p>\n\n\n\n
console.log(getAllMethods(cat));<\/pre>\n\n\n\n
In the output we can see canRun printed.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Conclusion <\/h2>\n\n\n\n
In this post we learnt about various ways of printing or enumerating object\u2019s own or inherited properties and methods. I hope you find this post useful. Thanks for reading. <\/p>\n","protected":false},"excerpt":{"rendered":"
In this post, we will explore all the options to iterate and print properties of a JavaScript object.<\/p>\n","protected":false},"author":65,"featured_media":2210,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-592","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=592"}],"version-history":[{"count":2,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/592\/revisions"}],"predecessor-version":[{"id":1938,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/592\/revisions\/1938"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/2210"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=592"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=592"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"As](\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.jsproperties\/0830.img1.png\" "\\"As")
<\/figure>\n\n\n\n![\"Using](\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.jsproperties\/3073.img2.png\" "\\"Using")
<\/figure>\n\n\n\n![\"In](\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.jsproperties\/5621.img3.png\" "\\"In")
<\/figure>\n\n\n\n![\"](\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.jsproperties\/0743.img4.png\" "\\"")
<\/figure>\n\n\n\n![\"In](\"\/community\/cfs-filesystemfile.ashx\/__key\/CommunityServer.Blogs.Components.WeblogFiles\/dhananjay_5F00_kumar.jsproperties\/2084.img5.png\" "\\"In")
<\/figure>\n\n\n\n