Question

I have an object, defined thus:

var obj = {
    'title': 'foo',
    'id': '123',
    'category': 'aaa',
    'meta': 'blah blah'
};

I’d like to subset it, however, I discovered some behavior in JS which I don’t understand:

var foo = {obj.title: obj.id}; // doesn't work
var bar = {obj['title']: obj['id']}; // this doesn't either

var baz = {}
baz[obj.title] = obj.id // this works fine.

Why?

Answer 1

Because this is how it is defined in ECMAScript 5, Section 11.1.5:

A property name must be either:

PropertyName :
    IdentifierName
    StringLiteral
    NumericLiteral

obj.title is neither an identifier name, nor a string or numerical literal. But even if you’d assign the title to another variable before, you see that the production rule does not evaluate the identifier:

The production PropertyName : IdentifierName is evaluated as follows:

1. Return the String value containing the same sequence of characters as the IdentifierName.

---

Just to elaborate on why it is not a valid identifier name: The full stop (.) belongs in Puncuation, other [Po] category, which is not part of the allowed characters. These are, among others:

UnicodeLetter:
any character in the Unicode categories “Uppercase letter (Lu)”, “Lowercase letter
(Ll)”, “Titlecase letter (Lt)”, “Modifier letter (Lm)”, “Other letter (Lo)”, or “Letter
number (Nl)”.

UnicodeCombiningMark:
any character in the Unicode categories “Non-spacing mark (Mn)” or “Combining
spacing mark (Mc)”

UnicodeDigit:
any character in the Unicode category “Decimal number (Nd)”

UnicodeConnectorPunctuation:
any character in the Unicode category “Connector punctuation (Pc)”