JavaScriptのDestructuring（分割代入）に関してざっくりまとめる

便利だけど名前がふわっとしているので雑にまとめる

今回取り上げるもの

JavaScriptにおいて Destructuring assignment と呼ばれるもの、日本語では分割代入と訳したり、ままカタカナ語でデストラクチャリングという。大きくこの機能には「配列を対象にしたもの」「オブジェクトを対象にしたもの」が存在するのでその2つのくくりで説明をする。

配列

配列を分割して代入をすることができる

const baseArray = [1,2,3]

const [frist,sencond,third] = baseArray
// firstには1 , secondには2 , thirdには3が入る

また、部分的に取り出したりすることもできる

const baseArray = [1,2,3]

const [ichi] = baseArray
// ichiに1が入る

const [x,,z] = baseArray
// xに1 , zに3が入る

またスプレッド構文を用いた残余引数(RestParameter)を指定すると広域に切り取りができる

const longArray = [10,20,30,40,50]

const [ichi,...nokori] = longArray
console.log(ichi) // 10
console.log(nokori) // [20,30.40.50]

ただし残余引数のあとに別の変数を設定を指定していれることはできない

// 下記のような記述をするとエラー
const [first,...aida,last] = longArray

引数への活用

関数の引数に使うこともできる

function loggingfirst([first, ...nokori]){
  console.log(`logging ${first}`)
}

let array = [2,4,8,16]
loggingfirst(array) // logging 2

オブジェクト

オブジェクトは対応するキーのものがあれば入る形になる

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {name , age} = source

console.log(name) // Tanaka
console.log(age) // 20

もちろん対応するオブジェクトがない場合は入らない

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {test , age} = source

console.log(test) // undefined
console.log(age) // 20

また初期値設定もできる

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {test = "test text" , age = 30} = source

console.log(test) // test text
console.log(age) // 20

キー名とは異なる変数への割当

以下のように書くことでキー名と別の変数に割り当てることができる

let source = { age: 20, name: "Tanaka", country: "Japan"}
let {test: newTest = "test string" , age: newAge , todouhuken: region} = source

console.log(newAge) // 20
console.log(newTest) // test string
console.log(region) // undefined

この構文はコロンを挟んで右側に要素を入れる形なので気をつける。（だいたい他の構文はコロンの左側に右側の値を入れる）

引数への活用

配列同様に引数にも活用できる

function loggingName({name}){
  console.log(`logging ${name}`)
}

let source = { age: 20, name: "Tanaka", country: "Japan"}
loggingName(source) // logging Tanaka