データ型とリテラル

データ型

JavaScriptは動的型付け言語に分類される言語であるため、静的型付け言語のような変数の型はありません。しかし、文字列、数値、真偽値といった値の型は存在します。これらの値の型のことをデータ型とよびます。

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

プリミティブ型（基本型）は、真偽値や数値などの基本的な値の型のことです。プリミティブ型の値は、一度作成したらその値自体を変更できないというイミュータブル（immutable）の特性を持ちます。 JavaScriptでは、文字列も一度作成したら変更できないイミュータブルの特性を持ち、プリミティブ型の一種として扱われます。

一方、プリミティブ型ではないものをオブジェクト（複合型）とよび、オブジェクトは複数のプリミティブ型の値またはオブジェクトからなる集合です。オブジェクトは、一度作成した後もその値自体を変更できるためミュータブル（mutable）の特性を持ちます。オブジェクトは、値そのものではなく値への参照を経由して操作されるため、参照型のデータともいいます。

データ型を細かく見ていくと、6つのプリミティブ型とオブジェクトからなります。

プリミティブ型（基本型）
- 真偽値（Boolean）: trueまたはfalseのデータ型
- 数値（Number）: 42 や 3.14159 などの数値のデータ型
- 文字列（String）: "JavaScript" などの文字列のデータ型
- undefined: 値が未定義であることを意味するデータ型
- null: 値が存在しないという意味するデータ型
- シンボル（Symbol）: ES2015から追加された一意で不変な値のデータ型
オブジェクト（複合型）
- プリミティブ型以外のデータ
- オブジェクト、配列、関数、正規表現、Dateなど

プリミティブ型でないものは、オブジェクトであるということを覚えていれば問題ありません。

typeof演算子を使うことで、次のようにデータ型を調べることができます。

console.log(typeof true);// => "boolean"
console.log(typeof 42); // => "number"
console.log(typeof "JavaScript"); // => "string"
console.log(typeof Symbol("シンボル"));// => "symbol"
console.log(typeof undefined); // => "undefined"
console.log(typeof null); // => "object"
console.log(typeof ["配列"]); // => "object"
console.log(typeof { "key": "value" }); // => "object"
console.log(typeof function() {}); // => "function"

残念ながらtypeof nullが"object"となるのは、歴史的経緯のある仕様のバグ¹です。他のプリミティブ型の値については、typeof演算子でそれぞれのデータ型を調べることができます。

一方で、配列とオブジェクトがどちらもobjectという判定結果になります。このように、typeof演算子ではすべてのオブジェクトの種類は判定できません。

基本的にtypeof演算子は、プリミティブ型またはオブジェクトかを判別するものです。オブジェクトの詳細な種類を判定できないことは、覚えておくとよいでしょう。各オブジェクトの判定方法については、それぞれのオブジェクトの章で見ていきます。

リテラル

プリミティブ型の値や一部のオブジェクトは、リテラルを使うことで簡単に定義できるようになっています。

リテラルとはプログラム上で数値や文字列など、直接記述した内容がそのデータ型の値を書ける構文として定義したものです。たとえば、"と"で囲んだ範囲が文字列リテラルで、これは文字列型のデータを表現しています。

// "と"で囲んだ範囲が文字列リテラル
const string = "文字列";

リテラル表現がない場合は、その値を作る関数に引数を渡して作成する形になります。そのような冗長な表現を避ける方法として、よく利用される主要な値にはリテラルが用意されています。

次の4つのプリミティブ型は、それぞれリテラル表現を持っています。

真偽値
数値
文字列
null

また、オブジェクトの中でもよく利用されるものに関してはリテラル表現が用意されています。

オブジェクト
配列
正規表現

これらのリテラルについて、まずはプリミティブ型から順番に見ていきます。

真偽値（Boolean）

真偽値はtrueとfalseのリテラルがあります。それぞれはtrueとfalseの値を返すリテラルで、見た目どおりの意味となります。

true; // => true
false; // => false

数値（Number）

数値は大きく分けて42のような整数リテラルと3.14159のような浮動小数点リテラルがあります。

整数リテラル

整数リテラルは次の4種類があります。

