ES6から導入された分割代入について オブジェクト編

1.経緯

Reactを学習するためにTwitterで話題となっていた、上記の本を買い学習することになった。初めてJavascriptライブラリを使う人にも優しいようにES6復習してからReactを学習する内容となっていた。Vueをやっていた自分にとってClassやconst、アロー構文など紹介されていく中で分割代入？？なんだそれとなったので分割代入について詳しくみていくことにした。

2.分割代入(オブジェクト)

分割代入には、大きく分けてオブジェクトで使われるケースと配列で使われるケースがあるのだが、まずはオブジェクトで使われるケースについてみていく。

const user={
  name:'山田',
  age:23
}

このようなごく一般的なオブジェクトを用意した.

//分割代入を使用しない
console.log(`名前は${user.name}です${user.age}歳です`)
//名前は山田です23歳です

通常使われる際は以上のようにオブジェクト.プロパティ名と言ったようにして呼び出される。しかし、分割代入によって以下のように書き換えることができる。

//分割代入を使用する
let {name,age}=user
console.log(`名前は${name}です${age}歳です`)
//名前は山田です23歳です

オブジェクト.プロパティというように呼び出さなくてもnameとageというように変数のように呼び出すことができる。

let {name,age}=user
name='田中'
console.log(`名前は${name}です${age}歳です`)
//名前は田中です23歳です

変数になっているため書き換えもすることができる。

let {age,name}=user
console.log(`名前は${name}です${age}歳です`)
//名前は山田です23歳です

このようにageとnameを逆にした場合でも通常通り動いた。つまり元になっているオブジェクトのプロパティ名と一致する場合であれば順番はどうでもいいということである。


このようにオブジェクト.プロパティ名と書かなくても呼び出すことが可能になったのだが、これは果たして使い道があるのだろうか。オブジェクト.プロパティ名として記載した方がオブジェクトを使っているんだな〜ってことが理解できるのではないだろうか？？変数として置き換わるため、後々同じような変数に対して代入するようなミスが起こりうるのではないかと思った。

3.　オブジェクトのプロパティの名前の変更

let {name:userName,age:userAge}=user
console.log(`名前は${userName}です${userAge}歳です`)
//名前は山田です23歳です

以上のようにするとプロパティの名前とは違う名前を設定することができる。しかし、このケースにおいてもオブジェクト.プロパティ名の方がわかりやすくコードを書くことができているような気がする。それにわかりにくいプロパティ名であればオブジェクト自体を変更すればいいのではないだろうか？？


他にも使う理由として、長くなってしまったプロパティ名を少しでも短くできるや、オブジェクトが複数個ある場合は管理しずらいなどの点があったがこれはvscodeであれば補完機能が効くのでそれほど不便に感じるようなことはない。

4.僕が考えたオブジェクトの分割代入の利用方法

外部からオブジェクトを引っ張ってきた時のわかりにくいプロパティ名を簡単に変更することができる。

user{
n:'山田',
a:23
}
let {n:userName,a:userAge}=user
console.log(`名前は${userName}です${userAge}歳です`)
//名前は山田です23歳です

この例では変更不可能な外部から入手したオブジェクトがわかりにくい名前だったケースを想定している。最もこのようなデータを使うのは好ましくないだろう。多くのデータは使う人がわかりやすいプロパティ名をつけてくれていると思う。しかし、もし自分にとってわかりずらいようなものであれば変更することが可能だ。

5.結論

オブジェクトの分割代入の有効的な使い方について自分でも思いつかなかった。

MDNを見たが有効的な使い方は載っていなかったように感じる。しかし、このような書き方を他の人がした場合に分割代入をしているんだなとわかることは大切であると思う。また、新しく導入されたからといってそれを全て使ってわかりにくいコードになってしまっては本末転倒である。新しい書き方については必要な場面に応じて使っていきたい。