JS~オブジェクトと参照~

概要

JSには８つのデータ型があります。
７つのデータ型（プリミティブ型）これは、Number,string,Boolean,Null,Undefined,BigInt,Symbolがあります。
そしてもう１つはオブジェクトです。
プリミティブ型では、変数を直接代入しました。これに対しオブジェクトでは参照と言います。
この記事では参照について触れていきます。

参照とは

index.js

const menu = {
  name :'パンケーキ',
  price : '580円',
  set : '1000円' 
};

console.log(menu);

このmenuの中は１つの箱になります。箱の中には、一つ一つ名前が付けられた値が保存されています。
上記の例でいうと、nameと名前のついたパンケーキ。priceと名前のついた580円、setと名前がついた1000円です。
オブジェクトは内部にプロパティを持つデータの集合です。
変数に入れるのはデータの集合ではありません。
menuという内部データを見るためのパスワードです。これを参照と言います。
参照を代入する値をconstで宣言しているので書き換えはできないのではと考えます。
しかし、変数に代入するのはmenu(パスワード)であり、そこから先の{オブジェクト内}は定数では無いからです。
したがって、constで宣言しているにも関わらず値の書き換えができるということです。

コード

上記の内容をコードにすると以下のようになります。

index.js

console.log(menu); //{name: "パンケーキ", price: "580円", set: "1000円"}

const menu2 = menu; //参照の複製

menu2.price = '400円';　//複製でプロパティを書き換える

console.log(menu);

//{name: "パンケーキ", price: "400円", set: "1000円"}

まとめ（擬人化）

独自の解釈でまとめます。
menuという家があります。
const = menu これはmenu家の鍵になります。
この鍵を使用してmenuという家に入ります。
menuという家には複数の人が出入りします。そこで、鍵の複製が必要になリます。その鍵を元にアクセスして値を書き換えることができるというわけです。
menuもmenu2も複製した鍵なので無効になることはなく、アクセスすることができます。

index.js

const menu = {
  name :'パンケーキ',
  price : '580円',
  set : '1000円' 
};
console.log(menu);
//{name: "パンケーキ", price: "580円", set: "1000円"}

const menu2 = menu; //複製

menu2.price = '400円'; //書き換え

console.log(menu2); 
//{name: "パンケーキ", price: "400円", set: "1000円"
console.log(menu);
//{name: "パンケーキ", price: "400円", set: "1000円"}