JavaScript の分割代入を使うと、オブジェクトや配列からプロパティを取り出して、複数の変数に代入できます。
const obj = {
a: 1,
b: 2,
c: 3
}
const {b, c, d} = obj // 分割代入
console.log(b) // 2
console.log(c) // 3
console.log(d) // undefined
console.log(a) // Error
宣言済みの変数への代入は注意
const obj = {
a: 1,
b: 2,
c: 3
}
let a, b, c
({a, b, c} = obj) // () で囲む
{a, b, c} = obj // エラー
{} をブロックだと判断されてしまうため、 () で囲む必要があります
異なる名前に代入も可能
const obj = {
a: 1,
b: 2,
c: 3
}
const { a: x } = obj
console.log(x) // 1
変数 x に obj.a を代入しています
スプレッド演算子を使えば、残りすべてを代入可能
const arr = [1, 2, 3, 4]
const [x, ...rest] = arr
console.log(x) // 1
console.log(rest) // [2, 3, 4]
配列の分割代入を使えば、変数の値入れ替えが簡単に
let a = 5
let b = 10
[a, b] = [b, a]
console.log(a) // 10
console.log(b) // 5
デフォルト値を設定可能
const obj = {
a: 1,
b: 2,
c: 3
}
const { a = 10, x = 100 } = obj
console.log(a) // 1
console.log(x) // 100
デフォルト値の設定は、非常に便利なので具体的な例を詳しく確認しておきます。
function foo ({ a = 100, b = 200 }) {
console.log('a', a)
console.log('b', b)
}
foo({
a: 1
})
// a 1
// b 200
foo({
b: 2
})
// a 100
// b 2
関数の宣言で、 { a = 100, b = 200 } という引数が書かれています。
ここは次のコードでも同じ意味です。
function foo ({ a, b }) {
if (a === undefined) {
a = 100
}
if (b === undefined) {
b = 200
}
console.log('a', a)
console.log('b', b)
}
上記の { a, b } の部分、Vue の Vuex でよく出てきます。Vue を書いていると結構出てくるコードですが、なんとなく書いている方も多いような印象です。このように 分割代入 はよく利用される書き方なので、押さえておく必要があります。
また、次のコードも同じように動きます。
function foo (payload) {
const a = payload.a === undefined ? 100 : payload.a
const a = payload.b === undefined ? 200 : payload.b
console.log('a', a)
console.log('b', b)
}
上記の payload は関数の引数の書き方としては一般的な書き方ですので、分かりやすいかもしれません。
まとめ
分割代入（デストラクチャリング Destructuring assignment）は便利！