JavaScriptのオブジェクトのキーを角カッコ[brackets]で囲う記法について

知見 メモ

オブジェクトのキーが [ ] ←これ に囲われている

見かけたことはありますか？僕はあります。

const obj = {
  [a]: 'foo'
}

こういうやつ

たまに見かけるけど頻繁には見ないのであんまり書くことも少なくて、ついどういう挙動だったか忘れてしまうシリーズ。

毎回なんだっけこれってなって、ググって、「あーそうだったそうだった」ってなってるのでもう自分のブログに書いとけばええやんという気持ち。なので書く。

名称は "Computed Property Names" という

らしい。MDNだと日本語訳で『計算されたプロパティ名』になっている。

挙動はMDNの例がすべてではあるがなんかわかりにくい…

ちなみにES2015から実装されたシンタックスである。

オブジェクトのキーに変数を直接書けて便利

オブジェクトのキー名を変数から参照したい場合があったりする。

"Computed Property Names"が無かった時代(ES5)

気持ちとしてはこう書きたいが……

const name = 'Rose'
const age = 23
const profile = {
  name: age
}

// Expect => {Rose: 23}
// Received => {name: 23}

ダメ

なので

var name = 'Rose'
var age = 23
var profile = {}
profile[name] = age

// profile => {Rose: 23}

キーに変数の中身を割り当てたい場合、ブラケット記法で迂回していた。

"Computed Property Names"がある時代(ES6+)

const name = 'Rose'
const age = 23
const profile = {
  [name]: age
}

// profile => {Rose: 23}

こういうことです

よかったですね。

Computedなだけにメソッド呼んだりもできる

const name = 'Rose'
const age = 23
const profile = {
  [name.toUpperCase()]: age // 大文字にしたい
}

// profile => {ROSE: 23}

toUpperCaseで大文字になって格納されている

よかったですね。

より実用的な例

『関数の引数から渡ってきた値をオブジェクトのキーにしてなんかやりたい』というときとかに使える。

例えばReactでstateの値をトグルしたいときがある。

state = {
  isReady: false,
  isLoading: false
}

toggleState = stateKey => () =>
  this.setState(prevState => ({ [stateKey]: !prevState[stateKey] }))

class componentの一部です

こういう"Computed Property Names"を利用したtoggleStateメソッドを用意しておくと便利で、

render() {
  <>
    <div onClick={this.toggleState('isReady')}>toggleIsReady</div> 
    <div onClick={this.toggleState('isLoading')}>toggleIsLoading</div> 
  </>
}

こういう感じに書けるので記述が少なくなって便利。

"Computed Property Names"、おぼえた。書いたのでもう忘れない気がする。

まあもしまた忘れたらここに自分で書いたんだから読めば来ればいいじゃんということになっている。

みなさんも忘れたら読みに来てください。