ES6で加わったSpread Operatorと Rest parametersがとても便利だと思ったので、記事にします。
日本語だと、
Spread Operatorはスプレッド構文
Rest parametersは残余引数（？）だそうです。
ちょっと後者は英語で覚えた方がなんかしっくりきます。
では書き方と機能について見ていきます。
Spread Operator（スプレッド構文）
まずES５では、関数を呼び出して配列を引数に渡す際は、apply()メソッドを使ってました。
apply(thisの参照先, 渡したい配列)
function expenses (a, b, c, d) {
return a + b + c + d;
}
var cost = [1000, 2500, 500, 3000];
var totalCost = expenses.apply(null, cost);
console.log(totalCost + '円'); //結果:7000円
これをES６のスプレッド構文で書くとシンプルです↓
function expenses (a, b, c, d) {
return a + b + c + d;
}
var cost = [1000, 2500, 500, 3000];
var totalCost = expenses(...cost);
console.log(totalCost + '円'); //結果:7000円
関数(...配列の変数名)と書くだけです。
applyでnullとか書かなくていいので、とても簡単になりました。
『配列同士をマージしたい』 という時も使えます。
const teamA = ['Mary', 'Mike', 'Jim'];
const teamB = ['Emily', 'Tony', 'John'];
const bigTeam = [...teamA, ...teamB, 'Taro'];
console.log(bigTeam);
//結果: ["Mary", "Mike", "Jim", "Emily", "Tony", "John", "Taro"]
最後に"Taro"を追加してますが、このように普通に追加も可能です。
『配列をコピーしたい』 という時も使えます。
const color1 = ['blue', 'red', 'yellow'];
const color2 = [...color1]
全く同じ内容になります。※コピーなのでcolor1は変更されません。
『オブジェクト』にも使えます。
const teamA = {mary: 'manager', john: 'player' }
const teamB = {mike: 'manager', will: 'player' }
const bigTeam = {...teamA, ...teamB}
console.log(bigTeam)
//結果：{mary: "manager", john: "player", mike: "manager", will: "player"}
ストーリーは意味不明ですが、マージできました。
Rest Parameters（残余引数）
スプレッド構文とRestパラメータは同じように「...」を使うので見た目がそっくりです。
しかし働きは逆になります。
MDN：スプレッド構文より引用してみると、以下の通り。
こちらはスプレッド構文とは逆の働きといえます。スプレッド構文が要素を展開するのに対して、残余構文は複数の要素を集約して 1 つのオブジェクトに「濃縮」します。残余引数を参照してください。
ちょっと難しいですね。
あとで違いをまとめに書きますが、Rest Parametersのコードがこちら↓
function workYears (...joinYear) {
joinYear.forEach(cur =>
console.log((2020 - cur) >= 10))
}
workYears(1990,2000,1995,2015);
//結果：true,true,true,false
ここでは10年以上働いたかの結果をBoolean（true/false）で表示してます。
最後だけはfalseになってますね。
ES5で書くと、オブジェクトをループ(forEachやfor of)で計算する時、配列に変換する作業が必要です。
※for inなどは使えます。
しかし、Restパラメータを使うと自動で配列に変換してくれます！非常に楽ですね。
次の例↓
const myObject = ({ name: Username, ...rest }) => {
console.log(Username);
console.log(rest);
}
myObject({name: 'Mike', age: 30, job: 'engineer'});
//結果: Mike
//結果: {age: 30, job: "engineer"}
こちらは引数にオブジェクトを渡してるんですが、Username以外は...restにして一つにまとめてます。
今回の場合...restとしてますが、rest部分の名前は何でもOKです。
でも引数に渡す場合はrestを使うのが慣例ぽいですね。
まとめ
それぞれES5に比べてとてもシンプルに書けるので、是非使っていきたいです。
スプレッド構文とRestパラメーターの違いは、
「場所」と「要素の扱い」が違う！ ということでした。（以下詳細）
【場所】
スプレッド構文: functionを呼び出す時に
Restパラメーター: function宣言の時に
【value(要素)の扱い】
スプレッド構文: 配列から一つ一つvalueを変換する
Restパラメーター: 不特定数のvalueを受け取り、一つの配列に変換