この記事では『配列の分割代入』について
- 配列の分割代入(デストラクチャリング)とは
- 配列の分割代入の特徴
- 全ての要素を代入する必要はない
- 宣言済みの変数に対しても代入可能
- デフォルト値を設定可能
- スプレッド演算子(…)と合わせることが可能
- 関数の引数にも、配列の分割代入を利用可能
などを図を用いて分かりやすく説明するように心掛けています。ご参考になれば幸いです。
【JavaScript】配列の分割代入(デストラクチャリング)とは
配列の分割代入を用いると、配列の各要素を別々の変数に一度に代入することができます。
一例として、以下のプログラムを見てみましょう。
let arr = [1, 2, 3];
let [first, second, third] = arr;
console.log(first); // 1 が表示
console.log(second); // 2 が表示
console.log(third); // 3 が表示上記のプログラムでは、first, second ,thirdという変数に対して、配列arrの各要素を代入しています。
このように、角括弧[]の中に変数をコンマ区切りで並べることによって、配列の各要素を代入することができます。
分割代入を用いない場合には、以下のように記述します。
let arr = [1, 2, 3];
let first = arr[0];
let second = arr[1];
let third = arr[2];
console.log(first); // 1 が表示
console.log(second); // 2 が表示
console.log(third); // 3 が表示見比べてみると、「配列の分割代入」によって、配列arrを何回も記述する必要がなくなっていることがわかります。
また、「配列の分割代入」には以下の特徴があります。
「配列の分割代入」の特徴
- 全ての要素を代入する必要はない
- 宣言済みの変数に対しても代入可能
- デフォルト値を設定可能
- スプレッド演算子(…)と合わせることが可能
- 関数の引数にも、配列の分割代入を利用可能
各特長について順番に説明します。
補足
分割代入は英語では「Destructuring assignment」と書きます。
全ての要素を代入する必要はない
例えば、1つ目の要素と2つ目の要素だけを代入したい場合には、以下のように記述します。以下のプログラムでは、first, secondという変数名に対して、配列arrの各要素を代入しています。
let arr = [1, 2, 3];
let [first, second,] = arr;
//カンマ(,)を無くしても良い。
//let [first, second] = arr;
console.log(first); // 1 が表示
console.log(second); // 2 が表示このように、「配列の長さ(3)」と「各括弧[]内の変数の長さ(2)」が一致しなくても構いません。通常は「各括弧[]内の変数の長さ」の方が短くなるように使います。
1つ目の要素と3つ目の要素だけを代入したい場合には、以下のように記述します。以下のプログラムでは、first, thirdという変数名に対して、配列arrの各要素を代入しています。
let arr = [1, 2, 3];
let [first, , third] = arr;
console.log(first); // 1 が表示
console.log(third); // 3 が表示2つ目の要素と3つ目の要素だけを代入したい場合には、以下のように記述します。以下のプログラムでは、second, thirdという変数名に対して、配列arrの各要素を代入しています。
let arr = [1, 2, 3];
let [, second, third] = arr;
console.log(second); // 2 が表示
console.log(third); // 3 が表示このように、不要な要素を空白にすることで、配列の代入をスキップすることができます。
なお、「各括弧[]内の変数の長さ」が「配列の長さ」よりも長い場合、変数が「undefined」となってしまいます。以下のプログラムは、「各括弧[]内の変数の長さ(4)」が「配列の長さ(3)」よりも長いプログラムの一例です。
let arr = [1, 2, 3];
let [first, second, third, fourth] = arr;
console.log(first); // 1 が表示
console.log(second); // 2 が表示
console.log(third); // 3 が表示
console.log(fourth); // undefined が表示宣言済みの変数に対しても代入可能
以下のプログラムでは、宣言済みの変数xに対して、配列の1つ目の要素を代入しています。
let x;
let arr = [1, 2, 3];
[x, ,] = arr;
//カンマ(,)を無くしても良い。
//[x] = arr;
console.log(x); // 1 が表示デフォルト値を設定可能
以下のプログラムでは、first, second ,thirdという変数名に対して、配列arrの各要素を代入しています。また、変数forthに対して、デフォルト値「4」を代入しています。
let arr = [1, 2, 3];
let [first, second, third, fourth = 4] = arr;
console.log(first); // 1 が表示
console.log(second); // 2 が表示
console.log(third); // 3 が表示
console.log(fourth); // 4 が表示スプレッド演算子(…)と合わせることが可能
以下のプログラムでは、スプレッド演算子(…)と合わせて、配列の分割代入をしています。配列restには「…rest」の位置以降にある配列arrの全ての要素が代入されます。
プログラム例１
let arr = [1, 2, 3];
let [first, ...rest] = arr;
console.log(first); // 1 が表示
console.log(rest); // [ 2, 3 ] が表示プログラム例２
let arr = [1, 2, 3, 4, 5];
let [first, , ...rest] = arr;
console.log(first); // 1 が表示
console.log(rest); // [ 3, 4, 5 ] が表示なお、角括弧[]内の最後の要素のみに「スプレッド演算子(…)」を用いることができます。そのため、以下のプログラムはNGです。
ダメなプログラム例
let arr = [1, 2, 3];
let [...rest, third] = arr;
console.log(rest);
console.log(third); 関数の引数にも、配列の分割代入を利用可能
以下のプログラムのように、関数の引数にも配列の分割代入が利用できます。
関数宣言を用いた場合
let arr = [1, 2, 3];
function showElements([first, second, third]) {
console.log(first);
console.log(second);
console.log(third);
}
showElements(arr);
//ログ：
// 1
// 2
// 3関数式を用いた場合
let arr = [1, 2, 3];
const showElements = function ([first, second, third]) {
console.log(first);
console.log(second);
console.log(third);
}
showElements(arr);
//ログ：
// 1
// 2
// 3アロー関数を用いた場合
let arr = [1, 2, 3];
const showElements = ([first, second, third]) => {
console.log(first);
console.log(second);
console.log(third);
}
showElements(arr);
//ログ：
// 1
// 2
// 3本記事のまとめ
この記事では『配列の分割代入』について、以下の内容を説明しました。
- 配列の分割代入(デストラクチャリング)とは
- 配列の分割代入の特徴
- 全ての要素を代入する必要はない
- 宣言済みの変数に対しても代入可能
- デフォルト値を設定可能
- スプレッド演算子(…)と合わせることが可能
- 関数の引数にも、配列の分割代入を利用可能
お読み頂きありがとうございました。