We all know Javascript objects. An object is nothing more than a container holding key-value pairs.<\/p>\n
<\/p>\n
However, there’s a lot more to Javascript objects. Let’s go over some key concepts.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
JS objects can be defined with expressions as property values. These expressions are immediately computed and stored as values.<\/p>\n
<\/p>\n
Example:<\/p>\n
<\/p>\n
let obj = {\n num: (1 + 2) * 3\n}\n<\/pre>\n<\/p>\n
In this case, the value of num is stored as 9 after the expression is evaluated.<\/p>\n
<\/p>\n
let obj = {\n num: 9\n}\n<\/pre>\n<\/p>\n
But what if you want to define a property with a lazily computed expression?<\/p>\n
<\/p>\n
The only way to achieve that is by wrapping the expression in a function.<\/p>\n
<\/p>\n
function calc() {\n return (1 + 2) * 3;\n}\n\nlet obj = {\n num: calc\n}\n<\/pre>\nNow, obj.num holds a reference to the function calc. The value will only be computed by calling obj.num() when necessary.<\/p>\n
<\/p>\n
<\/p>\n
2. Types of property names<\/h2>\n
<\/p>\n
Property names can be of any type but automatically converted to strings.<\/p>\n
<\/p>\n
let obj = {\n \"12\": \"this is a string name\", \/\/ string, both obj[12] and obj[\"12\"] will work\n 14: \"this is an integer name\", \/\/ coerced to a string, both obj[14] and obj[\"14\"] will work\n true: \"this is a boolean prop name\", \/\/ coerced to a string, both obj[true] and obj[\"true\"] will work\n [newObj]: \"this is an obj prop name\" \/\/ coerced to a string, obj[newObj] will not work but obj[\"newObj\"]\n<\/pre>\n<\/p>\n
<\/p>\n
3. Concise object methods<\/h2>\n
<\/p>\n
Starting from ES6, Javascript allows concise object method definitions without needing the “function” keyword.<\/p>\n
<\/p>\n
let obj = {\n hello(){\n console.log(\"Hello\");\n }\n}\n<\/pre>\nIn this example, the object has a method called “hello” which can be called by obj.hello().<\/p>\n
<\/p>\n
We will see more in the upcoming episodes.<\/p>\n","protected":false},"excerpt":{"rendered":"
We all know Javascript objects. An object is nothing more than a container holding key-value pairs. However, there’s a lot more to Javascript objects. Let’s go over some key concepts. 1. Defining properties with expressions JS objects can be defined with expressions as property values. These expressions are immediately computed and stored as values. Example:<\/p>\n","protected":false},"author":55,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[172],"tags":[330],"class_list":{"0":"post-4985","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"tag-javascript"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4985","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/users\/55"}],"replies":[{"embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/comments?post=4985"}],"version-history":[{"count":1,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4985\/revisions"}],"predecessor-version":[{"id":4994,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/posts\/4985\/revisions\/4994"}],"wp:attachment":[{"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/media?parent=4985"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/categories?post=4985"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/namastedev.com\/blog\/wp-json\/wp\/v2\/tags?post=4985"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}