10進数: 数字の組み合わせ
- ただし、複数の数字の組み合わせた際に、先頭を0から開始すると8進数として扱われる場合があります
- 例）0、2、10
2進数: 0b（または0B）の後ろに、0または1の数字の組み合わせ
- 例）0b0、0b10、0b1010
8進数: 0o（または0O）の後ろに、0から7までの数字の組み合わせ
- 0o は数字のゼロと小文字アルファベットのo
- 例）0o644、0o777
16進数: 0x（または0X）の後ろに、0から9までの数字とaからfまたはAからFのアルファベットの組み合わせ
- アルファベットの大文字・小文字の違いは値には影響しません
- 例）0x30A2、0xEEFF

0から9の数字のみで書かれた数値は、10進数として扱われます。

console.log(1); // => 1
console.log(10); // => 10
console.log(255); // => 255

0bから始まる2進数リテラルは、ビットを表現するのによく利用されています。

console.log(0b1111); // => 15
console.log(0b10000000000); // => 1024

0oから始まる8進数リテラルは、ファイルのパーミッションを表現するのによく利用されています。

console.log(0o644);  // => 420
console.log(0o777);  // => 511

次のように、0から始まり、0から7の数字を組み合わせた場合も8進数として扱われます。しかし、この表記は10進数と紛らわしいものであったため、ES2015で0oの8進数リテラルが新たに導入されました。また、strict modeではこの書き方は例外が発生するため、次のような8進数の書き方は避けるべきです。

// 非推奨な8進数の書き方
// strict modeは例外が発生
console.log(0644);  // => 420
console.log(0755);  // => 511

0xから始まる16進数リテラルは、文字のコードポイントやRGB値の表現などに利用されています。

console.log(0xFF); // => 255
// 小文字で書いても意味は同じ
console.log(0xff); // => 255
console.log(0x30A2); // => 12450

名前	表記例	用途
10進数	42	数値
2進数	0b0001	ビット演算など
8進数	0o777	ファイルのパーミッションなど
16進数	0xEEFF	文字のコードポイント、RGB値など

浮動小数点数リテラル

JavaScriptの浮動小数点数はIEEE 754を採用しています。浮動小数点数をリテラルとして書く場合には、次の2種類の表記が利用できます。

3.14159 のような .（ドット）を含んだ数値
2e8 のような e または E を含んだ数値

0から始まる浮動小数点数は、0を省略して書くことができます。

.123; // => 0.123

しかし、JavaScriptでは.をオブジェクトにおいて利用する機会が多いため、 0から始まる場合でも省略せずに書いたほうが意図しない挙動を減らせるでしょう。

Note 変数名が数字から始めることができないのは、数値リテラルと衝突してしまうことが理由としてあげられます。

文字列（String）

文字列リテラル共通のルールとして、同じ記号で囲んだ内容を文字列として扱います。文字列リテラルとして次の3種類のリテラルがありますが、結果はすべて同じ"文字列"という結果になります。

console.log("文字列"); // => "文字列"
console.log('文字列'); // => "文字列"
console.log(`文字列`); // => "文字列"

ダブルクオートとシングルクオート

"（ダブルクオート）と'（シングルクオート）は全く同じ意味となります。 PHPやRubyなどとは違い、どちらのリテラルでも評価結果は同じとなります。

文字列リテラルは同じ記号で囲む必要があるため、次のように文字列の中に同じ記号が出現した場合は、 \'という形で\を使いエスケープしなければなりません。

'8 o\'clock'; // => "8 o'clock"

そのため、文字列内部に出現しないリテラル記号を使うことで、エスケープをせずに書くことができます。

"8 o'clock"; // => "8 o'clock"

ダブルクオートとシングルクオートどちらも、改行をそのままは入力できません。次のように改行を含んだ文字列は定義できずに構文エラー（SyntaxError）となります。

"複数行の
文字列を
入れたい"; // Syntax Error

改行の代わりに改行記号のエスケープシーケンス（\n）を使うことで複数行の文字列を書くことができます。

"複数行の\n文字列を\n入れたい";

複数行の文字列は次のテンプレートリテラルを使うことでより直感的に書くことができます。

[ES2015] テンプレートリテラル

テンプレートリテラルは ` （バッククオート）で囲んだ範囲を文字列とするリテラルです。テンプレートリテラルでは、複数行の文字列を改行記号なしに書くことができます。

複数行の文字列も` で囲めば、そのまま書くことができます。

`複数行の
文字列を
入れたい`; // => "複数行の\n文字列を\n入れたい"

