二つの配列の値が同じになる理由を教えてください。

Question

arr1の値をarr2に代入するつもりでconcatメソッドを使って以下のcodeを書きましたが、
結果的にarr1まで値が変わる理由を教えてください。
個人的にはarr2だけの値が変わると思いましたが。

'use strict';

{ 
  let arr1 = [{x : 2}, {y : 5}];
  let arr2 = [].concat(arr1);
  arr2[1].y = 123;

  console.log(arr1);
  console.log(arr2);  
  
 }

出力結果は　arr1とarr2が同じになります。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[kinsncn]

修正しました。

Answer 1

結果的にarr1まで値が変わる理由を教えてください。

配列としては別ですが、要素に入っているオブジェクトは両者で共有されます。

たとえば、arr[2] = {}のように新たなオブジェクトを代入すれば、配列そのものは共有されていないことがわかるかと思います。

Comments

[kinsncn]

ご回答ありがとうございました。配列の参照先がおなじobject、書き換わったのはobjectなので結果的に二つ配列が同じになったと理解すればいいですか？

[maisumakun]

両者の配列は別なインスタンスですが、中身は同じものが入っている、という状態です。

[kinsncn]

ありがとうございました。

[think49]

補足しますと、直接的な原因は Array.prototype.concat() が「シャローコピー」だからです。
配列を引数にとれば、子要素を列挙して新配列に代入しますが、代入値の複製はしません。

一方、JSON.parse(JSON.stringify()) は条件付きながら「ディープコピー」です。

[kinsncn]

@thin49 さん、ありがとうございました。
確かにシャローコピーみたいな解析をネットの検索でもみましたが、
かなり難しくて、もう少し検索してみます。ありがとうございました。