オブジェクトのコピー/クローンを作成する方法 | JavaScript / jQuery

JavaScriptにおいてオブジェクトのコピー/クローンを作成する方法です。

通常の変数代入だと…

以下のrawというオブジェクトのコピーを作成することを考えましょう。

class TestClass {
    constructor(name) {
        this.name = name;
    }
    show() {
        console.log(this.name);
    }
}
var raw = new TestClass("cat");
raw.show(); // result: cat

単純に変数の代入(イコール)を使用してcopyという変数を作成します。

var copy = raw;

ここで元のrawのメンバを変更します。

raw.name = "dog";

今回はコピーを作成したいので、copyはrawの状態に依存しないでほしいところですが、ここで

copy.show();

を実行すると、”cat”ではなく、”dot”が表示されてしまいます。

これはJavaScriptのイコール演算子は値のコピーではく、オブジェクトの実態(アドレス)のコピーであるからです。

オブジェクトのコピー/クローンを作成する方法

オブジェクトのコピー/クローンを作成する方法を紹介します。

コピー/クローンを作成する関数を用意する

再度newでオブジェクトを作成して、値をコピーする方法です。

function createCopy(raw) {
    var result = new TestClass();
    result.name = raw.name;
}
var copy = createCopy(raw);

ただ、あまりこの方法はオススメしません。
なぜならば、クラスのメンバが増えるたびにコピーする関数の方も修正する必要があり、大変だし、バグの温床となります。

JSONを使用する

オススメの方法がこちらです。
一度JSON文字列に変換後、再度JSONからパースすればコピー/クローンが作成できます。

サンプルコードは以下です。

var copy = JSON.parse(JSON.stringify(raw));