フロントのトレンドに乗ろうとReactのhooksの勉強をしているのですが、渡ってきたpropsを受け取るときとか、createContextを使ってProviderから渡ってきたstateやdispatchをuseContextで受け取るときとかに、分割代入をよく用いると思います。
その分割代入をちょっと勘違いというか、分かってなかった部分があるのでメモしておきます。
それぞれ分割代入するとき
const obj1 = {a: "aだよ", b: "bだよ"}
const { a, b } = obj1
console.log(a) // aだよ
console.log(b) // bだよ
これは直感的にわかります。
ある値だけを代入するとき
const obj2 = {c: "cだよ", d: "dだよ"}
const { c } = obj2
console.log(c) // cだよ
const obj3 = {e: "eだよ", f: "fだよ"}
const { f } = obj3
console.log(f) // fだよ
obj2のときは、先頭から順番に代入されていくからdは無視されているという勘違いをしていました。
obj3でわかる通り、オブジェクトのキーを指定して代入しているんですね。。。
なので、下のようにオブジェクトのキーとは関係のない変数名では分割代入はできないです。
分割代入の使い方(配列, オブジェクト)を見たらキー名とは別の変数に代入できるみたいです。無知でした。
const obj4 = {g: "gだよ", h: "hだよ"}
const { G, H } = obj4
console.log(G) // undefined
配列と混同してるのでは？
const arr1 = ["i", "j"]
const [I, J] = arr1
console.log(I) // i
console.log(J) // j
const arr2 = ["k", "l"]
const [k] = arr2
console.log(k) // k
arr2でわかるように、配列の場合は先頭から順番に代入されていく(対応する添字の要素が個別に代入される)から"l"は無視されているんですねー。
ここが勘違いの根源だったみたいです。。。