Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@tsukiyama3

JavaScript プリミティブ型とオブジェクトについて

はじめに

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

データ型について

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

プリミティブ型について

データ型
Boolean 真偽値
null null
undefined 未定義
Number 数値
BigInt 長整数
String 文字列
Symbol シンボル
  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で名前付きの参照を管理している入れ物

おわり

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What is going on with this article?