また、名前のとおりテンプレートのような機能を持っています。テンプレートリテラル内で${変数名}と書いた場合に、その変数の値を埋め込むことができます。

const string = "文字列";
console.log(`これは${string}です`); // => "これは文字列です"

テンプレートリテラルも他の文字列リテラルと同様に同じリテラル記号を内包したい場合は、\を使いエスケープする必要があります。

`This is \`code\``;// => "This is `code`"

nullリテラル

nullリテラルはnull値を返すリテラルです。 nullは「値がない」ということを表現する値です。

次のように、未定義の変数を参照した場合は、参照できないためReferenceErrorの例外が投げられます。

foo;// "ReferenceError: foo is not defined"

fooは値がないということを表現したい場合は、 null値を代入することで、null値をもつfooという変数を定義できます。これにより、fooを値がない変数として定義し、参照できるようになります。

const foo = null;
console.log(foo); // => null

[コラム] undefinedはリテラルではない

プリミティブ型として紹介したundefinedはリテラルではありません。 undefinedはただのグローバル変数で、undefinedという値を持っているだけです。

これを証明するために、varを使ってundefinedという名前のローカル変数を宣言してみます。次のようにstrict modeではない環境においては、undefinedというローカル変数をvarで定義できます。もちろんletやconstでは、同名の変数は再定義できないためundefinedの再定義はできません。

// strict modeではない実行環境
function fn(){
    var undefined = "独自の未定義値"; // undefinedと名前の変数をエラーなく定義できる
    console.log(undefined); // => "独自の未定義値"
}
fn();

これに対してnullはグローバル変数ではなくリテラルであるため、varを使っても再定義できません。リテラルは変数名として利用できない予約語であるため、このような違いが生じています。

var null; // => SyntaxError

このコラムでは、説明のためにundefinedというローカル変数を宣言しましたが、現実ではこのような使い方は非推奨です。無用な混乱を生むだけなので避けるべきです。またstrict modeの場合や、const、letを利用した場合はそもそも定義できません。

オブジェクトリテラル

JavaScriptにおいて、オブジェクトはあらゆるものの基礎となります。そのオブジェクトを作成する方法として、オブジェクトリテラルがあります。オブジェクトリテラルは{}（中括弧）を書くことで、新しいオブジェクトを作成できます。

const object = {}; // 中身が空のオブジェクトを作成

オブジェクトリテラルはオブジェクトの作成と同時に中身を定義できます。オブジェクトのキーと値を:で区切ったものを {} の中に書くことで作成と初期化が同時に行えます。

次のコードで作成したオブジェクトは key というキー名と value という値をもつオブジェクトを作成しています。キー名には、文字列またはSymbolを指定し、値にはプリミティブ型の値からオブジェクトまで何でも入れることができます。

const object = {
    key: "value"
};

このとき、オブジェクトがもつキーのことをプロパティ名と呼びます。この場合、 object は key というプロパティを持っていると言います。

objectのkeyを参照するには、.（ドット）で繋ぎ参照する方法と、 []（ブラケット）で参照する方法があります。

const object = {
    "key": "value"
};
// ドット記法
console.log(object.key); // => "value"
// ブラケット記法
console.log(object["key"]); // => "value"

ドット記法では、プロパティ名が変数名と同じく識別子である必要があります。そのため、次のように識別子として利用できないプロパティ名はドット記法として書くことができません。

// プロパティ名は文字列の"123"
var object = {
    "123": "value"
};
// OK: ブラケット記法では、文字列として書くことができる
console.log(object["123"]); // => "value"
// NG: ドット記法では、数値から始まる識別子は利用できない
object.123

オブジェクトはとても重要で、これから紹介する配列や正規表現もこのオブジェクトが元となっています。詳細は「オブジェクト」の章で解説します。ここでは、オブジェクトリテラル（{と}）が出てきたら、新しいオブジェクトを作成しているんだなと見てください。

配列リテラル

オブジェクトリテラルと並んで、よく使われるリテラルとして配列リテラルがあります。配列リテラルは[と]で値をカンマ区切りで囲み、その値をもつArrayオブジェクトを作成します。配列（Arrayオブジェクト）とは、複数の値に順序をつけて格納できるオブジェクトの一種です。

const emptyArray = []; // 空の配列を作成
const array = [1, 2, 3]; // 値をもった配列を作成

配列は0から始まるインデックス（添字）に、対応した値を保持しています。作成した配列の要素を取得するには、配列に対してarray[index]という構文で指定したインデックスの値を参照できます。

