スプレッド構文とRestパラメータを理解する

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を受け取り、一つの配列に変換