[Javascript] ObjectやArrayデータのハードコピー

NFTに全く興味がそそらない、ユゲタです。 流行り始めてますね〜〜〜NFT。 数年前の仮想通貨バブルを思い出す感じです。 もっと手軽な感じでは、2020年頃に、アホみたいに騒いでいた、「ClubHouse」も、今考えると、一発屋ジャンルなのではないかと考えてしまいますね。 果たしてNFTが一発屋になるかどうかは、神のみぞ知る・・・なのか？ Javascriptの落とし穴の一つに、わかりにくい参照コピーというのがあり、意識できていないと、ある時発生する不具合に苦しんでしまうので、その内容理解と対策法をブログに書き残しておきたいと思います。

参照コピーについて

ハードコピーと聞くと、IoT系に聞こえる人もいるかもしれないので、「参照コピー」という風にいいますが、ここでは同じ意味で使います。 ※色々調べてみると、書かれている言葉の定義が色々と違っていることもあるので、このブログの間違っているご指摘は、お問合せしてくださいませ。 C言語をやっていると、参照渡しと、ポインタというのが、真逆の意味なのに、言い方が違っていて、ややこしすぎアレルギーになってしまう人も多いようですが、 簡単に説明すると、参照渡しというのは、受け渡した値（変数や配列）の値を渡した先で書き換えても、元のデータは変更されないという状態で、 ポインタは、受け渡したデータが書き変わってしまうデータの受け渡し方法です。 Javascriptは、次のように変数を受け渡すと、参照渡しのコピーになりますが、ArrayやObjectデータを受け渡すと、ポインタ渡しになってしまいます。 # 参照コピー var a = "aaa"; var b = a; b = "bbb"; console.log(a); console.log(b); > aaa > bbb # ポインタ var a = [0,1,2,3]; var b = a; b[0] = 10; console.log(a); console.log(b); > [10,1,2,3] > [10,1,2,3] おわかりいただけただろうか・・・ ポインタって、元データを書き換えてしまうので、 これって知らずに使っていると、知らんうちにとんでも無いシステムエラーにつながってしまいます。

Javascriptでのハードコピーをするいくつかの方法

json変換受け渡し

var a = [0,1,2,3]; var b = JSON.parse(JSON.stringify(a)); b[0] = 10; console.log(a); console.log(b); > [0,1,2,3] > [10,1,2,3]

Arrayのハードコピー

var a = [0,1,2,3]; var b = a.slice(); b[0] = 20; console.log(a); console.log(b); > [0,1,2,3] > [20,1,2,3]

Objectデータのハードコピー

var a = {a:1 , b:2 , c:3}; var b = Object.assign({} , a); b.a = 10; console.log(a); console.log(b); > {a:1 , b:2 , c:3} > {a:10 , b:2 , c:3}

特性を覚えてスマートなプログラミングライフを

今回ハードコピーを取り扱ったのは、ポインタとしての受け渡しを扱う方が、ケースとして少なく、 参照渡しの方をデフォルトにして、PHPのように、@変数でポインタ受け渡しにする方が、システムとして便利なのにな〜と思ったけど、 今更変更されても困るので、こうした仕様をしっかりと覚えて頭に叩き込んでおくのが重要という事で、今回のブログを書いてみました。 最悪なのは「知らなかった」という事で起きたトラブルに対応する時に地獄のような時間と労力を有してしまうことと、 リファレンスサイトでも、こうした挙動に関して、あまり細かく書かれていない為、これまで結構苦労した自分の経験を元に、この記事を読んで助かってくれる人がいるかと思います。 さて、ポインタを便利に活用するのって、どういう場面なんでしょう？ その点の答えがサラサラと出てくるようになると、プログラミングレベルがアップしたと思っていいでしょうね。 え？C言語やってるから、難しく無いって？今時のエンジニアはフロントエンドからスタートする人が多いので、レベルアップ感の共感も多いのでは無いでしょうか？ね？