たまに見かけるけどいつも忘れてしまうため備忘録として残します。
以下のコード見かけたことありませんか?
const obj = {
[a]: 'foo'
}
これなに
Computed Property Namesと言います(日本語訳で計算されたプロパティ)
ES2015から実装されたシンタックスです。一番下にMDNリファレンス残しておきます。
用途
オブジェクトのキー名を変数から参照したい場合があったりする時に使用します。
比較としてES2015以前のと比べてみましょう。
Computed Property Namesが無かった時代(ES5)
sample.js
const name = 'Rose'
const age = 23
const profile = {
// Received => {name: 23} nameとして展開されてしまう
name: age
}
以上のように変数から参照できないため暫定対応として以下が主流でした(TSであればコンパイルエラーが出ます)
sample.js
const name = 'Rose'
const age = 23
const profile = {}
profile[name] = age
// profile => {Rose: 23}
Computed Property Namesがある時代(ES6+)
sample.js
const person = 'Rose'
const age = 23
const profile = {
[person]: age
}
// {Rose: 23} と展開される。
こうなります。
Computedなだけにメソッド呼んだりもできる
面白いのがこんなこともできます。
sample.ts
const person = 'Rose'
const age = 23
const profile = {
[person.toUpperCase()]: age // 大文字にしたい
}
// profile => {ROSE: 23}
オブジェクトのkeyに変数雨を当てれることで表現方法が広がりそうです。
しかしJSはわりかしなんでもできてしまう言語 & 初見では分かりづらいので適宜使用することをオススメします。
以上です。