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). 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.

Support this Content!

If you like this content, please consider supporting me. You can become a Patron, visit my Amazon wishlist, or buy me a coffee! Any support helps!

Want to get a copy of every new post? Use the form below to sign up for my newsletter.