JavaScript でオブジェクトのコピー

さて、JavaScript ではオブジェクトの値を代入した場合に参照としてコピーされます。

const obj = {
    name: "tarou",
    age: 24
}

// obj を代入する
const other = obj;

// コピーした値を変えると
other.name = "hanako";
other.age  = 17;

// コピー元のオブジェクトの値も変わってしまう
console.log(obj.name);
console.log(obj.age);
// output:
// hanako
// 17

このように参照渡しの場合は元のオブジェクトに対して意図しない変更が行われる可能性があります。

Object.assign を使う

参照はなくて値をコピーしたい場合は Object.assign を使用するのが簡単みたいです。

const obj = {
    name: "tarou",
    age: 24
}


// Object.assign を経由して代入する
const other = Object.assign({}, obj);
// const other = obj;

other.name = "hanako";
other.age  = 17;

// 元のオブジェクトの値はそのまま
console.log(obj.name);
console.log(obj.age);
// output:
// tarou
// 24

これで大丈夫です。

ネスとしたオブジェクトの場合

ただし、プロパティがオブジェクトの場合は、そのプロパティは参照渡しのままなので注意してください。

const obj = {
    // Object のプロパティ
    name: {
        sei: "yamada",
        mei: "tarou"
    },
    age: 24
}

const other = Object.assign({}, obj);
other.age = 17;
// Object のプロパティを書き換えると
other.name.mei = "hanako";

// Object のプロパティが書き換わってしまう
console.log(obj.age);
console.log(obj.name.mei);
// output:
// 24
// hanako

うーん、この。