使用点符号作为键不可能从数组的对象创建修改后的数组

Question

Why can I not set a key in a newly created object like this:

const baseObject = {key: "a", val: "b"}
const modifiedObject = {baseObject.val: baseObject.key} // SyntaxError: Unexpected token '.'

But instead using brackets is ok:

const modifiedObject = {[baseObject.val]: baseObject.key} // OK

From my understanding [baseObject.val] should create a new array from the baseObject.val with only that item in it. Can you explain why this works? Is this the best practice approach on setting a key from an object's nested property?

I tried finding information on MDN and other sources but could not find any. I assume my search phrases are wrong since there should be a pretty basic explanation. Feel free to mark as duplicate if you can link me to already provided answers.

Answer 1

What you have with [baseObject.val] is not an array, but a "computed property name" , a special syntax for object literals.

What it does is, when inside an object literal where a key should be, it evaluates the expression inside the brackets and then defines a property on the object being constructed with that expression. For example, { ['foo']: 'bar' } results in { foo: 'bar' } . { ['a' + 'b']: 'bar' } results in { ab: 'bar' } .

You can put any expression you want inside the [] brackets, and the result will be the key put on the object. For your case, you want the expression value of baseObject.val , so the syntax is [baseObject.val]: .

Answer 2

[ and ] are punctuators that have a different meaning in different contexts. Depending on where they appear, they might signify an array literal:

let a = [];

or delimit a property name (aka "square bracket notation") where an expression is to be evaluated to get the property name:

let foo = 'log';
console[foo]('foo'); // equivalent to console.log('foo');

or define assignment of array values to variables:

let [a, b, c] = [1, 2, 3]

In the context of the OP, they delimit a computed property name , similar to the second example above:

let x = 'foo';
let obj= {[x] : 'Foo'};

which creates an object as if by:

let obj = {foo: 'Foo'};