JavaScript/スプレッド構文

スプレッド構文

スプレッド構文（Spread Syntax）は、配列やオブジェクトを展開するために使用されるJavaScriptの構文です。スプレッド構文を使用することで、配列やオブジェクトのコピーやマージ、関数の引数展開が簡単に行えます。

構文

...iterable

配列やオブジェクトを展開するには、... を使用します。
配列では順序が保たれ、オブジェクトではキーと値のペアが展開されます。

使用例

配列の展開

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

console.log(newNumbers); // [1, 2, 3, 4, 5]

配列 numbers を展開して新しい配列に追加しています。

配列のコピー

const original = [10, 20, 30];
const copy = [...original];

console.log(copy); // [10, 20, 30]

スプレッド構文を使用して配列の浅いコピーを作成します。

オブジェクトの展開

const user = { name: 'Alice', age: 25 };
const newUser = { ...user, country: 'Japan' };

console.log(newUser); 
// { name: 'Alice', age: 25, country: 'Japan' }

オブジェクト user を展開し、新しいプロパティを追加しています。

オブジェクトのコピー

const original = { x: 1, y: 2 };
const copy = { ...original };

console.log(copy); // { x: 1, y: 2 }

オブジェクトの浅いコピーをスプレッド構文で作成します。

関数の引数展開

function sum(a, b, c) {
  return a + b + c;
}

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

配列 numbers の要素を展開して関数の引数として渡します。

ネストした構造の展開

const nestedArray = [1, [2, 3], 4];
const flattened = [0, ...nestedArray, 5];

console.log(flattened); // [0, 1, [2, 3], 4, 5]

スプレッド構文はネストした構造そのものを展開するわけではありません。

配列の結合

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];

console.log(combined); // [1, 2, 3, 4]

複数の配列をスプレッド構文で結合できます。

オブジェクトのマージ

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 }

後に指定したオブジェクトのプロパティが優先されます。

特徴と注意点

浅いコピー: スプレッド構文によるコピーやマージは浅いコピーを作成します。ネストしたオブジェクトや配列は元の参照を保持します。
順序の保持: 配列では元の順序が保たれます。
デフォルト値のオーバーライド: オブジェクト展開では、後に記述されたプロパティが上書きされます。

使用例: 分割代入との組み合わせ

スプレッド構文は分割代入と組み合わせて使用することもできます。

配列の残りを取得

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 }

参考