JavaScriptでオブジェクトが入った変数をコピーするには、いくつかの方法があります。
1. 浅いコピー（シャローコピー）
オブジェクトの参照をコピーする方法です。オブジェクト内のプロパティは共有されます。
方法
- Object.assign()
const obj1 = {
name: "John",
age: 30,
};
const obj2 = Object.assign({}, obj1);
// obj1とobj2は同じオブジェクトを参照している
console.log(obj1 === obj2); // true
// obj1のプロパティを変更すると、obj2も変更される
obj1.name = "Mary";
console.log(obj2.name); // "Mary"
コードは注意してご使用ください。
- スプレッド構文
const obj1 = {
name: "John",
age: 30,
};
const obj2 = { ...obj1 };
// obj1とobj2は同じオブジェクトを参照していない
console.log(obj1 === obj2); // false
// obj1のプロパティを変更しても、obj2は変更されない
obj1.name = "Mary";
console.log(obj2.name); // "John"
コードは注意してご使用ください。
2. 深いコピー（ディープコピー）
オブジェクトとそのプロパティすべてを新しいオブジェクトにコピーする方法です。
方法
- JSON.parse(JSON.stringify())
const obj1 = {
name: "John",
age: 30,
address: {
city: "Tokyo",
},
};
const obj2 = JSON.parse(JSON.stringify(obj1));
// obj1とobj2は異なるオブジェクトである
console.log(obj1 === obj2); // false
// obj1のプロパティを変更しても、obj2は変更されない
obj1.name = "Mary";
console.log(obj2.name); // "John"
// obj1.addressのプロパティを変更しても、obj2.addressは変更されない
obj1.address.city = "Osaka";
console.log(obj2.address.city); // "Tokyo"
コードは注意してご使用ください。
Lodashなどのライブラリ
Lodashなどのライブラリを使用すると、簡単に深いコピーを行うことができます。
const _ = require("lodash");
const obj1 = {
name: "John",
age: 30,
address: {
city: "Tokyo",
},
};
const obj2 = _.cloneDeep(obj1);
// obj1とobj2は異なるオブジェクトである
console.log(obj1 === obj2); // false
// obj1のプロパティを変更しても、obj2は変更されない
obj1.name = "Mary";
console.log(obj2.name); // "John"
// obj1.addressのプロパティを変更しても、obj2.addressは変更されない
obj1.address.city = "Osaka";
console.log(obj2.address.city); // "Tokyo"
コードは注意してご使用ください。
3. その他の方法
上記以外にも、特定の状況で使用できる方法があります。
-
手動でコピーする
オブジェクトのすべてのプロパティを手動でコピーします。 -
自作の関数を使用する
深いコピーを行う自作の関数を作成します。
どの方法を使用するべきか
使用する方法は、状況によって異なります。
浅いコピーで十分な場合は、Object.assign()やスプレッド構文を使用するのが簡単です。
深いコピーが必要な場合は、JSON.parse(JSON.stringify())やLodashなどのライブラリを使用するのが便利です。
特定の状況に合わせた方法が必要な場合は、手動でコピーしたり、自作の関数を作成したりします。