{"id":339,"date":"2018-02-20T07:00:00","date_gmt":"2018-02-20T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=339"},"modified":"2018-02-14T11:44:35","modified_gmt":"2018-02-14T18:44:35","slug":"access-object-properties-with-variables","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/02\/20\/access-object-properties-with-variables\/","title":{"rendered":"Access Object Properties with Variables"},"content":{"rendered":"<p>Typically object properties in JavaScript are accessed using the <strong>dot notation<\/strong>, like this:<\/p>\n<pre><code class=\"javascript\">var object = {\r\n    foo: 'bar'\r\n};\r\n\r\nvar example = object.foo; \/\/ example is now 'bar'<\/code><\/pre>\n<p>But what if you don&#8217;t know the property name at runtime?<\/p>\n<p>Let&#8217;s say you wanted to write a function called <code>propertyOfObject()<\/code> that took two arguments, <code>object<\/code> and <code>propertyName<\/code>, and returned the value of the specified property.  Dot notation won&#8217;t work in a situation like this:<\/p>\n<pre><code class=\"javascript\">function propertyOfObject(object, propertyName) {\r\n    return object.propertyName; \/\/ This doesn't work!\r\n}<\/code><\/pre>\n<p>That would look for a property that was literally named <code>propertyName<\/code>, which is not what we want.<\/p>\n<p>The solution is to use <strong>bracket notation<\/strong> to access the property value, like so:<\/p>\n<pre><code class=\"javascript\">function propertyOfObject(object, propertyName) {\r\n    return object[propertyName]; \/\/ Bingo.\r\n}<\/code><\/pre>\n<p>Any object property can be accessed using bracket notation, and you can put any expression you want inside the brackets, as long as that expression evaluates to a string for the property you&#8217;re after.  All of the following are valid approaches:<\/p>\n<pre><code class=\"javascript\">object['foo'];\r\nobject[propertyName];\r\nobject[someFunctionThatReturnsAPropertyName()];<\/code><\/pre>\n<p>Now you can access object properties at runtime without knowing their names in advance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>You can access object property values using any expression that evaluates to the name of the property you&#8217;re after.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-339","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":6,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/339\/revisions"}],"predecessor-version":[{"id":526,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/339\/revisions\/526"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}