ES 6-オブジェクトの拡張-属性名式

JavaScriptオブジェクトのプロパティを定義するには、2つの方法があります.
 

//    
obj.foo = true;

//    
obj['a' + 'bc'] = 123;

上のコードの方法の1つは、識別子を直接属性名として使用する方法であり、2つは式を属性名として使用する方法であり、この場合、式をカッコ内に置く.
 
ただし、オブジェクトを字面量で定義する場合(カッコを使用する)、ES 5ではメソッド1(識別子)でしか属性を定義できません.
 

var obj = {
  foo: true,
  abc: 123
};

ES 6は,文字通りの量でオブジェクトを定義する場合に,メソッド2(式)をオブジェクトの属性名とし,すなわち式を括弧内に置くことを可能にする.
 
 

let lastWord = 'last word';

const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};

a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

式は、メソッド名を定義するためにも使用できます.
 
 

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

属性名式と簡潔な表現は、同時に使用できないため、エラーが発生します.
 
 

//   
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };

//   
const foo = 'bar';
const baz = { [foo]: 'abc'};

なお、属性名式がオブジェクトである場合、デフォルトではオブジェクトが文字列[object Object Object]に自動的に変換されることに注意してください.

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

上のコードでは、[keyA]と[keyB]が[object Object]なので、[keyB]は[keyA]を上書きしますが、myObjectは最後に[object Object]属性が1つしかありません.