夢見がちWeb屋の浮かれ雑記帳

フロントエンド周りの技術ネタやらなんやらね

JavaScriptでDestructuringするときに別名やらデフォルト値が設定できるのを最近まで知らなかったのはここだけの話な。

Node.jsの6やES2015から使えるようになったDestructuring。変数宣言するときに、オブジェクトのプロパティを一括して取り出せる機能だ。

const user01 = { name : 'Okunishinishi' }
let { name } = user01  // `let name = user01.name`と書くのと同じ

なんと便利な!

でもスコープが変わるから名前衝突が起きるじゃん使えねー

let { name } = user01
let { name } = user02 // 変数名としての`name`が被る!

と思っていた時期もありました。

まあJSだししゃーないわ、と、3ヶ月ほどそのまま過ごした。

だけどある時ドキュメントをふと見ると、その辺がとっくに考慮済みであることに気がついた。

developer.mozilla.org

Destructing時に':'で別名を宣言できるとな。

let { name: name01 } = user01
let { name: name02 } = user02 // `let name02 = user.name`と同等

しかもデフォルト値の宣言もできると来た。

let { name: name02 = 'New Name' } = user02
// `let name02 = typeof user02 === 'undefined' ? 'New Name' : user02.name`と同等

他の高級言語だと当たり前の機能なのだけど、JSでこれができるようになったとは。感慨深し。

というか仕様をちゃんと読んどきゃよかった。