JavaScriptで配列やオブジェクトをコピーする

新しいオブジェクトに既存のオブジェクトを代入するだけでは、 別のオブジェクトを作成したことになりません。

既存のオブジェクトに影響を与えないような、別のオブジェクトを新規で作成する方法を記述します。

方法：オブジェクトのディープコピーを作成する

const originObj = {a:0, b:{c:'d'}};
const deepCopyObj = JSON.parse(JSON.stringify(originObj));
console.log(originObj);   // {a: 0, b:{c: "d"}}
console.log(deepCopyObj); // {a: 0, b:{c: "d"}}

deepCopyObj.b.c = 'test';
console.log(originObj);   // {a: 0, b:{c: "d"}}
console.log(deepCopyObj); // {a: 0, b:{c: "test"}}

• キーワードはディープコピーです。
• 関連ワードとしてシャローコピーがあります。

方法：配列のディープコピーを作成する

const originAry = ['Apple', 'Banana', ' Chocolate'];
const newAry = [...originAry];
console.log(originAry);   // ["Apple", "Banana", " Chocolate"]
console.log(newAry); // ["Apple", "Banana", " Chocolate"]

newAry.push('Dog');
console.log(originAry);   // ["Apple", "Banana", " Chocolate"]
console.log(newAry); // ["Apple", "Banana", " Chocolate", "Dog"]

キーワードはスプレッド構文です。

その他の記事について

overworker.hatenablog.jp