Object literalにおけるComputed property keysおよびMethod definition

redux-actionsのサンプルコードみてて、

const reducer = handleActions({
  [combineActions(increment, decrement)](state, { payload: { amount } }) {
    return { ...state, counter: state.counter + amount };
  }
}, defaultState);

は？なにこのsyntax？？？

って思ったんだけど、プログラミングあるあるで、こういうときどういうキーワードで検索していいか分からない。ここでのcombineActions(increment, decrement)はStringを返す^[1]と思ってもらって良いんだけど、それにしても全然見たことない書き方。しかし見つからない。探したり考えたりすること30分、やっと意味がわかりました。

この記事によると、ECMAScript 6から使えるようになったsyntaxで、Object literalにおける、Computed property keysとかいうやつとMethod definitionとかいうやつのshorthandのあわせ技らしく、何を言ってるか分からないと思うけど、要は、

{
  [appreciateKey]() {
    this.value += 1000;
  }
}

これは、

{
  appreciateKey: function () { this.value += 1000 }
}

これと同じで、例えばthis.valueが2000なら

{
  appreciateKey: 3000
}

となる。ObjectのValue部分をfunctionにして計算がしたい時に使う方法みたいですね。

すでに結論出てますが、同じように困ってる人がたどり着けるように、以下SEOを考慮してキーワードを散りばめながら振り返ります。

JavaScriptのオブジェクトの中に書かれた配列ブラケット記号と、その後に続くかっこ()および中かっこ{}から成る関数っぽい表現は、Computed property keysといって、ECMAScript 6（ES5）から使えるようになった簡易記法によるものです。の中はString(文字列)として評価されるものでないといけないっぽい。

---

1. 実際にはtoString()を持つObject ↩︎