Edited at

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