【React初心者メモ】レスト構文（...）

レスト構文とは

レスト構文とは、関数の引数や配列・オブジェクトの分割代入の際に、残りの値をまとめて1つの変数に受け取るために使います。

具体例

関数の引数でのレスト構文

function sum(...numbers) {
  // ...numbersは配列として残りの引数を全部受け取る
  return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3));  // 6
console.log(sum(4, 5));     // 9

配列の分割代入でのレスト構文

const [first, ...rest] = [10, 20, 30, 40];
console.log(first);  // 10
console.log(rest);   // [20, 30, 40]

オブジェクトの分割代入でのレスト構文

const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(a);       // 1
console.log(others);  // { b: 2, c: 3 }