【JavaScript入門】分割代入

【Javascript】分割代入

通常の書き方
分割代入とは

通常の書き方

分割代入を使わずに書くと以下のようになります。

let array = [10,20,30,40,50];
let a0 = array[0];
let a1 = array[1];
let a2 = array[2];
let a3 = array[3];
let a4 = array[4];

分割代入とは

分割代入とは、配列やオブジェクトを分解し、要素やプロパティ値を個々の変数に分解するための構文です。
分割代入を使うと、以下のように記述することができます。

let array = [10,20,30,40,50];
let[a0, a1, a2, a3, a4] = array;
console.log(a3);//40
console.log(a4);//50

実行結果

40
50

分解しない要素があっても良い

すべての要素を分解する必要はありません。以下のように先頭の3つだけ分解することもできます。

let array = [10,20,30,40,50];
let[a0, a1, a2] = array;
console.log(a1);//20
console.log(a2);//30

実行結果

20
30

スプレッド構文（`...`）を組み合わせる

スプレッド構文を用いることで個々の変数に分解されなかった残りの要素をまとめて配列にすることも出来ます。

let array = [10,20,30,40,50];
let[a0, a1, ...ohter] = array;

console.log(a1);//20
console.log(ohter);//[30, 40, 50]

実行結果

20
//[30, 40, 50]

オブジェクトの場合

オブジェクトの場合のルール

オブジェクトの場合は{}で括る。
個々の変数名はプロパティ名になる。
そのため、変数の並び順とプロパティの並び順が違っていても問題なし。
プロパティが存在しなかった場合のデフォルト値を設定することが可能。
すべてを分解する必要はなく、分解しないプロパティがあっても良い。

let obj = {
    name:'tomato',
    price:100,
    group:'vegetable',
    county:'japan'
};
let {name, group, price, note='なし'} = obj;
console.log(name);
console.log(price);
console.log(group);
console.log(note);

実行結果

tomato
100
vegetable
なし

プロパティ名とは別の変数に分解する

プロパティ名と代入する変数名を別々にしたい場合は、以下のように記述します。

let obj = {
    name:'tomato',
    price:100,
    group:'vegetable',
    county:'japan',
    allergies:{al1:'gluten', al2:'egg'}
};

//プロパティ名を別名で指定する。
let {name:hensu1, price:hensu2, group:hensu3} = obj;
console.log(hensu1);//tomato
console.log(hensu2);//100
console.log(hensu3);//vegetable

実行結果

tomato
100
vegetable

入れ子のオブジェクトを分解する

let obj = {
    name:'tomato',
    price:100,
    group:'vegetable',
    county:'japan',
    allergies:{al1:'gluten', al2:'egg'}
};

let {name, price, group,allergies} = obj;
console.log(name);
console.log(price);
console.log(group);
console.log(allergies);//allergiesのすべてを取得
console.log(allergies.al1);//allergiesのal1のみ取得

実行結果

tomato
100
vegetable
{ al1: 'gluten', al2: 'egg' }
gluten

複数の戻り値を個々の変数に代入する。

「関数から複数の戻り値を返したい」という要望を叶えます。
分割代入を利用し、以下のように記述します。

function calc(...values){
    return [
        Math.max(...values),
        Math.min(...values)
    ];
}
let [max, min] = calc(10,20,30);
console.log(max);//30
console.log(min);//10

以下のように片方ずつだけ値を受け取ることもできます。

function calc(...values){
    return [
        Math.max(...values),
        Math.min(...values)
    ];
}
let [, min] = calc(10,20,30);
console.log(min);//10

let [max] = calc(10,20,30);
console.log(max);//30

以上で記事の解説はお終い！

HTML、CSS、JavaScriptをもっと勉強したい方にはUdemyがオススメ！同僚に差をつけよう！

【Udemy厳選】2023年HTML、CSS、JavaScriptで人気のオススメ動画コース13選

issiki_wp