分割代入 | J&SadaKo

分割代入とは

下のような配列があるとします。

const profile = {
   name : "すずお"
   age : "25"
}

これをテンプレートリテラルで表すと、

console.log(`名前は${myprofile.name}で、年齢は${myprofile.age}です`)
//名前はすずおで、年齢は25です

分割代入を使えば、

const {name, age} = profile
console.log(`名前は${name}で、年齢は${age}です`)
//名前はすずおで、年齢は25です

とコンパクトになります。

例えば以下のようなオブジェクトがあった場合、

const profiles = [
    {
        name: "すずお",
        age: "25"
    },
    {
        name: "さだこ",
        age: "90"
    }
];

分割代入なら下のようにシンプルに書けます。

$.each(profiles, function(_, { name, age }) {
    console.log(`名前は${name}で、年齢は${age}です`);
});

関数の引数にはデフォルト値を設定することができます。

const sayHello = (name= 'ゲスト') => console.log(`こんにちは！${name}さん`)
sayHello()
//こんにちは!ゲストさん
sayHello(さだこ)
//こんにちは！さだこさん

分割代入にも同様にデフォルト値を設定することができます。

const myProfile = {
   age: 25
}
const {age, name='ゲスト'} = myProfile

console.log(name)//ゲスト

デフォルト値を設定しておけば、undefinedにならずに済みます。

const myProfile = {name, age}

これを見ると分割代入の逆のように見えますが、

これは以下を略して書いたものです。

const myProfile = {
  name: name,
  age: age
}

プロパティと変数名が同じ場合は省略して書くことができます。

const arr = [1,2]
console.log(...arr)//1,2

このようにスプレッド構文はドット３つで表し、配列などのiterableオブジェクトを展開してくれるので、

下のような場合、記述がコンパクトになります。

const Func = (num1, num2) => console.log(num1 + num2)
Func(arr[0], arr[1]) //3
Func(...arr)// 3

配列をコピーするときにスプレッド構文が便利です。

const arrA = [1, 2]

この配列をコピーするには

const arrB = [...arrA]
console.log(arrB)//[1, 2]

と書けばOKです。

配列を結合する場合もスプレッド構文が使えます。

const arrC = [3,4]
const arrD = [...arrA, ...arrC]
console.log(arrD)//[1, 2, 3, 4]

レスト構文もスプレッド構文同様ドット３つで表します。

スプレッド構文と何が違うか見てみましょう。

const arr2 = [1,2,3,4,5]
const [num1,num2, ...arr3] = arr2
console.log(arr3)//[3,4,5]

スプレッド構文が配列などのオブジェクトを展開していたのに対し、レスト構文は配列にまとめています。

全く反対のことをしているんですね。