JSでオブジェクトの代入の記述が迷ったので確認内容のメモ。下記のような記述がどんな処理をしているかについて。
正式名称は分割代入。(MDN 分割代入 公式ページ）
処理内容
パッと見、const {} = objといった形になっているものが該当する。
パターンはいくつかあるが、複数のプロパティが入った要素に対して、一つのプロパティと変数が指定されている場合のみを考えてみる。
const {プロパティ名: 変数} = オブジェクト
- 変数のみが新たに定義した値
- プロパティ名は、オブジェクト内のプロパティと対応する
つまり、指定したプロパティ名の値を任意の変数に格納する処理となる。
実例で確認
objs = [{a:100, b:200}, {a:300, b:400}]
objs.map((obj) => {
const {a: x} = obj
console.log(x)
})
//結果
100
300
上記の場合、
const {a: x} = objの1ループ目の処理は、
const {a: x} = {a:100, b:200}となる。
この式ではbは無視で、a:100の100をxに代入した処理となる。
よって、console.log(x)で出力されるのは、プロパティaの値、100, 300のみとなる。
応用編
上記の例で、オブジェクトobjsのプロパティaにのみ加算処理を行う方法。
objs = [{a:100, b:200}, {a:300, b:400}]
objs = objs.map((obj) => {
const {a: x} = obj
return {
...obj,
a: x+1
}
})
//出力
[{a:101, b:200}, {a:301, b:400}]
ポイントはスプレッド構文でobjを展開していること。
...objなしの場合、aに足す１した結果のみが出力される。
objs = [{a:100, b:200}, {a:300, b:400}]
objs = objs.map((obj) => {
let {a: x} = obj
return {
a: x+1
}
})
//出力
[{a:101}, {a:301}]
分割代入
オブジェクトの値を取り出して変数に代入する処理を分割代入という。 const {} = objの総称。
const {プロパティ名: 変数} = オブジェクトは一例であり、他にも指定方法がある。
複数のプロパティを代入する方法
シンプルに、プロパティ名と変数を書き足していく。
const {プロパティ名: 変数, プロパティ名: 変数,,,} = オブジェクト
objs = [{a:100, b:200}, {a:300, b:400}]
objs.map((obj) => {
const {a: x, b: y} = obj
console.log(x, y)
})
//出力
100 200
300 400
同不順なので、プロパティaとbを入れ替えることも可能。
objs = [{a:100, b:200}, {a:300, b:400}]
objs.map((obj) => {
const {b: x, a: y} = obj
console.log(x, y)
})
//出力
200 100
400 300
値を格納する変数を省略
プロパティ名をそのまま変数にすることもできる。
objs = [{a:100, b:200}, {a:300, b:400}]
objs.map((obj) => {
const {a, b} = obj
console.log(a, b)
})
//出力
100 200
300 400
プロパティ名は元々定義してあるものを使う必要がある。元のプロパティ名と対応しない場合はundefinedになる。
objs = [{a:100, b:200}, {a:300, b:400}]
objs.map((obj) => {
const {x, y} = obj
console.log(x, y)
})
//出力
undefined undefined
undefined undefined
objsの中に、xやyというプロパティはないので出力はundefinedになる。
残り全部を代入
...を使うことで残り全部を指定することができる。
arr = [1,2,3,4,5]
let [a,b,...c] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //[3,4,5]
上記のように、[a,b,...c]の場合、前方から一つづず、a=1, b=2, と当てはめていき、残りを...cに代入する。
注意点
...がない場合は、単純に一つの値を代入するだけになる。
arr = [1,2,3,4,5]
let [a,b,c] = arr
console.log(a) //1
console.log(b) //2
console.log(c) //3
３つめ以降の[4,5]はどこにも代入されない。
また、...は最後にしか持ってこれない。
前方や途中の要素に...をつけるとエラーになる。
arr = [1,2,3,4,5]
let [a,...b,c] = arr
//エラー
Uncaught SyntaxError: Rest element must be last element
objectを代入する場合
const {a, b, c} = {e:1, d:2, c:3, b:4, a:5}
といったパターンもある。
この場合、変数a,b,cにはそれぞれ、右側で該当している値が入る。
const {a,b,c} = {e:1, d:2, c:3, b:4, a:5}
console.log(a) //5
console.log(b) //4
console.log(c) //3
console.log(d) //Uncaught ReferenceError: d is not defined
変数として定義したa,b,cは呼び出せるが、dは変数として定義していないためエラーとなる。