【JavaScript】分割代入を理解する

ES2015から導入された機能に分割代入という機能があります。

これはオブジェクトや配列から値を抽出する機能です。
この機能を使うと値をまとめて代入することができて非常に便利です。

今回は分割代入を理解したいと思います。分割代入を使うと一つのコードで複数の値の入れ替えができたり、配列に入っている複数の要素を別々の変数にまとめてセットしたりするときに便利です。

配列の分割代入

わかりやすい例で行くと以下のような身長/体重/BMIの値が入った配列があって、それぞれの値にわかりやすい変数を割り当てたいとします。分割代入を使わない場合は

const array = [170,60,20.7];
const height = array[0];
const weight= array[1];
const bmi = array[2];

console.log(array)

[Running] node "c:\javascript\main.js"
[ 170, 60, 20.7 ]

[Done] exited with code=0 in 0.14 seconds

となって３つそれぞれの変数を宣言しなければなりません。しかし、分割代入を使うと

const array = [170, 60, 20.7];
const [height,weight,bmi] = array 

console.log(array)

[Running] node "c:\javascript\main.js"
[ 170, 60, 20.7 ]

[Done] exited with code=0 in 0.21 seconds

複数の変数宣言が１行でかけてしまうので非常に便利です。ポイントは配列が格納されている順番に任意の変数を宣言して抽出することができます。

部分的に抽出する

上述のコードで、身長とBMIのみを取り出したいときは、以下のようになります。

const array = [170, 60, 20.7];
const [height,,bmi] = array //カンマ2連続

console.log(height)
console.log(bmi)

ポイントは、あくまで配列が格納されている順番通りなので、2つ目の配列である体重部分を飛ばすためカンマのみ入力しているところです。

[Running] node "c:\javascript\main.js"
170
20.7

[Done] exited with code=0 in 0.18 seconds

オブジェクトの分割代入

上述では、配列を分割代入しましたがオブジェクトも分割代入することができます。

オブジェクトは、データをキーと値のペアで管理されているデータです。

例えば上述の身長/体重/BMIのオブジェクトを出力するとします。分割代入せずに書くと以下のようになります。

const results = {
    height:170,
    weight:60,
    bmi:20.7,
};
const message = `身長は${results.height}cm,体重は${results.sweight}kg,BMIは${results.bmi}です。`
console.log(message)

[Running] node "c:\javascript\main.js"
身長は170cm,体重は60kg,BMIは20.7です。

[Done] exited with code=0 in 0.159 seconds

変数を出力するたびにresults.～を書くのが面倒くさいですね！

分割代入で書くと以下のようになります。

const results = {
    height:170,
    weight:60,
    bmi:20.7,
};

const {height,weight,bmi} = results;
const message = `身長は${height}cm,体重は${weight}kg,BMIは${bmi}です。`
console.log(message)

[Running] node "c:\javascript\main.js"
身長は170cm,体重は60kg,BMIは20.7です。

[Done] exited with code=0 in 0.292 seconds

一部分のみ取り出す

一部分飲み取り出すことも可能です。以下では身長と体重のみ取り出した例です。

const results = {
    height:170,
    weight:60,
    bmi:20.7,
};
//resultsから身長と体重のみを取り出して代入
const {height,weight} = results;
const message = `身長は${height}cm,体重は${weight}kgです。`
console.log(message)

[Running] node "c:\javascript\main.js"
身長は170cm,体重は60kgです。

[Done] exited with code=0 in 0.213 seconds

配列は、格納されている順番を意識する必要がありましたが、オブジェクトの場合はキーで取得しているため順番は意識する必要がありません。

抽出したプロパティを別名にする

抽出したプロパティに別名をつけたいときは、:(コロン)を使って、記述することが可能です。
以下ではheight(身長)→hei、weight(体重)→weiという別の変数名を定義しています。

const results = {
    height:170,
    weight:60,
    bmi:20.7,
};
//コロンでプロパティに別の変数名を使用する
const {height:hei,weight:wei} = results;
const message = `身長は${hei}cm,体重は${wei}kgです。`
console.log(message)

まとめ

分割代入を記述することによって、コード量が減ってシンプルになります。大規模な開発になればなるほど恩恵を受けると思います。この分割代入は、この書き方を知らないとコードが読めないということにもなりかねないので知っておいて損はないと思います