【JavaScript】Spread構文とRestパラメーターを使いこなそう

どうも、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記法にトランスパイルをおこなってください。