本記事では、配列を個々の変数に分解する ES6 の分割代入の使用方法を解説します。
JavaScriptの配列の分割代入とは
例えば、以下のような文字列を返す関数があるとします。
function getNames() {
return ['田中', '高橋', '鈴木'];
}以下は、getNames()関数を呼び出して、返された値をnames変数に代入しています。
let names = getNames();ここから個々の要素を取り出すには、以下のように書きます。
let a = names[0],
b = names[1],
c = names[2];ES6以前は、返された配列の要素をa, b, cといった複数の変数に代入する直接的な方法はありませんでした。
しかし、ES6からは、以下のように分割代入を使うことができます。
let [a, b, c] = getNames();
console.log(a); // 田中
console.log(b); // 高橋
console.log(c); // 鈴木変数 a, b, c は，返された配列の第1, 第2, 第3の要素の値を取ります。
角括弧[]は配列の構文のように見えますが、そうではないことに注意してください。
getNames()関数が2つの要素の配列を返した場合、3番目の変数は次のように undefined になります。
function getNames() {
return ['田中', '高橋'];
}
let [a, b, c] = getScores();
console.log(a); // 田中
console.log(b); // 高橋
console.log(c); // undefined逆に、getNames()関数が3つ以上の要素を持つ配列を返す場合、残りの要素は破棄されます。
function getNames() {
return ['田中', '高橋', '鈴木', '佐藤'];
}
let [a, b, c] = getScores();
console.log(a); // 田中
console.log(b); // 高橋
console.log(c); // 鈴木配列の分割代入とRest構文
配列の残りの要素をすべて取り出し、さらにRest構文（…）を使用することで、新しい配列に入れることが可能です。
let [a, b ,...args] = getNames();
console.log(a); // 田中
console.log(b); // 高橋
console.log(args); // ['鈴木', '佐藤']変数 a と b には、返された配列の最初の 2 要素の値が格納されます。そして、変数argsは残りのすべての引数を受け取り、配列内に格納します。
なお、変数の宣言と切り離された代入の中で、配列を再構築することもできます。
let x, y;
[x, y] = [10, 20];
console.log(x); // 100
console.log(y); // 200デフォルト値の設定
以下のコードをご覧ください。
function getNumbers() {
return [100, 200];
}
let numbers = getNumbers();
let thirdNumber = numbers[2] != undefined ? numbers[2] : 0;
console.log(thirdNumber); // 0解説すると以下の通りです。
- まず、2つの数値からなる配列を返すgetNumbers()関数を宣言します
- 次に、変数numbersをgetNumbers()関数の戻り配列に代入します
- 最後に、3番目の要素が配列に存在するかどうかをチェックします。存在しない場合は、変数 thirdNumber に値 0 を代入します
上記の処理に対して、デフォルト値での分割代入を用いることで、よりシンプルにすることができます。
let [, , thirdNumber = 0] = getNumbers();
console.log(thirdNumber); // 0配列から取り出した値がundefinedの場合、次のように変数にデフォルト値を代入することができます。
let a, b;
[a = 1, b = 2] = [1000];
console.log(a); // 1000
console.log(b); // 2また、配列が返ってくることを期待しているのにもかかわらず、getNumbers() 関数が配列を返さない場合、分割代入はエラーになります。
function getNumbers() {
return null;
}
let [x = 1, y = 2] = getNumbers(); // Uncaught TypeError: getNumbers is not a function or its return value is not iterableこれを解決する典型的な方法としては、次のようにgetNumbers()関数の戻り値を空の配列にフォールバックさせることです。
function getNumbers() {
return null;
}
let [a = 100, b = 200] = getNumbers() || [];
console.log(a); // 100
console.log(b); // 200ネストされた配列の分割代入
以下の関数は，ネストとした配列を返します。
function getPerson() {
return [
'田中',
'康太',
['banana', 'apple', 'orange']
];
}返された配列の3番目の要素は別の配列なので、このようにネストした配列の分割構文を使って分割代入する必要があります。
let [
lastName,
firstName,
[
fruit1,
fruit2,
fruit3
]
] = getPerson();
console.log(fruit1, fruit2, fruit3); // banana apple orange配列の分割代入（応用編）
配列の分割代入を使用した実用的なコード例を見ていきましょう。
変数の入れ替え
配列の分割代入により、一時的な変数を使用せずに、変数の値を簡単に入れ替えることができます。
let x = 111,
y = 222;
[x, y] = [y, x];
console.log(x); // 222
console.log(y); // 1111複数の値を返す関数
JavaScriptでは、関数は一つの値を返すことができます。しかし、例えば複数の値を含む配列を返すことができる。
function calc(x, y) {
return [
x + y,
(x + y) / 2,
x - y
]
}そして、配列の分割代入構文を使って、戻り配列の要素を変数に分割して割り当てます。
let [sum, average, difference] = calc(30, 6);
console.log(sum, average, difference); // 180, 18, 24