どうも、KORPLUSです。
JavaScriptのSpread構文とRestパラメーターについて、
ユースケースを交え解説していきます。
対象読者
・ES2015をこれから使っていきたい人
Spread構文とは
関数呼び出しでは 0 個以上の引数として、
Array リテラルでは 0 個以上の要素として、
オブジェクトをその場で展開してくれる構文です。
要は使う場所によって、
都合の良い形でオブジェクトを展開してくれるという事です(^o^)
使い方
展開したい要素の接頭辞に...
- 関数呼び出しの場合
function multiplication(x, y, z) {
return x * y * z;
}
const numbers = [1, 2, 3];
multiplication(...numbers); //6
- Array リテラルの場合
const addCompanies = ['google', 'apple'];
const companies = ['facebook', ...addCompanies, 'amazon'];
companies // ["facebook","google","apple","amazon"]
ユースケース
- new 演算子と併用する
スプレッド演算子が登場する以前までは、
配列を引数をして指定する場合、Function.prototype.applyを使用する
が一般的でした。
（例）
function multiplication(x, y, z) {
return x * y * z;
}
const numbers = [1, 2, 3];
multiplication.apply(null, numbers);
ただ、コンストラクタをnew演算子で呼ぶ時に使えないというデメリットがありました。
スプレッド演算子を使用すれば、new演算子で使用する事ができるので、
そういった問題もなくなります(^o^)
var data = [10, 20, 30];
var object = new myObject(...data);
- Arrayの連結
Array の連結には Array.concat がよく使われますが、
スプレッド構文を使用する事で、以下のメリットが得られます。
・配列の順序を簡単に変えられる
・要素を簡単に追加する事ができる
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arrNomal = [...arr1, ...arr2];
// 配列1と2の順番を入れ替える
const arrShuffle = [...arr2, ...arr1];
// 要素を追加する
const arrAddElement = ['hoge', ...arr2, 'hoge2', ...arr1];
Restパラメーターとは
不特定多数の引数を配列として受け取る構文です。
受け取る引数の数が決まってなくても、受け取っただけ配列にいれてくれます。(^^)
使い方
関数の最後の名前付き引数に ... の接頭辞を付ける
ユースケース
function multiplication(...numbers) {
return numbers.reduce((accumulation, current) => {
return accumulation * current;
});
}
// 3つ引数を渡す
multiplication(1, 2, 3); // 6
// 4つ引数を渡す
multiplication(1, 2, 3, 4); // 24
まとめ
・Spread構文は、オブジェクトをその場で展開してくれる
・new 演算子と併用する、Arrayの連結に使うと便利
・Restパラメーターは、不特定多数の引数を配列として受け取る事ができる
注意点
ES2015以降の記法なので、
レガシーブラウザに対応させる場合は、トランスパイラ（Babel等）を使用し、
ES5記法にトランスパイルをおこなってください。