【自分用メモ】Javascript(ES6)のrest演算子とspread演算子について

最近Javascript(ES6)の学習をしており、今日もいくつか文法を習ったのでメモ程度に残しておきます。

rest演算子

例えば配列ではなく、以下のようにいくつもの数字の合計を求めたいが、数字がどんどん増えていくときに、いちいち引数の部分を修正していくのは現実的ではない。

function addNumvers(a,b,c,d,e,f){
 const numbers = [a,b,c,d,e,f] //配列にする
 return numbers.reduce((sum,number) => {
 return sum + number;
},0);
}

//この中の数字が可変的であるとする
addNumbers(a,b,c,d,e,f)

そんなときにrest演算子が使えて、引数のところに(...numbers)を記述する。
これにより、入ってきた数値を配列に変換し、配列として、関数の中で使うことができる。

function addNumbers(...numbers){

//reduceで合計値を求める
 return number.reduce((sum,number) => {
   return sum + number;
},0);
}


addNumbers(1,2,3,4,5,6,7); //いくらでも数字を増やしても大丈夫

spread演算子

このような配列があり、配列を組み合わせて一つの配列にしたいとする。

const defaultFruits = ['りんご','バナナ'];
const userFavoriteFruits = ['オレンジ','ぶどう'];

//ES5までの記述。concatを使う。
defaultFruits.concat(userFavoriteFruits);
//結果
['りんご','バナナ','オレンジ','ぶどう']

//spread演算子は、以下のような記述をし配列を一つにする。
[...defaultFruits,...userFavoriteFruits]

//結果
['りんご','バナナ','オレンジ','ぶどう']

spread演算子の利点

以下のように、要素を追加して新しい配列を作ることができるところ。

[...defaultFruits,'新しい要素',...userFavoriteFruits]
//結果

['りんご','バナナ','新しい要素','オレンジ','ぶどう']

直感的にわかりやすい。