オブジェクトのコピー/クローンを作成する方法 | 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));
スポンサーリンク

この記事が有用でしたら、↓にあるSNSボタン…
この記事が有用でしたら、↓にあるSNSボタンからご友人にご共有いただけますと幸いです!
JavaScript / jQuery
ASP Androidアプリ開発以外

プログラミングスキルを習得して業務/転職/副業に活かしたい方へ
これからの時代は終身雇用が崩壊し、自分のスキルで食べていく時代が到来します。 そのような時代の中で、プログラミングのスキルは単純なプログラム開発業務だけではなく、データ解析などあらゆる業務で普遍的に使用できる非常に有益なスキルと考えられます。 目先の業務や将来の転職に備えて、プログラミングのスキルを習得するのはいかがでしょうか?

プログラミングを生かした副業も非常にオススメです。 転売などの手を止めると稼ぎがなくなってしまう副業と違い、 アプリやサイト運営などプログラミングを使用した副業の一部は一度公開してしまえばその後は放置しても継続してお金を稼ぐことができるという非常に良い特性があります。

一方で業務/転職/副業で活かせるレベルまでプログラミングを習得しようとすると、質問ができない独学では限界があり、挫折してしまうことが多いでしょう。

そんなときは下記のような質問しながら学習を進められるオンライン上のプログラミングスクールがオススメです!

無料体験や無料カウンセリングなどもありますので、まずは確認だけでもしてみてはいかがでしょうか?

Tech Academy
Aresei-note