はじめに

JSのデータ型であるプリミティブ型とオブジェクトの違いについてまとめました。
僕の下手くそな図と共にお楽しみください。

データ型について

JavaScript（ES）には8種類のデータ型が存在する。
そして、その8種類のデータ型はプリミティブ型とオブジェクト型の2つに分けることができる。

プリミティブ型について

1. 変数には値が格納される
2. 一度作成するとその値を変更することはできない → immutable（不変）
3. letを使って再代入はできる

immutableについて

一度作成するとその値を変更することはできないけど、letを使って再代入はできるというのはどういう状況か図にまとめました

let prop = 'hoge'

propと言う変数に'hoge'と言う文字列を格納したとします、これのメモリ空間を図で表すと

propという変数が'hoge'という文字列が格納されているアドレスに参照を保持している状態です。
そこで

let prop = 'hoge'
+ prop = 'fuga'

propの値を再代入すると、メモリ空間は

'hoge'と言う文字列と別のメモリに'fuga'と言う文字列が格納され、propが持つ参照が'fuga'が入っているアドレスに向けて変更されます。

なので、再代入はプリミティブ型の文字列である'hoge'が変更されているわけではなくあくまでもpropの参照先が変更されただけで一度作成するとその値を変更することはできないけど、letを使って再代入はできると言うことになります。

オブジェクトについて

上であげたプリミティブ型以外全て

1. 変数には参照が格納される
2. 値を変更することができる → mutable（可変）

mutableについて

値を変更することができるとはどう言うことか
オブジェクトを定義してメモリ上でどのように値が保持されているのか図にしました

let obj = {
  prop: 'hoge'
}

propと言うプロパティーを持ったオブジェクトをobjに格納しました

propの値'hoge'が変わったとしても変数objが保持している参照は変わらないことになるのでオブジェクトはmutable(値を変更することができる)
オブジェクトはプロパティの参照を管理している

参照リンク

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Grammar_and_types#data_types
https://developer.mozilla.org/ja/docs/Glossary/Mutable
https://developer.mozilla.org/ja/docs/Glossary/Immutable

まとめ

データ型にはプリミティブ型とオブジェクトが存在する
プリミティブ型はimmutable
オブジェクトはmutableで名前付きの参照を管理している入れ物

おわり