残余引数とスプレッド構文 の

残余引数とスプレッド構文について

JavaScriptには、不定数の要素を扱いやすくする組み込みの...演算子があります。文脈によって、_rest演算子_または_spread演算子_と呼ばれます。

Rest演算子

Rest要素

...が代入の左辺に現れるとき、この3つのドットはrest演算子として知られています。3つのドットと変数名を合わせたものは、rest要素と呼ばれます。これは0個以上の値を集め、1つの配列に格納します。

const [a, b, ...everythingElse] = [0, 1, 1, 2, 3, 5, 8];

a;
// => 0
b;
// => 1
everythingElse;
// => [1, 2, 3, 5, 8]

JavaScriptでは、他のいくつかの言語とは異なり、rest要素は末尾にカンマを置けないことに注意してください。分割代入では_必ず_最後の要素でなければなりません。以下の例ではSyntaxErrorがスローされます。

const [...items, last] = [2, 4, 8, 16]

Restプロパティ

配列と同様に、rest演算子は1つ以上のオブジェクトプロパティを集めて、1つのオブジェクトに格納するためにも使えます。

const { street, ...address } = {
  street: 'Platz der Republik 1',
  postalCode: '11011',
  city: 'Berlin',
};

street;
// => 'Platz der Republik 1'

address;
// => {postalCode: '11011', city: 'Berlin'}

Rest仮引数

関数定義で最後の引数の隣に...が現れると、その仮引数は_rest仮引数_と呼ばれます。関数が不定数の引数を配列として受け取れるようにします。

function concat(...strings) {
  return strings.join(' ');
}

concat('one');
// => 'one'

concat('one', 'two', 'three');
// => 'one two three'

Spread

Spread要素

...が代入の右辺に現れるとき、それはspread演算子として知られています。配列を要素のリストに展開します。rest要素とは異なり、配列リテラル式のどこにでも現れることができ、複数置くこともできます。

const oneToFive = [1, 2, 3, 4, 5];
const oneToTen = [...oneToFive, 6, 7, 8, 9, 10];

oneToTen;
// => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const woow = ['A', ...oneToFive, 'B', 'C', 'D', 'E', ...oneToFive, 42];

woow;
// =>  ["A", 1, 2, 3, 4, 5, "B", "C", "D", "E", 1, 2, 3, 4, 5, 42]

Spreadプロパティ

配列と同様に、spread演算子はあるオブジェクトから別のオブジェクトにプロパティをコピーするためにも使えます。

let address = {
  postalCode: '11011',
  city: 'Berlin',
};

address = { ...address, country: 'Germany' };
// => {
//   postalCode: '11011',
//   city: 'Berlin',
//   country: 'Germany',
// }