Ruby人間がJSを学び直すプロジェクト継続中です。
なんでもRubyに置き換えて考えてしまうのは悪い癖...それで理解度が深まるのであれば良いのかな。
JSでオブジェクトを作成する
分割代入に入る前に、オブジェクトの作成のところから。
空のオブジェクトを作成する
const obj = {} obj // => {}
あらかじめ属性を定義する
const obj = { key: "value" }; obj // => {key: "value"}
後から属性を追加する
obj.key2 = "value2" obj // => {key: "value", key2: "value2"}
属性にはピリオド(.)でアクセスする他、ブラケット記法[]でのアクセスもできる
obj["key"] // => "value" obj[key] Uncaught ReferenceError: key is not defined
ブラケット記法の場合は文字列で指定しないとエラーになる。
分割代入
ここから本題。
配列やオブジェクトの値を、属性値と一致する変数に一気に代入することができる。
const languages = { ja: "日本語", en: "英語" }; languages // => {ja: "日本語", en: "英語"}
const {ja, en} = languages; ja // = > "日本語" en // => "英語"
いちいちlanguages.jaとかlanguages.enとする必要がないので短く書くことができる。
後から定義した属性について単独で代入することもできる
languages.kor = "韓国語" const {kor} = languages; kor // => "韓国語"
ちなみに、属性値が一致しなかった場合は
languages.chi = "中国語" const { chinese } = languages; chinese // => undefined chi Uncaught ReferenceError: chi is not defined
languagesオブジェクトにchinese属性は存在しないので、chineseにはundefinedが代入される。
chi自体は変数として定義されていないのでUncaughtエラー。
JSの場合、存在しない属性値にアクセスしてもエラーにならず、undefined型の値が返り値として返ってくる。これによりエラーに気付きにくかったりするので、あらかじめ属性値が存在するかどうか確かめてから代入するのが良いかも。
if ("chinese" in languages) { const { chinese } = languages; }
属性 in オブジェクトで真偽値が返ってくる。
そのオブジェクトが属性を持っているかどうか判断ができるので、trueの場合のみ代入される。
