{"id":725,"date":"2021-08-25T06:51:49","date_gmt":"2021-08-25T11:51:49","guid":{"rendered":"https:\/\/www.becomebetterprogrammer.com\/?p=725"},"modified":"2022-04-25T09:43:26","modified_gmt":"2022-04-25T14:43:26","slug":"can-javasscript-object-keys-be-numbers-or-non-string-values","status":"publish","type":"post","link":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/","title":{"rendered":"Can JavaScript Object Keys Be Numbers or Non-string Values?"},"content":{"rendered":"\n<p>For those who have worked with JavaScript for a while, you will understand there are certain behaviors about the language that makes it seem it works in a certain way, when in reality it doesn&#8217;t, such as using <a href=\"https:\/\/www.becomebetterprogrammer.com\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/\" title=\"https:\/\/www.becomebetterprogrammer.com\/what-is-the-difference-between-double-equals-vs-triple-equals-in-javascript\/\">== and === equals to check for equality between two different values<\/a>. <\/p>\n\n\n\n<p>Against what many think, <strong>JavaScript object keys cannot be Number, Boolean, Null, or Undefined type values.<\/strong> Object keys can only be strings, and even though a developer can use other data types to set an object key, JavaScript automatically converts keys to a string a value.<\/p>\n\n\n\n<p>As good engineers, developers, programmers, or enthusiasts, you should strive to not naively believe this, but instead, test the language. That&#8217;s why I validate my point by running a series of quick experiments with JavaScript<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\"><p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<\/div><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Experimenting_Object_Keys_in_JavaScript\" >Experimenting Object Keys in JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Accessing_Values_Using_the_Square_Brackets_Property_Accessor\" >Accessing Values Using the Square Brackets Property Accessor<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Understanding_Why\" >Understanding Why<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Accessing_Values_Using_Dot_Property_Accessor_or_Assigning_Values_Using_Object_Destructuring\" >Accessing Values Using Dot Property Accessor or Assigning Values Using Object Destructuring<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Why_Did_it_Work_Using_Square_Brackets_Property_Accessor\" >Why Did it Work Using Square Brackets Property Accessor?<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Other_Cases_Causing_Confusion\" >Other Cases Causing Confusion<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Experimenting_Object_Keys_in_JavaScript\"><\/span>Experimenting Object Keys in JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Based on my definition, I shouldn&#8217;t be able to define a key using a data type different from strings. Let&#8217;s go ahead and try creating the following object :<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\nvar test = { 1: 'Number One' };\n\n<\/code>\n<\/pre>\n\n\n\n<p>If you tried the following, you noticed you didn&#8217;t get any errors. In fact, if you use your favorite browser&#8217;s developer tools and try running your experiments there, it will give you the initial impression you can add numbers for an object key.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.becomebetterprogrammer.com\/wp-content\/uploads\/2021\/08\/Can-JavasScript-Object-Keys-Be-Numbers-or-Non-string-Values-1.png\" alt=\"\" class=\"wp-image-728\" width=\"466\" height=\"225\" srcset=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2021\/08\/Can-JavasScript-Object-Keys-Be-Numbers-or-Non-string-Values-1.png 466w, https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2021\/08\/Can-JavasScript-Object-Keys-Be-Numbers-or-Non-string-Values-1-300x145.png 300w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Accessing_Values_Using_the_Square_Brackets_Property_Accessor\"><\/span>Accessing Values Using the Square Brackets Property Accessor<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Depending on the way you decide to access the object&#8217;s <em>numeric<\/em> key-value, you will find success.<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\nconsole.log(test[1]);  \/\/ it displays \"Number One\"\n\n<\/code>\n<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Understanding_Why\"><\/span>Understanding Why<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Don&#8217;t let the programming language fool you. There are other ways to access property values in JavaScript:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Accessing_Values_Using_Dot_Property_Accessor_or_Assigning_Values_Using_Object_Destructuring\"><\/span>Accessing Values Using Dot Property Accessor or Assigning Values Using Object Destructuring<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Try using the Dot property accessor and Object Destructuring to log the <em>1<\/em> property of our <code class=\"lang-javascript\">test<\/code> object.<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\n\/\/ Attempt using the Dot property accessor\nconsole.log(test.1); \/\/ it will fail\n\n\/\/ First attempt using object destructuring\nvar { 1 } = test; \/\/ it will fail as 1 it is not a correct identifier\n\n\/\/ Second attempt using object destructuring\nvar { 1 : number } = test; \/\/ it will succeed\nconsole.log(test.number);  \/\/ it displays \"Number One\"\n\n<\/code><\/pre>\n\n\n\n<p>Aha! We are getting some errors using Dot property accessor and Object Destructuring (unless you define a proper identifier name when destructuring the object).<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Why_Did_it_Work_Using_Square_Brackets_Property_Accessor\"><\/span>Why Did it Work Using Square Brackets Property Accessor?<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Here is the thing, JavaScript parses the key used inside when using the square brackets property accessor. Having said this, in our example:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\nconsole.log(test[1]);  \/\/ it displays \"Number One\"\n\n<\/code><\/pre>\n\n\n\n<p>Looks in reality more like the following behind the scenes:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\nconsole.log(test['1']); \/\/ it also displays \"Number One\"\n\n<\/code><\/pre>\n\n\n\n<p>In this case, we know any value within double or single quotes is a string. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Other_Cases_Causing_Confusion\"><\/span>Other Cases Causing Confusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Let&#8217;s not forget other object types in JavaScript such as <em>Boolean<\/em>, <em>Null<\/em>, and <em>Undefined<\/em>. This will be a little tricky to identify as these are special keywords in the programming language.<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n\nvar test = {\n  true: 'True Boolean',\n  false: 'False Boolean',\n  null: 'Null data type',\n  undefined: 'Undefined data type'\n};\n\n\/\/ it will succeed displaying all the object properties when using \n\/\/ square brackets or Dot property acccessors\nconsole.log(test[true]);\nconsole.log(test.true);\nconsole.log(test[false]);\nconsole.log(test.false);\nconsole.log(test[null]);\nconsole.log(test.null);\nconsole.log(test[undefined]);\nconsole.log(test.undefined);\n\n<\/code><\/pre>\n\n\n\n<p>In this case, we didn&#8217;t see any errors as when we were using a <em>numeric<\/em> property key when using the Dot property accessor. However, you should remember <code>true<\/code>, <code>false<\/code>, <code>null<\/code>,  and <code>undefined<\/code> are valid identifiers, even though they are special keywords in JavaScript. Special keywords oftentimes are displayed with a different color in your IDE and even in the console of the developer tools of some browsers like in the example below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"387\" height=\"161\" src=\"https:\/\/www.becomebetterprogrammer.com\/wp-content\/uploads\/2021\/08\/Can-JavasScript-Object-Keys-Be-Numbers-or-Non-string-Values-2.png\" alt=\"\" class=\"wp-image-732\" srcset=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2021\/08\/Can-JavasScript-Object-Keys-Be-Numbers-or-Non-string-Values-2.png 387w, https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-content\/uploads\/2021\/08\/Can-JavasScript-Object-Keys-Be-Numbers-or-Non-string-Values-2-300x125.png 300w\" sizes=\"auto, (max-width: 387px) 100vw, 387px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>JavaScript offers multiple ways to access object properties which can lead to misleading interpretation with regards to how the language works, like assigning keys to an object. The best way to prove things work in one way or another is by experimenting with the programming language in itself.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For those who have worked with JavaScript for a while, you will understand there are certain behaviors about the language that makes it seem it works in a certain way, when in reality it doesn&#8217;t, such as using == and === equals to check for equality between two different values. Against what many think, JavaScript &#8230; <a title=\"Can JavaScript Object Keys Be Numbers or Non-string Values?\" class=\"read-more\" href=\"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/can-javasscript-object-keys-be-numbers-or-non-string-values\/\" aria-label=\"More on Can JavaScript Object Keys Be Numbers or Non-string Values?\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":745,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-725","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/comments?post=725"}],"version-history":[{"count":5,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/725\/revisions"}],"predecessor-version":[{"id":2505,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/725\/revisions\/2505"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media\/745"}],"wp:attachment":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media?parent=725"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/categories?post=725"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/tags?post=725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}