MENU

JavaScript構文変数プリミティブ

【JavaScript】 プリミティブとは?リテラルやオブジェクトとの違い

更新日:2021/01/12

 

 

JavaScriptにはリテラルやプリミティブ・オブジェクトなど、データをあらわす言葉が複数あります。

 

今回は、これらの違いについて整理をしていきます。

 

■お願い
去年ECMAScript2020を頑張って日本語訳しましたが、誰も見てくれません・・・
誰かみて!!
【JavaScript】 学習のためECMAScript2020を日本語訳してみました

リテラルとプリミティブとオブジェクトの違い

 

例えば次のようなコードがあるとします。

 


const a = 1;

 

ネット等で調べていると、コード上の 1 についてリテラルと表現していたり、プリミティブと表現していたりします。

 

どちらも正しいのですが、 リテラルとプリミティブは別のものです。

 

リテラルとは、プログラムコード上でデータを表現する文字列の集まりです。

 

プリミティブとはJavaScriptエンジンの内部で割り当てられたデータのうち、数値そのもののやテキストそのものといった、最小単位のデータを指します。

 

オブジェクトは、プリミティブやオブジェクトを指し示すプロパティを持つデータ構造です。

 

これではわかりにくいと思うので、リテラルとプリミティブとオブジェクトについて、もう少し詳しく解説してみます。

 

リテラルとは

 

リテラルとはJavaScript文法の中の一つで、データを定義することができます。

 

例えば、数字は数値をあらわすリテラルです。
ダブルクォーテーション(")やシングルクォーテーション(')で囲むと、文字列をあらわすリテラルです。

 

データはプリミティブとオブジェクトの二つに分類でき、リテラルは両方を定義することができます。

 

リテラル一覧

 

 

リテラル一覧

種類

形式

意味

プリミティブ Null値 null Null値をあらわす
真偽値

(Boolean)

true

または
false

数値

(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
0bはゼロビー

0b10001100 など
0oooooo 8進数表記

oは任意の桁数および0~7
0oはゼロオー

0o755 など
0xhhhhh 16進数表記

hは任意の桁数
および0~9、
a~f、A~Fのどれか
0xはゼロエックス

0x8fff など
BigInt ddddn 数値(Number)

よりも桁数が多い
整数を表現可能
dは任意の桁数および0~9

5n や 100nなど
文字列

(String)

"tttttt" ダブルクォーテーション

で囲んだ文字列
tは任意の桁数

"今日は晴れ"など
'tttttt' シングルクォーテーション

で囲んだ文字列
tは任意の桁数

'今日は晴れ'など
オブジェクト オブジェクト { プロパティ名:値 ,

プロパティ名:値・・・}

プロパティ名と値の組みの羅列を

{ }でで囲んだもの

{ 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は内部的には、関数や配列もオブジェクトで定義されています。
そのためプロパティ追加や既存プロパティの変更することで、自分用にカスタマイズすることが可能です。

 

しかし本来の機能を損なう可能性があることから、業界での作法としてプロパティの追加や変更は非推奨となっています。

記事の内容について

 

こんにちはけーちゃんです。
説明するのって難しいですね。


「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。

そんなときは、ご意見もらえたら嬉しいです。

ご意見はこちら。
https://note.affi-sapo-sv.com/info.php

【お願い】

お願い

■このページのURL


■このページのタイトル


■リンクタグ