✨ 分割代入の魔法！ES2015からJavaScript & TypeScriptで欠かせないテクニック

今回は分割代入について学習しましょう。分割代入は、ES2015で登場して以来、JS,TSでは必須の知識になりました。

オブジェクトの分割代入

const member = {
    name: 'taro',
    age: 20
}

const {name, age} = member

memberオブジェクトのnameプロパティを変数nameに、 memberオブジェクトのageプロパティを変数ageに代入する処理になります。

分割代入をしない場合は、

const name = member.name
const age = member.age

このように書く必要があり、分割代入を使用した方が、よりスッキリ短く書くことができます。

プロパティ名とは違う名前で変数を宣言したい

プロパティ名とは違う名前で変数を宣言したい時は、以下のように書きます。

プロパティ名: 変数名

const member = {
    name: 'taro',
    age: 20
}

const {name: userName, age} = member

userNameという変数にmember.nameを代入しています。

多階層のオブジェクト

オブジェクトのプロパティの値がオブジェクトの場合、下記のように分割代入を書くことができます。

const group = {
    name: 'group1',
    leader: {
        name: 'taro',
        age: 20
    }
}

const {name: groupName, leader: { name: leaderName}} = group

配列の分割代入

配列の分割代入は[]で囲みます。

const nums = [1, 2, 3]

const [first, second, third] = nums

分割代入を使用しない場合は

const first = nums[0]
const second = nums[1]
const third = nums[2]

のように書く必要があり、分割代入を使用した方がよりシンプルに書くことができます。

要素をスキップ

配列の要素をスキップして変数に代入したい場合は、空白をカンマ区切りにすることで実現できます。

const nums = [1, 2, 3]

const [, second, ] = nums

オブジェクトの中に配列

オブジェクトのプロパティの値が配列の場合は、下記のように書くことができます。

const member = {
    name: 'taro',
    age: 20
}
const group = {
    name: 'group1',
    members: [
        member
    ]
}

const {members: [taro]} = group