Posted at
ShoTimeDay 7

JavaScript 分割代入(デストラクチャリング)

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

変数 xobj.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)は便利!


引用