JS のデストラクチャリング

よくあるこんな感じのコード、これ自体はよく使うんだけども他にも色々と使ってない使い方があったのでまとめ。

const { data } = await axios.get('/some_api')

関数の引数でも使用可能

object を引数に渡す場合で特定の key しか 特定の key しか使わない場合だったり、明示的にどの key を使用するのかわかりやすい。毎回 obj.key1 とやらなくて良いので便利。

const obj = {
  key1: 'val1',
  key2: 'val2',
  key3: 'val3',
}

const hoge = ({ key1 }) => {
  console.log(key1)
}

hoge(obj) // val1

スプレッド演算子で残りの key を全てまとめて代入

React の勉強をしていて、よく ...props としている箇所が出てきたけどこう言うことか。

const hoge = ({ key2, ...props }) => {
  console.log(key2, props)
}
hoge(obj)  // val2 { key1: 'val1', key3: 'val3' }

デフォルト値の設定も可能

これも知らなかったけど、調べてたらデフォルト値の設定も可能。 API からデータを取得して key がなければデフォルト値を設定するみたいなコードを書いたことがあったので、これは使えそう。

const { key3 = 'hoge', key4 = 'val4', ...rest } = obj
console.log(key3, key4, rest) // val3 val4 { key1: 'val1', key2: 'val2' }