Javascriptのオブジェクトの追加

Question

以下のコードを実行すると
sample にも test2 の値が追加され書き変わってしまいます。

追加されないようにするにはどうすると良いのでしょうか？

let sample = {
  test: '123'
};

let sample2 = sample;
sample2.test2 = '456';

console.log(sample);

Answer 1

「なぜそうなるか」は過去質問にあったと思います。

大目的がわかりませんが、オブジェクトじゃなくプロパティだけ代入するとか。

let sample = {};
sample2.test = sample.test;
sample2.test2 = '456';

console.log(sample);

Answer 2

参照渡し？というワードに辿り着く事ができました。

Comments

[miyabi_pudding]

「参照渡し」関連の話にいくと、
かなり深いプログラミングの仕組みの部分まで遡ってしまうので、
今は、オブジェクトはそういう挙動なんだ、程度に留めた方がいいと思います。

ちなみに、JavaScriptには参照渡しという仕組みは存在しません。
そう言ったほうがわかりやすいということからか、そう呼称している方はかなり多いですが、
JavaScriptの参照の仕組みと、
参照渡しというものの仕組みは別物です。
（挙動は似ているようには見えるが）

[takumil]

なるほどですね。ありがとうございます。

[m.ts10806]

意識したほうがいいですね。
https://qiita.com/yuta0801/items/f8690a6e129c594de5fb

[miyabi_pudding]

記事もそうですが、
コメントのやり取りがめちゃくちゃ参考になりますね。
「参照呼び出し」
これは的を射てそうな言い方な気が。

[K_3578]

https://qiita.com/raccy/items/d4c5e7995a8fc90109ee#crystal
参考程度にですがJavaScriptに限らずですけど｢call by reference｣以外を「参照渡し」と呼称している記事
なんかをまとめてる記事もあります。
つまり、これぐらい勘違いを起こしやすい問題なので
理解が及ばない内は「そういうもの」と捉えておいた方がいいかと。

((2021/05/20 15:36)のZuishinさんの指摘を受けて表現を修正しました。)

[miyabi_pudding]

JSが一番記事数が多いのが笑えないですね。
一番初学者が触れそうな言語だからか・・・。

> 理解が及ばない内は「そういうもの」と捉えておいた方がいいかと。

これに賛成です。
質問者さんの理解レベルが高まったら、深く勉強してみる、がベストだと思います。

[Zuishin]

そこに挙げられている記事は初心者の書いた記事ばかりなので、解釈が分かれるというのは疑問があります。

[K_3578]

>Zuishinさん
全部を確認した訳じゃなかったのですが、今さらっと見た感じどちらかというと、
初心者が誤解したまま備忘録として残してるのが多いですね･･･それだと「解釈」という
表現はおかしいですね、少し修正します。

(2021/05/20 15:47)のコメントに対して
>miyabi_takatsukさん
すいません、お手数お掛けします。

[miyabi_pudding]

> 初心者の書いた記事ばかり

確かに、「あ、こんな風に動くんだ、記事にしたろ！」感が漂うもの多いですね。
解釈どうこうより、「あくまでそういう仕様」の話ですしね・・・。

K_3578さん >
合わせて、こちらのコメントも修正します！

[m.ts10806]

結局は「気に病まなくても、考えなくてもいいようなコードを組む」でいい気がします。
本件で言うと、オブジェクトまるごとコピーする必要があるのかどうかあたりから検討するとか。。
用途が別なら別途取得したほうが間違いがないようにも思います。