【JavaScript】データ型（プリミティブ型とオブジェクト）、リテラルに関する基礎知識

データ型について

データ型とは文字列や数値、真偽値といった値に対する型のことをいいます。

動的型付き言語とデータ型

JavaScriptをはじめとする動的型付き言語には変数の型は存在しませんが、値自身の型であるデータ型は存在します。
変数に対して特定の型を直接関連付けない動的型付き言語では、変数に対して異なるデータ型を代入できます。

// 動的型付き言語では特定の変数に様々なデータ型を代入できる
let hoge = 42; // 数値
hoge = 'bar'; // 文字列
hoge = true;  // 真偽値

データ型の種類

データ型の種類は大きく分けるとプリミティブ型とオブジェクトの2つに分かれます。

プリミティブ型

プリミティブ型は真偽値や数値など基本的な値の型です。基本型とも呼ばれます。¹
プリミティブ型は『一度作成したら値を変更できない』というイミュータブルの特性を持ちます。

プリミティブ型は以下の通りです。¹

なおMDN Web Docs『JavaScript のデータ型とデータ構造』では、nullは『構造的ルートプリミティブ』という別枠になっています。

typeofを利用することでデータ型を確認できます。プリミティブ型のtypeofの結果は以下の通りです。

typeof true;
// "boolean"

typeof 42;
// "number"

typeof 9007199254740992n;
// "bigint"

typeof "hoge";
// "string"

typeof Symbol("hoge");
// "symbol"

typeof undefined;
// "undefined"

typeof null;
// "object"

プリミティブ型のイミュータブルについてもう少し詳しく

たとえばプリミティブ型の1つである『数値』の場合、let num = 3に対してnum += 1を実行するとnumは3から4になります。
ですので、「値が変更できるからプリミティブ型はミュータブルではないのか？」と思うかもしれません。

しかし、numの値が変わったのは数値自体が変更されたからではなく、numの指す参照先が数値『3』から数値『4』に変更されたためです。
数値自体は変更されていないため、プリミティブ型はイミュータブルといえます。

オブジェクト

プリミティブ型以外のものをオブジェクトといいます。プリミティブ型を基本型と呼ぶのに対し、オブジェクトは複合型と呼ばれます。¹
オブジェクトは『一度作成した後も値が変更できる』というミュータブルの特性を持ちます。

オブジェクトの例は以下の通りです。¹

オブジェクト型のtypeofの結果は以下の通りです。

typeof ["hoge"];
// "object"

typeof { "key": "value" };
// "object"

typeof function() {};
// "function"

オブジェクトの参照とミュータブルについて

オブジェクトを扱う場合は値そのものではなくオブジェクトの参照先を操作することになります。
オブジェクトはミュータブルの特性を持つため、参照先を変えることなく値の変更ができます。

ですので、複数の変数が同じ参照先のオブジェクトを指している場合、オブジェクトを変更すると当該変数の結果がすべて変更されます。

以下のコードは、同じオブジェクトを参照しているarray1とarray2の変数の結果が連動する様子を示した例です。

let array1 = [1, 2, 3]
array2 = array1 // 参照先をコピーする
array1.push(4) // array1の配列を変更する

// pushによりarray1の結果が変更される
array1
// [1, 2, 3, 4]

// array2もarray1と同じ参照先なので、array1の変更がarray2にも反映されている
array2
// [1, 2, 3, 4]

リテラルについて

リテラルとはプリミティブ型やオブジェクトを定義するための記法のことをいいます。

プリミティブ型のリテラル表現

プリミティブ型に存在するリテラル表現は以下の通りです。

真偽値リテラルはtrue・false、数値リテラルは整数や小数などの数値、nullリテラルはnull、文字列リテラルは"と"で囲んだ範囲、です。

なお、nullはリテラルですがundefinedはグローバル変数でありリテラルではありません。

オブジェクトのリテラル表現

オブジェクトに存在するリテラル表現は以下の通りです。

オブジェクトリテラルはオブジェクト作成の{}やプロパティ参照の.と []、配列リテラルは[]、正規表現リテラルは/と/で囲んだ範囲、です。

さいごに

Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！

参考

• データ型とリテラル
• MDN Web Docs『JavaScript のデータ型とデータ構造』
• ミュータブルな型とイミュータブルな型の相違を知ろう