【JavaScript】スプレッド構文と代入の挙動の違い

スプレッド演算子を使った場合と、代入を使った場合の配列の挙動が異なる。

オブジェクトの代入

代入はコピーではなく、参照が代入されるので、配列aを操作すると配列bも変わってしまう。

const a = [1, 2, 3];
const b = a;
a.push(10);

// console.log(a)の結果
// [1, 2, 3, 10]

// console.log(b)の結果
// [1, 2, 3, 10]

スプレッド構文の場合

スプレッド構文を使うと配列のコピーが作成できる（コピーなので配列xを操作しても、配列yに影響無し）

const x = [1, 2, 3];
const y = [...x];
x.push(10);

// console.log(x)の結果
// [1, 2, 3, 10]

// console.log(y)の結果
// [1, 2, 3]