Using strings when specifying a key in an object's key-value pair

Question

When specifying a key in an object's key-value pair (using the notation below) the interpreter (apparently) allows the use of strings:

var x = { 'color': '#fff' };

However specifying a key dinamically using a function (that returns a string) is not allowed:

function s()
{
    return 'color';
}

var x = { s(): '#fff' };

I guess strings, when using that notation, must be static values.

However I cannot find JavaScript language specifications regarding that...

Key expects a static value cannot be dynamic. This might be a reason — Rajesh, Dec 13 '15 at 15:03

score 4 · Answer 1 · answered Dec 13 '15 at 15:03

4

In this case you should use this method:

var x = {};
x[s()] = "#fff";
x[foo()] = "#000";

answered Dec 13 '15 at 15:03

Walter Chapilliquen - wZVanG

12,010
8
40
64

thank you for your answer. I figured out I could do this. What I don't understand is the reason why the form I used is incorrect syntax (and I'm looking for js official specs. regarding that) – Paolo Dec 13 '15 at 15:08

trincot · Accepted Answer · 2015-12-13T16:32:15.110

According to this MDN article (I highlight with bold):

The syntax for an object using an object initializer is:
var obj = { property_1:   value_1,   // property_# may be an identifier...
            2:            value_2,   // or a number...
            // ...,
            "property n": value_n }; // or a string
where obj is the name of the new object, each property_i is an identifier (either a name, a number, or a string literal), and each value_i is an expression whose value is assigned to the property_i.

So in this literal notation it is not allowed to evaluate expressions, e.g. via function calls to determine the property identifiers.

In the ECMAScript Language Specification it is more formally put:

PropertyName:

IdentifierName

StringLiteral

NumericLiteral

ECMAScript 2015

With ECMAScript 2015 more becomes possible as explained in this MDN article:

Starting with ECMAScript 2015, the object initializer syntax also supports computed property names. That allows you to put an expression in brackets [ ], that will be computed as the property name.
// Computed property names (ES6)
var i = 0;
var a = {
  ["foo" + ++i]: i,
  ["foo" + ++i]: i,
  ["foo" + ++i]: i
};

The formal definition in the ECMAScript 2015 Language Specification has:

PropertyName:

LiteralPropertyName

ComputedPropertyName

ComputedPropertyName:

[ AssignmentExpression ]

So with ES6 you would rewrite your example like this:

function s()
{
    return 'color';
}

var x = { [s()]: '#fff' };

score 0 · Answer 3 · answered Dec 13 '15 at 15:12

"Associative arrays" do not exist in Javascript. You're probably referring to Objects. This is a pretty common mistake when learning JS.

An Object can be initialized using { }, or with the new operator like so :

var x = {};
var y = {foo : 'bar'};
var z = new Object();

When accessing an object properties, you can either use the . operator, or brackets.

var somevalue = y.foo;   // 'bar'
var someother = y['foo'] // 'bar'

In your current situation, you'd want something like that :

var x = new Object();  // or {}
x[s()] = "#fff";

Object type

If you check the type of x, it will return 'object'.

var typeOfX = typeof x;  // 'object'

Using strings when specifying a key in an object's key-value pair

3 Answers3

ECMAScript 2015