Template String As Object Property Name

Question

Why does JavaScript not allow a template string as an object property key? For example, when I input:

foo = {`bar`: 'baz'}

into the NodeJS REPL, it throws a SyntaxError with "Unexpected template string" with a long stack trace. Property values are fine, however, which is not as unexpected. Similar errors happen in the browser, for example, Firebug throws a SyntaxError with "invalid property id".

Template strings are allowed in "computed property names". For instance, this compiles perfectly fine in all browsers that support the syntax:

var foo = {
    [`bar` + 1]: `baz`
};

and creates the object {"bar1": "baz"}.

Why are template strings not allowed as literal object keys? Is it for performance reasons? Template strings must be compiled, possibly at runtime (correct me if I'm wrong), which means every time it encounters this object, the interpreter will have to compute the object name. Factoring in things like "cooked" template strings, this seems like it could get slow, although we have had getters and setters since ES5. Firefox does not mention this as an error, which is why I found it unexpected. Will the syntax be allowed sometime in the future?

Isn't that the reason, computed property names is introduced. Yes, you need braces around it but it also syntactically seems better as a generic solution addressing various scenarios. — Praveen Puglia, Oct 18 '15 at 04:06
I'm just rethinking my answer, and am not too sure it was correct. Now I am digging through the ES6 docs.... — Max, Oct 18 '15 at 04:25
_Why are template strings not allowed as literal object keys?_ They are, you just have the syntax wrong...? — Evan Davis, Mar 09 '16 at 20:43
@bergi 's [comment](https://stackoverflow.com/questions/33194138/template-string-as-object-property-name?answertab=trending#tab-top:~:text=%40b4d4r%3A%20No%20%2D%20you,Bergi) or @nati Kamusher 's [response](https://stackoverflow.com/a/67722507/8272035) should be the accepted answer. @bergi is succinct and correct 97 upvotes "...you need to use computed properties. Either var obj = {[\`${dyanmicKey}\`]: val} or just var obj = {[dyanmicKey]: val}. – Bergi May 31, 2016 at 14:14 — Michael Wegter, Nov 29 '22 at 03:25

Bergi · Accepted Answer · 2016-03-09T20:52:26.017

88

Why are template strings not allowed as literal object keys?

Template strings are expressions, not literals¹. You can only use string literals (and identifiers) for property names, for everything else - that is not known to be static - you need a computed property name.

Is it for performance reasons?

No, that's unlikely. It's to ease parsing, and makes it easy to distinguish constant (statically known) property names from dynamically computed ones.

And mostly, it's a feature that no one needs. It doesn't simplify or shorten anything, and what you would achieve with it is already possible.

Will the syntax be allowed sometime in the future?

Nope.

_{1: Even when they're called "template literals", technically they aren't literals. And: templates don't even need to be strings, they can evaluate to anything.}

edited Mar 09 '16 at 20:52

answered Mar 09 '16 at 20:41

Bergi

630,263
148
957
1,375

3

what about ` var obj = {\`${dyanmicKey}\` : val } ` ? – b4d4r May 31 '16 at 11:57
102

@b4d4r: No - you need to use computed properties. Either ``var obj = {[`${dyanmicKey}`]: val}`` or just `var obj = {[dyanmicKey]: val}`. – Bergi May 31 '16 at 14:14
1

Man, why not though. They just don't want people to put expressions in there huh... – geoyws Oct 06 '16 at 02:43
@Bergi How would one fix the following: ``profile.preferences.networks[${network.name}]`` – basickarl Apr 20 '17 at 08:17
@KarlMorrison Just drop the `${` `}` parts? – Bergi Apr 20 '17 at 08:26
1

@Bergi Ah damn, it took away the squint comments, look again here `\`profile.preferences.networks[${network.name}]`\` – basickarl Apr 20 '17 at 08:34
@KarlMorrison And what's the problem that needs to be fixed with that? – Bergi Apr 20 '17 at 08:38
Excellent @Bergi ! Everyone try this : const k = 'key'; const o = {[k]:1}; console.log(o); – Denis Truffaut Jun 25 '17 at 20:05
On a related note, is # allowed inside key string? – Safal Pillai Jun 12 '20 at 20:38
1

@SafalPillai Not inside an unquoted identifier name, but `{"#key": "value"}` is totally fine. – Bergi Jun 12 '20 at 20:43
1

What does this mean: *"templates don't even need to be strings, they can evaluate to anything"* – adiga Jun 04 '21 at 07:02
@adiga A tagged template literal evaluates to whatever value the tag function returns, e.g. a regex or an abstract syntax tree or really anything. – Bergi Jun 04 '21 at 12:43

Nati Kamusher · Answer 2 · 2022-08-25T05:31:43.470

Object keys are expected to be Strings:

let obj1 = { name: "Alex", age: "28"} // this is a 'normal' style

If the expression provided as a key is not a string, the engine will attempt to Coerse it into a string.

let obj2 = { 5: "Banana", 10: "Apple" } // e.g. number key is coersed into string

Template Strings need to be evaluated first. Therefore are not 'coersible'. Hense, the engine throws an error, because it tries to coerse them (example 1)

Arrays, on the other hand, are naturally coersible to string, therefore can be used as completely legal keys

Moreover, arrays that contain template strings may be used as perfectly legal keys when creating an object, because the engine first evaluates the template expression, then coerses the array into a string (example 2)

see examples:

    /* example 1 */ {`foo`: "bar"}   // Error: template strs aren't coersible

To be able to use a template string as an object key, just wrap it as single element of an array:

    /* example 2 */ {[`foo`]: "bar"} /* OK: {foo: "bar"}, the internal `foo` 
                                           template is first resolved to a native 
                                           "foo" string, resulting in array ["foo"],
                                           which then coersed to the "foo" key.*/
    
    /* example 3 */ const obj = {foo: "bar"}
                        const obj1 = {[obj.foo]: "bar"} // OK: {bar: "bar"} !!

Fascinating. I never thought about why an array works as an object key name, but now it makes perfect sense! — trysis, May 28 '21 at 13:54

score 7 · Answer 3 · edited Feb 01 '23 at 11:18

7

I'm posting this answer to lift @Bergi's very upvoted comment to an answer. If you want to use a dynamic value from a variable as your object key in your object literal, just use a computed property:

const dynamicKey = someCondition ? 'someKeyName' : 'otherKeyName';
const obj = {[dynamicKey]: val};

You could also write that as:

const obj = {[`${dynamicKey}`]: val};

edited Feb 01 '23 at 11:18

7ochem

2,183
1
34
42

answered Nov 23 '21 at 11:44

davidethell

11,708
6
43
63

Template String As Object Property Name

3 Answers3

Linked

Related