const array = ["index:0", "index:1", "index:2"];
// 0番目の要素を参照
console.log(array[0]); // => "index:0"
// 1番目の要素を参照
console.log(array[1]); // => "index:1"

配列についての詳細は「配列」の章で解説します。

正規表現リテラル

JavaScriptは正規表現をリテラルで書くことができます。正規表現リテラルは/と/で正規表現のパターン文字列を囲みます。正規表現のパターン内では、+や\（バックスラッシュ）から始まる特殊文字が特別な意味を持ちます。

次のコードでは、数字にマッチする特殊文字である\dを使い、1文字以上の数字にマッチする正規表現をリテラルで表現しています。

const numberRegExp = /\d+/; // 1文字以上の数字にマッチする正規表現
// 123が正規表現にマッチするかをテストする
console.log(numberRegExp.test(123)); // => true

RegExpコンストラクタを使うことで、文字列から正規表現オブジェクトを作成できます。しかし、特殊文字の二重エスケープが必要になり直感的に書くことが難しくなります。

正規表現オブジェクトについて詳しくは、「文字列」の章で紹介します。

プリミティブ型とオブジェクト

プリミティブ型は基本的にリテラルで表現しますが、真偽値（Boolean）、数値（Number）文字列（String）はそれぞれオブジェクトとして表現する方法もあります。これらはプリミティブ型の値をラップしたようなオブジェクトであるためラッパーオブジェクトと呼ばれます。

ラッパーオブジェクトは、new演算子と対応するコンストラクタ関数を利用して作成できます。たとえば、文字列のプリミティブ型に対応するコンストラクタ関数はStringとなります。

次のコードでは、Stringのラッパーオブジェクトを作成しています。ラッパーオブジェクトは、名前のとおりオブジェクトの一種であるためtypeof演算子の結果も"object"です。また、オブジェクトであるためlengthプロパティなどのオブジェクトがもつプロパティを参照できます。

// 文字列をラップしたStringラッパーオブジェクト
const string = new String("文字列");
// ラッパーオブジェクトは"object"型のデータ
console.log(typeof string); // => "object"
// Stringオブジェクトの`length`プロパティは文字列を長さを返す
console.log(string.length); // => 3

しかし、明示的にラッパーオブジェクトを使うべき理由はありません。なぜなら、JavaScriptではプリミティブ型のデータに対してもオブジェクトのように参照できる仕組みがあるためです。次のコードでは、プリミティブ型の文字列データに対してもlengthプロパティへアクセスできています。

// プリミティブ型の文字列データ
const string = "文字列";
// プリミティブ型の文字列は"string"型のデータ
console.log(typeof string); // => "string"
// プリミティブ型の文字列も`length`プロパティを参照できる
console.log(string.length); // => 3

これは、プリミティブ型のデータのプロパティへアクセスする際に、対応するラッパーオブジェクトへ暗黙的に変換してからプロパティへアクセスするためです。また、ラッパーオブジェクトを明示的に作成するには、リテラルに比べて冗長な書き方が必要になります。このように、ラッパーオブジェクトを明示的に作成する必要はないため、常にリテラルでプリミティブ型のデータを表現することを推奨します。

このラッパーオブジェクトへの暗黙的な型変換の仕組みについては「ラッパーオブジェクト」の章で解説します。現時点では、プリミティブ型のデータであってもオブジェクトのようにプロパティ（メソッドなども含む）を参照できるということだけを知っていれば問題ありません。

まとめ

この章では、データ型とリテラルについて学びました。

6種類のプリミティブ型とオブジェクトがある
プリミティブ型の真偽値、数値、文字列、nullはリテラル表現がある
オブジェクト型のオブジェクト、配列、正規表現にはリテラル表現がある
プリミティブ型のデータでもプロパティアクセスができる

参考

11.6.2 Reserved Words
11.8.3.1Static Semantics: MV
no-undefined - Rules - ESLint - Pluggable JavaScript linter
- undefinedの宣言を禁止するESLintルール

¹. JavaScriptが最初にNetscapeで実装された際にtypeof null === "object"となるバグがありました。このバグを修正するとすでにこの挙動に依存しているコードは壊れるため、修正が見送られ現在の挙動が仕様となりました。 http://2ality.com/2013/10/typeof-null.htmlを参照。 ↩