JavaScriptのデータ型の種類を理解する

プログラムにはデータの型が存在ます。そしてJavaScriptにもデータ型が存在します。
データ型とは、変数が文字列を扱うものなのか、数字を使うものなのか、扱うデータの中身を明示するものです。

JavaScriptではこのデータ型の存在感が薄く見えがちですが、なぜそうなるのか、そしてどんな型が存在するのかを解説します。

JavaScriptのデータ型とは？

他のプログラミングでは、変数の作成時にその変数がどういったデータを扱うかを宣言し、その型と合わないデータが代入されるとエラーとなるような厳格な扱いをする場合があります。

一方JavaScriptは動的型付け言語と呼ばれ、データ型宣言は不要な上、文字列が代入された変数に数字を上書きするような事が出来ます。この為JavaScriptは特にデータ型を意識する必要が無い状態となっています。

この緩さが良い所もあるのですが、データ型を意識していないがゆえに起こるエラーも存在するので、基本的な理解は必要不可欠です。

プリミティブ型の7種類

JavaScriptの基本的な型が7種類あり、プリミティブ型（後述参照）と呼ばれるものがあります。プリミティブのそれぞれの型をご紹介します。

1）数値型 / Number

整数と浮動小数点数を扱う型です。数字を入れると数値型となります。

const num1 = 100;
const num2 = 100.005;

2）文字列型 / String

テキストを扱う型です。
文字列を「'(シングルクォート)」か「"（ダブルクォート）」で囲みます。数字も囲むと文字列となります。

const str1 = 'テキスト';
const str2 = "100";

3）論理型 / Boolean

trueまたはflaseの2つの値があります。論理データ型で、ifやforなどの処理を決定します。
下記のように条件判定の結果として、ture/falseが戻って来ます。

if (1 === 1) {
  console.log('true');
}
console.log(1 === 0); //false

4）undefined

値が代入されていない変数の値がundefinedとなります。。

let test;
console.log(test);
//値が何も入っていないので「undefined」となります。

5）null

この辺りから少し特殊な内容となります。nullもundefinedと同様に値が存在しない事を意味しますが、意図的に値が無い事を示すために使ったります。
細かい話をするとundefinedとは値は同じで型が異なる状態です。変数やオブジェクトのプロパティを初期化する時によく使われます。

let test1;
test1 = null;

6）長整数 / Biglnt

数値型が大きすぎる値を計算すると間違った結果となる場合があり、その問題解決の為に用意されたのがこの型です。通常は利用する事は無いともいます。
具体的には2^53-1よりも大きな整数を正しく処理する事ができ、数字の後ろにnを付けて定義します。

const numlong = 10n;
console.log(numlong); //10n

7）シンボル / Symbol

ユニークな値を作成する為に利用します。下記のコードを参考にして貰った方がイメージが湧くと思います。

const str1 = 'Symbol';
const str2 = 'Symbol';
console.log(str1 === str2); //true
 
const str3 = Symbol('Symbol');
const str4 = Symbol('Symbol');
console.log(str3 === str4); //false

str3とstr4は同じ文字列でありながら、比較するとfalseになります。これはSymbolによって一意となっている為です。

7種類を紹介しましたが、最初は長整数とシンボルはそんなのがあるんだと記憶に留めている程度で十分です。

オブジェクト型とは？

データ型の種類としては「プリミティブ型」と「オブジェクト型」の2種類に分類されます。

プリミティブ型とは値渡しと呼ばれ、変数に値が格納されます。上記で紹介した7種がそれにあたります。

オブジェクト型は参照型と呼ばれ、変数に格納されるのは「値」ではなく、値が格納された場所を保持します。少しわかりにくい概念ですが、値が直接変数に格納されていない点がポイントです。
その種類は配列、関数、日時など様々で、プリミティブ型の7種以外は全てオブジェクト型と覚えておいて下さい。

少し代表例を紹介しながら、参照型の概念も解説します。

1）配列

配列を扱います。[]を変数に入れる事で配列となります。
値は「,」区切りでセットし、区切られたそれぞれの場所で値を持ち、結果1つの変数で複数の値を保持するのが配列（オブジェクト型）の特徴ともいえます。

配列の中身は順に0,1,2,...と番号が振られていて、変数名[0]という形で値にアクセスします。

const arr1 = ['a', 'b', 'c', 'd']; //配列を定義
console.log(arr1[0]); //「a」が表示されます。最初は0から始まる点に注意です。

オブジェクト型の特徴の値の格納場所を保持するという概念を、下記例を持ってご紹介します。

const arr1 = ['a', 'b'];
const arr2 = arr1; //arr1の中身をarr2にコピー
arr1[0] = 'X';　//arr1[0]に「X」を上書き
console.log(arr1, arr2);
///両方とも「'X', 'b'」と表示されます。

arr1の最初が「X」に変わるのは理解できると思いますが、arr2も変更されている事に驚かれる方もいると思います。これが参照型の特徴です。

順を追って解説します。

オブジェクト型では、値では無く値の格納場所を保持しています。
ですので、1行目でarr1に格納されているのは「a」と「b」が記録された場所を保持しています。

よって2行目ではarr2 = arr1は、arr1が保持している値の格納場所をコピーした形となります。

3行目の arr1[0] = 'X' では、arr1[0]に記録されている格納場所の値が「X」に変わります。

最後の4行目では、arr2はarr1と同じ格納場所を保持している為に、arr2[0]も「X」と表示されます。

何となく参照型のイメージが湧いてきたと思います。このようにオブジェクト型は変数と値の間に、格納場所という情報がクッションのように入っているのが特徴です。

2）オブジェクト

実はオブジェクトはJavaScriptの基礎となるものです。詳細を書くとページが足りないので割愛しますが、JavaScriptを理解する上ではとても重要な要素です。

ここでは基本的な部分に触れたいと思います。
オブジェクトは{}で定義できます。オブジェクトの中はキー名と値のセットで保持します。

const obj = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};

値のアクセスにはドット記法とブラケット記法があります。
ドット記法ではキーの名前によってはエラーとなる事があるので、最初はブラケット記法で統一すれば良いかと思います。

const obj = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};
//ブラケット記法
console.log(obj["key1"]); //「value1」が表示
 
//ドット記法
console.log(obj.key2); //「value2」が表示

オブジェクトも参照型なので配列で紹介した動きと同様の動作となります。

const obj = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};
const obj_copy = obj; //obj_copuにobjをコピー
obj["key1"] = "test";
 
console.log(obj_copy["key1"]); //「test」が表示

データの型を確認する

変数に入った値のデータの型を調べたい場合はtypeofを利用します。

ただ下の例を見ていただければ分かると思いますが、nullとオブジェクト型はobjectと返って来るので注意が必要です。

const num1 = 100;
const str1 = 'テキスト';
const bool = true;
const test = undefined;
const test1 = null;
const numlong = 10n;
const str3 = Symbol('Symbol');
const arr1 = ['a', 'b'];
const obj = {
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
};
console.log(typeof(num1)); //number
console.log(typeof(str1)); //string
console.log(typeof(bool)); //boolean
console.log(typeof(test)); //undefined
console.log(typeof(test1)); //object
console.log(typeof(numlong)); // bigint
console.log(typeof(str3)); //symbol
console.log(typeof(arr1)); //object
console.log(typeof(obj));//object

最後に

JavaScriptではデータ型はそこまで意識しなくても使う事が出来ますが、高度なコードを書いていく上ではこの辺りの知識が必要となります。

特に値を参照する概念は理解していないと、思わぬ動作不良を起こすので、このページなどを参考に理解を深めて貰えればと思います。