{"id":174,"date":"2016-04-26T08:10:21","date_gmt":"2016-04-26T08:10:21","guid":{"rendered":"http:\/\/muthu.co\/?p=174"},"modified":"2021-01-02T14:06:03","modified_gmt":"2021-01-02T14:06:03","slug":"different-ways-of-setting-a-value-to-a-javascript-object","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/different-ways-of-setting-a-value-to-a-javascript-object\/","title":{"rendered":"Different ways of setting a value to a Javascript object"},"content":{"rendered":"

Different ways of setting a value to a Javascript object<\/h2>\n
\/\/create an object\r\nvar myVar = {};\r\n\r\n\/\/1. set value using dot\r\nmyVar.key = \"myvalue\";\r\n\r\n\/\/2. set value using square brackets\r\nmyVar[\"key2\"] = \"myValue2\"\r\n\r\n\/\/3. set value using defineProperty\r\nObject.defineProperty(myVar,\"key3\",{ \r\n             value : \"myValue3\"  \r\n });<\/pre>\n
Setting values using the dot syntax or\u00a0square brackets is pretty easy to understand but using defineProperty seems\u00a0unusual. As you can see in the code, the defineProperty function of Object takes three parameters.<\/p>\n
Object.defineProperty(obj, prop, descriptor)<\/code><\/p>\n
obj - The object variable\r\nprop - the name of the property that needs to be updated in our variable\r\ndescriptor - this parameter helps us in making our object immutable or mutable.<\/pre>\n
The descriptor\u00a0is an object that can take four parameters<\/p>\n
Object.defineProperty(obj, 'key', {\r\n enumerable: false, \/\/default is false\r\n configurable: false, \/\/default is false\r\n writable: false, \/\/default is false\r\n value: 'static'\r\n});<\/pre>\n
About\u00a0writable<\/em><\/span><\/h4>\n
When you set a value to a property using defineProperty, you are making it\u00a0an immutable property, i.e you cannot change its value. Take a look at the snap below.<\/p>\n
\"javascript<\/a>
Javascript object when immutable<\/figcaption><\/figure>\n
As you can see, the value of\u00a0key\u00a0<\/em>never changes even when I try to set it explicitly.<\/p>\n
\"Javascript<\/a>
Javascript object when mutable<\/figcaption><\/figure>\n
When i make writable to true, the object key behaves like a normal key which can be changed.<\/p>\n
About\u00a0enumerable<\/em><\/span><\/h4>\n
Enumerable simply means “can be looped”.<\/em> This property is\u00a0used to restrict the set property to show up when using the for…in<\/a> loop.<\/p>\n
\"Enumerable<\/a>
Enumerable javascript object property<\/figcaption><\/figure>\n
As you can see in the code above, our\u00a0property “key”\u00a0<\/em>is enumerable.<\/p>\n
About\u00a0Configurable\u00a0<\/span><\/h4>\n
Configurable\u00a0<\/em>restricts any change to the property, like deleting or changing its behaviour except writable.<\/p>\n
\"Failed<\/a>
Failed to delete the key<\/figcaption><\/figure>\n
When configurable is false, I cannot delete the property from my object.<\/p>\n
\"Cannot<\/a>
Cannot change the enumerable property<\/figcaption><\/figure>\n
The code throws exception if I try to change the property’s enumerable<\/em> behavior. <\/p>\n","protected":false},"excerpt":{"rendered":"
Different ways of setting a value to a Javascript object \/\/create an object var myVar = {}; \/\/1. set value using dot myVar.key = “myvalue”; \/\/2. set value using square brackets myVar[“key2”] = “myValue2″ \/\/3. set value using defineProperty Object.defineProperty(myVar,”key3”,{ value : “myValue3” }); Setting values using the dot syntax or\u00a0square brackets is pretty easy […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[52],"class_list":["post-174","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-52"],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":1658,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/174\/revisions\/1658"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}