最近は JavaScript コードのサンプルで「…」が配列の中で使われているのをよく見ます。中には関数の引数の指定で見ることもあります。私が初めて見たときには何かの省略記号かな？なんて思いましたが、実はとても便利な JavaScript 構文なんです。今回は、この「てんてんてん」正しくは「スプレッド構文」について紹介します。
スプレッド構文の概要
スプレッド構文は配列の定義や、関数の引数の指定の際に使われることが多い構文ですが、主な役割は配列などをリストに spread (スプレッド) つまり「広げる」ことです。「展開する」といったほうが分かりやすいかもしれません。
配列とリストの違いって分かりますか？配列とは Array オブジェクトのことですね。
const members = ['Taro', 'Jiro', 'Saburo'];
一方でリストとは何かしらの値をカンマで区切ったものです。前述の Array オブジェクトの定義において 'Taro', 'Jiro', 'Saburo' の部分がリストです。
Array オブジェクトとリストは全く違うものです。そして、Array オブジェクトをリストに変換できると便利なことがあります。以降、いくつかの利用例を紹介します。
配列を使って別の配列を定義する
次のサンプルは、配列 members に 'Shiro' を加えた全く別の配列 members2 を定義しています。
const members = ['Taro', 'Jiro', 'Saburo'];
const members2 = [...members, 'Shiro'];
...members が 'Taro', 'Jiro', 'Saburo' というリストに展開され members2 が定義されます。結果的に次のように member2 が定義されたのと同じになります。
const members2 = ['Taro', 'Jiro', 'Saburo', 'Shiro'];
また、このように配列の中でスプレッド構文を使うのは、Array オブジェクトの flat() メソッドを使うのと結果的に同じです。
const members = ['Taro', 'Jiro', 'Saburo'];
const members2 = [members, 'Shiro'].flat(1);
スプレッド構文のほうが短くスッキリしますね。
配列をコピーする
スプレッド構文は配列のシャロ―コピーにも使えます。
const orig = [1, 2, 3];
const copied = [...orig];
ディープコピーでない点に注意してください。配列の要素がオブジェクトの場合、そのオブジェクトの中身までコピーされることはありません。
const orig = [
{ id: 1, name: 'Taro' },
{ id: 2, name: 'Jiro' },
{ id: 3, name: 'Saburo' }
];
const copied = [...orig];
copied[0].name = 'Hanako';
console.log(orig[0].name); // 'Hanako'
上記のコードでは、スプレッド構文を使って配列をコピーしています。そしてコピーとなる copied を経由して値を書き換えると、コピー元の orig の値も書き換わっています。
配列を連結する
スプレッド構文を使えば、いくつかの配列を連結した新たな配列を作ることができます。次の例は 3 つの配列を連結して 1 つの配列を新たに作っています。
const ary1 = [1, 2];
const ary2 = [3, 4];
const ary3 = [5, 6];
const ary = [...ary1, ...ary2, ...ary3]; // [1, 2, 3, 4, 5, 6]
関数呼び出し時の実引数を指定する
3 つの引数を必要とする関数があったとしましょう。その関数を呼び出す際にはリストとして実引数を指定しなければいけません。以前なら次のような形で関数を呼び出していたでしょう。
function sum(a, b, c) {
return a + b + c;
}
const params = [1, 2, 3];
const res = sum(params[0], params[1], params[2]); // 6
スプレッド構文で実引数を指定すればシンプルになります。
const res = sum(...params); // 6
関数の仮引数を定義する（残余引数: Rest Parameter）
これまでスプレッド構文を使って配列をリストに展開してきましたが、逆にスプレッド構文を使ってリストを配列として受け取ることも可能です。
function sum(...params) {
let res = 0;
for (const num of params) {
res += num;
}
return res;
}
const res = sum(1, 2, 3, 4, 5); // 15
この仕組みを使うと、仮引数の数を可変にした関数が作れます。この引数のことを残余引数 (Rest Parameter) と呼びます。
複数のオブジェクトをマージする
これまで配列を扱ってきましたが、スプレッド構文はオブジェクトにも応用することができます。次の例は、3 つのオブジェクトのプロパティをマージした新たなオブジェクトを生成します。
const obj1 = { name: 'Taro', age: 23 };
const obj2 = { height: 174, wight: 70 };
const obj = { ...obj1, ...obj2 };
// { name: "Taro", age: 23, height: 174, wight: 70 }
まとめ
スプレッド構文は Internet Explorer ではサポートされていませんが、それ以外のメジャーブラウザーであればサポートされています。もう積極的に使っても良い構文と言えるでしょう。
お恥ずかしながら、実は筆者はこれまで現場でスプレッド構文を使ったことはありません。改めてブログ記事にして機能を整理すると、その便利さが良く分かりました。今後は積極的に使っていこうと思った次第です。
今回は以上で終わりです。最後まで読んでくださりありがとうございました。それでは次回の記事までごきげんよう。
