【JavaScript】 プリミティブとは?リテラルやオブジェクトとの違い
更新日:2021/01/12
JavaScriptにはリテラルやプリミティブ・オブジェクトなど、データをあらわす言葉が複数あります。
今回は、これらの違いについて整理をしていきます。
リテラルとプリミティブとオブジェクトの違い
例えば次のようなコードがあるとします。
const a = 1;
ネット等で調べていると、コード上の 1 についてリテラルと表現していたり、プリミティブと表現していたりします。
どちらも正しいのですが、 リテラルとプリミティブは別のものです。
リテラルとは、プログラムコード上でデータを表現する文字列の集まりです。
プリミティブとはJavaScriptエンジンの内部で割り当てられたデータのうち、数値そのもののやテキストそのものといった、最小単位のデータを指します。
オブジェクトは、プリミティブやオブジェクトを指し示すプロパティを持つデータ構造です。
これではわかりにくいと思うので、リテラルとプリミティブとオブジェクトについて、もう少し詳しく解説してみます。
リテラルとは
リテラルとはJavaScript文法の中の一つで、データを定義することができます。
例えば、数字は数値をあらわすリテラルです。
ダブルクォーテーション(")やシングルクォーテーション(')で囲むと、文字列をあらわすリテラルです。
データはプリミティブとオブジェクトの二つに分類でき、リテラルは両方を定義することができます。
リテラル一覧
種類 | 形式 | 意味 | 例 | |
---|---|---|---|---|
プリミティブ | Null値 | null | Null値をあらわす | |
真偽値 (Boolean) | true または | |||
数値 (Number) | dddd | 10進数の整数 ※dは任意の桁数および0~9 | 5 や 100など | |
dddd.ddd | 10進数の小数 ※dは任意の桁数および0~9 | 5.5 や 100.5 など | ||
ddedd | 浮動小数点表記 ※dは任意の桁数および0~9 | 5e5 や 100e5 など | ||
0bbbbbbbb | 2進数表記 ※bは任意の桁数および0~1 | 0b10001100 など | ||
0oooooo | 8進数表記 ※oは任意の桁数および0~7 | 0o755 など | ||
0xhhhhh | 16進数表記 ※hは任意の桁数 | 0x8fff など | BigInt | ddddn | 数値(Number) よりも桁数が多い | 5n や 100nなど |
文字列 (String) | "tttttt" | ダブルクォーテーション で囲んだ文字列 | "今日は晴れ"など | |
'tttttt' | シングルクォーテーション で囲んだ文字列 | '今日は晴れ'など | ||
オブジェクト | オブジェクト | { プロパティ名:値 , プロパティ名:値・・・ } | プロパティ名と値の組みの羅列を { }でで囲んだもの | { data1:1 , data2:"A" } など |
配列 (Array) | [値,値・・・] | [ ]で値の羅列を で囲んだもの | [ 1 , 2 , 3 ]など | |
テンプレートリテラル | `tttttt` | テンプレートリテラル参照 | ||
関数リテラル | function(引数,引数・・・){ プログラムコード} | 関数オブジェクトを定義する | 仕様上はリテラルに 分類されていないが、 | |
アロー関数リテラル | (引数,引数・・・)=>{ プログラムコード} | アロー関数オブジェクトを定義する |
プリミティブとは
プリミティブは最下位レベルで扱われる直接的な実データです。
プリミティブが生成されるパターン
関連するリテラルをプログラムコードから読み取りプリミティブに変換されるケースと、演算結果により生成されるケースがあります。
プログラムコードから変換されるケース
const a = 1; // 値が1の数値型プリミティブが作成される
const b = "abcde"; // 値が"abcde"の文字列型が作成される
上の例ではコードから数値リテラルの「1」が読み取られ、値が1の数値型プリミティブが作成されます。
作成されたプリミティブにはラベルのようなものが割り当てられ、そのラベルが変数aに代入されます。
■関連記事:【JavaScript】 参照渡し?値渡し?これで悩む必要がなくなる!かも
演算結果から作成されるケース
const a = 1;
const b = 2;
const c = a + b;
// プリミティブ値1 と プリミティブ値2 から プリミティブ値3が作成される
上の例では、aとbが持っているラベルを見て、値1と2を取り出し加算します。
加算した結果から、あらたに値が3の数値型プリミティブが作成され、割り当てられたラベルのようなものが変数cに割り当てられます。
プリミティブは上書きされない
JavaScriptの仕様では、一度作成されたプリミティブが上書きされることがありません。
例えば次の例は、変数aが指し示すプリミティブ値1が、3に変更されることはありません。
const a = a + b;
あらたに値が3の数値型プリミティブが作成されて、変数aにそのプリミティブのラベルのようなものが割り当てられています。
プリミティブ値1は残っているのです。
プリミティブを削除する方法はない
JavaScriptの仕様では、コードからこのプリミティブ値1を削除する方法が定義されていません。
ですが、プリミティブ値が持つラベルのようなものが変数に代入されていないかをチェックし、使用されていなければ自動的に削除してくれる機能が実装されています。
プリミティブundefinedとリテラル
次のコードは、変数にnullプリミティブとundefinedプリミティブを代入しています。
const a = null;
const b = undefined;
nullは、リテラルです。
しかしundefinedはリテラルではありません。
undefinedはグローバルオブジェクトのundefinedプロパティを参照しています。
このプロパティにはundefinedプリミティブがセットされているので、結果的に変数bにundefinedプリミティブがセットされます。
プリミティブ一覧
型 | 内容 |
---|---|
Undefined | 未定義を表す値 | Null | nullを表す値 | Boolean | 真偽値(trueまたはfalse) | Number | 数値を表す値 | BigInt | 長整数を表す値 | String | 文字列を表す値 | Symbol | シンボル値を表す値 |
オブジェクトとは
オブジェクトとは、プリミティブやオブジェクトを指し示すプロパティを持つデータ構造です。
const a = {
num : 1, // プリミティブ
obj: { // オブジェクト
text : "今日は晴れです", // プリミティブ
objA : { // オブジェクト
・・・・
}
}
}
オブジェクト内にオブジェクトを定義することが可能なためどこまでのネストしていくことが可能ですが、最終的にはプロパティで終了するか、親オブジェクトの参照による循環参照のどちらかになります。
循環参照
const a = { obj: { } , text:"A" };
a.obj.a = a;
console.log( a.obj.a.obj.a.obj.a.text ); // "A"
JavaScriptは内部的には、関数や配列もオブジェクトで定義されています。
そのためプロパティ追加や既存プロパティの変更することで、自分用にカスタマイズすることが可能です。
しかし本来の機能を損なう可能性があることから、業界での作法としてプロパティの追加や変更は非推奨となっています。
更新日:2021/01/12
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。