スプレッド構文とただの代入の違い

[hro19]

const person = {
    name:"Max",
    age:33,
}

const Aperson = person;

const Bperson = {
    ...person
}

console.log(person);
console.log(Aperson);
console.log(Bperson);

Aperson.age = 48;

console.log(person);
console.log(Aperson);
console.log(Bperson);

Aperson.age = 48をしたことによって、Apersonとpersonどちらのageにも48が代入されました。一方でBpersonのageは変化なしです。

Aperson は person オブジェクトそのものを参照しているため、変更が反映されますが、Bperson はスプレッド演算子を使ってオブジェクトの中身をコピーしているため、元のオブジェクトとは独立しています。