Setting Dynamic Objects Keys in JavaScript

It’s always a good day when you get pleasantly surprised by JavaScript, even more so when you find that it’s a feature that’s been around for a while (ES6, which according to Google was standardized in June of 2015). Earli…


This content originally appeared on Raymond Camden and was authored by Raymond Camden

It's always a good day when you get pleasantly surprised by JavaScript, even more so when you find that it's a feature that's been around for a while (ES6, which according to Google was standardized in June of 2015). Earlier today I saw some syntax that didn't look quite right to me. Here's a simple example of it:

let type = 'name';let person = {    [type]:'Ray'}

Specifically, the thing that surprised me was this portion:

[type]:'Ray'

If you console.log the code above, you get:

{ name: 'Ray' }

And then it makes sense. This syntax allows you to set a dynamic key in an object literal, much like:

person[type] = 'Ray';

Apparently, this has been around for nearly ten years and I never noticed it. Or, more likely, maybe I saw it and it didn't click in my head what was going on.

Officially you can refer to this as 'Computed keys in object literals' and can read more in Dr. Axel's Exploring JS book here: 30.7.2 Computed keys in object literals

Thanks to Dr. Axel, Tane Piper, and Caleb for all chiming in on Mastodon when I asked about this.


This content originally appeared on Raymond Camden and was authored by Raymond Camden


Print Share Comment Cite Upload Translate Updates
APA

Raymond Camden | Sciencx (2024-08-16T18:00:00+00:00) Setting Dynamic Objects Keys in JavaScript. Retrieved from https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/

MLA
" » Setting Dynamic Objects Keys in JavaScript." Raymond Camden | Sciencx - Friday August 16, 2024, https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/
HARVARD
Raymond Camden | Sciencx Friday August 16, 2024 » Setting Dynamic Objects Keys in JavaScript., viewed ,<https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/>
VANCOUVER
Raymond Camden | Sciencx - » Setting Dynamic Objects Keys in JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/
CHICAGO
" » Setting Dynamic Objects Keys in JavaScript." Raymond Camden | Sciencx - Accessed . https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/
IEEE
" » Setting Dynamic Objects Keys in JavaScript." Raymond Camden | Sciencx [Online]. Available: https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/. [Accessed: ]
rf:citation
» Setting Dynamic Objects Keys in JavaScript | Raymond Camden | Sciencx | https://www.scien.cx/2024/08/16/setting-dynamic-objects-keys-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.