【React初心者メモ】スプレッド構文（...）

スプレッド構文とは

配列やオブジェクトの要素やプロパティを「展開」して、別の配列やオブジェクトにコピー・結合・分解するための構文です。

配列でのスプレッド構文

配列のコピー

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
console.log(arr2);  // [1, 2, 3]
// arr1とは別の新しい配列が作られる

配列の結合

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined);  // [1, 2, 3, 4]

配列の要素の分解

const numbers = [10, 20, 30];
console.log(...numbers);  // 10 20 30

// 関数呼び出し時に使うと、配列を個別の引数として渡せます。
function sum(a, b, c) {
  return a + b + c;
}
const nums = [1, 2, 3];
console.log(sum(...nums));  // 6

オブジェクトでのスプレッド構文

オブジェクトのコピー

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2);  // { a: 1, b: 2 }

オブジェクトのマージ

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged);  // { a: 1, b: 3, c: 4 }