javascriptのこの構文の意味を教えてください

Question

const CALL_API = "Call API"
const USER_REQUEST = "USER_REQUEST"

const fetchUser = login => ({
  [CALL_API]: {
    types: [ USER_REQUEST ]
  }
})

[CALL_API]の部分が、オブジェクトのプロパティに配列がセットされている？ような記述なのですがこれはどのような意味なのでしょうか？

Answer 1

部分的に抜粋したコードですかね？
そのブラケットは配列ではなく、ES2015で採用されたComputedPropertyName（計算されたプロパティ名）というやつです。

端的に言えば、ブラケットで囲むことで、オブジェクトのプロパティ名を変数などで宣言できるようになったという感じです。
例1↓

const hoge = "foo"
obj = {
  hoge: 123,
  [hoge]: 234
}
console.log(obj) // { hoge:123, foo:234 }

例2↓

const obj = {
  1: "hoge",
  2: "foo",
  [1+2]: "bar"
}
console.log(obj) // {1: "hoge", 2: "foo", 3: "bar"}

ブラケット内が計算されている様子が分かると思います。

Comments

[yoppy0066]

ありがとうございます！