【JavaScript】データ型とリテラル

概要

JavaScriptを学習、理解を深めるため「JavaScript Primer 迷わないための入門書」を読み、
理解した内容等を記載していく。

「【JavaScript】JavaScript入門一覧」に他の記事をまとめています。

この記事で理解できること

• JavaScriptの値のデータ型について
• データ型の分類(プリミティブ型、オブジェクト)
• 主要なデータ型のリテラル

データ型とリテラル

• JavaScriptでは、変数に対する型は存在しないが、値には型(文字列、数値、真偽値など)が存在する。
• その値の型のことをデータ型と呼び、大きく分けると二つ(プリミティブ型、オブジェクト)に分類される。

プリミティブ型

• 文字列や真偽値、数値など一度作成すると、値自体を変更できないイミュータブルな特性を持つ基本的な型。

型	例・備考
真偽値(Boolean)	true、false
数値(Number)	123、1.234
巨大な整数(BigInt)	9007199254740992n *1
文字列(String)	"Hello World"
undefined	値が未定義であること意味する
null	値が存在しないことを意味する
シンボル(Symbol)	一意で不変な値 *2

*1 ES2020から追加された
*2 ES2015から追加された

// type演算子でデータ型を調べた例
console.log(typeof true);                    // => boolean
console.log(typeof 114);                     // => number
console.log(typeof 9007199254740992n);       // => bigint
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

nullについて
nullをtypeof演算子で評価するとobjectと判定される。
歴史的経緯を持つバグで、既にこの挙動に依存しているコードへの影響などを考慮され、修正が見送られている。

undefinedについて
undefinedという値を持ったグローバル変数。
同じ変数名でローカル変数を宣言できるが非推奨。

オブジェクト

• プリミティブ型以外のもの(オブジェクト、配列、関数、正規表現、Dataなど)
• 複数のプリミティブ型の値、またはオブジェクトの集まり。
• 一度作成した後も、オブジェクトが持つ値を変更できるミュータブルな特性を持つ。
• オブジェクトは、値そのものではなく値への参照を経由して操作されるため、参照型のデータとも言う。

// キーname、ageとそれぞれ値を持つオブジェクト
const member1 = {
  name: 'Taro',
  age: 21,
};

// ドット(.)やブラケット([])でオブジェクトが持つプロパティの値を参照できる
console.log(member1.name);    // => Taro
console.log(member1["name"]); // => Taro

リテラル

• プログラム上で数値、文字列などのデータ型を直接表現・記述できる構文のこと。
• よく利用されるプリミティブ型やオブジェクトのリテラルが用意されている。

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

• 真偽値(Boolean)
• 数値(Number）
• 巨大な整数(BigInt)
• 文字列(String）
• null

真偽値（Boolean）

• trueとfalseのリテラルが存在する。
• 当たり前のように使っていたtrue、falseは「true、falseを返すリテラル(構文)」だった。

console.log(true);  // => true
console.log(false); // => false

数値（Number）

数値のリテラルには、以下の2種類が存在する。
(変数の先頭に数値を使用できないのは、この数値リテラルとの衝突を避けるため)

• 整数リテラル(例：24)
• 浮動小数点数リテラル(例：3.14159)

整数リテラル

• 2進数：0b(0B)から始まる0,1の組み合わせ
• 8進数：0o(0o)から始まる0 ~ 7の組み合わせ
• 10進数：0 ~ 9の組み合わせ
• 16進数：0x(0x)から始まる0 ~ 9,a ~ zまたはA ~ Zの組み合わせ

/* 各進数で「13」を表現 */
// 2進数
console.log(0b01101);

// 8進数
console.log(0o015);

// 10進数
console.log(13);

// 16進数
console.log(0x000D);

浮動小数点数リテラル

• ドット（.）を含んだ数値：0.123
• e(E)を含んだ数値：2e2(指数表現)
  ※e(E)の後は指数(10のn乗の「n」部分)を指定する

// ドットを含めた値
console.log(0.123);      // => 0.123

// 先頭の「0」を省略することは可能(オブジェクトの値参照時のドット記法を考慮すると省略しない方が良い)
console.log(.123);       // => 0.123

// 以下は「2 * 10の2乗」と同じ意味
console.log(2e2);        // => 200

// e以降は整数でなければならない
console.log(2e2.22);     // => ×

文字列（String）

• 文字列リテラルは、同じ記号で囲んだ内容を文字列として扱うという共通のルールがある。
• 使用できる記号として、ダブルコーテーション(")、シングルコーテーション(')、テンプレートリテラル(`)の3種類が存在する。
• 改行を含めたい場合は、エスケープシーケンス(\n)を使用する。

// 「"」ダブルコーテーション
console.log("文字列"); // => 文字列

// 「'」シングルコーテーション
console.log('文字列'); // => 文字列

// 文字中に同じ記号を含めたい場合は、「\」バックスラッシュでエスケープできる
console.log("「\"」をエスケープ"); // => 「"」をエスケープ

// エスケープシーケンスで改行
console.log("今日の天気は\n晴れです"); 
// => 今日の天気は
//    晴れです

// 「`」テンプレートリテラル
console.log(`文字列`); // => 文字列

// テンプレートリテラルは、エスケープシーケンス(\n)無しで複数行の文字列を書くことが可能
console.log(
`今日の天気は
晴れです`
);
// => 今日の天気は
//    晴れです

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

• ES2015から導入された。
• エスケープシーケンス(\n)を用いずに複数行の文字列を書くことができる。
• プレースホルダー(ドル記号と波括弧${})を利用し、変数の値を埋め込むことや計算式の記述などが可能。
  (タグ付きテンプレートなども存在する『テンプレートリテラル (テンプレート文字列)』)

// 埋め込む変数を定義
const weather = "晴れ";

// エスケープシーケンス(\n)を用いずに複数行の文字列を書くことができる
console.log(
`今日の天気は
${weather}です`
);
// => 今日の天気は
//    晴れです

// 文字中に含めたい場合は、「\」バックスラッシュでエスケープできる
console.log(`「\`\`」をエスケープ`); // => 「``」をエスケープ

nullリテラル

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

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

オブジェクトのリテラル

以下3つのリテラルが存在する。

• オブジェクトリテラル
• 配列リテラル
• 正規表現リテラル

オブジェクトリテラル

• { }のこと。
• オブジェクトリテラル{ }を用いて新しいオブジェクトを作成できる。
• オブジェクト作成時にキー(key):値(value)を同時に定義することも可能。

// 新しく空のオブジェクトを作成
const obj1 = {};
console.log(obj1); // => {}

// キー(key):値(value)を同時に定義し、作成
const obj2 = {
  name: "Taro",
  age: 24
};
console.log(obj2); // => {name: 'Taro', age: 24}

// それぞれドット記法、ブラケット記法でキーを指定し値を参照できる
// この時指定するキーを「オブジェクトのプロパティ(名)」と呼ぶ
console.log(obj2.name);   // => Taro
console.log(obj2["age"]); // => 24

配列リテラル

• [と]内に値をカンマ(,)区切りArrayオブジェクトを作成できる。

// 名簿のような配列を作成
const nameList = ["Taro", "Hanako", "Tom"];
console.log(nameList[0]) // => Taro

正規表現リテラル

• /(スラッシュ)で文字列を囲うことで、正規表現のパターン文字列であることを表現できる。

/* 先頭が英小文字という正規表現パターン */
// 正規表現リテラルで生成したパターンはRegExp(正規表現オブジェクトとなる)
const pattern = /^[a-z]/;

// 正規表現パターンで検証する文字列
const value1 = 'abcde';
const value2 = 'Abcde';

/* RegExp(正規表現)オブジェクトが持つtestメソッドで判定 */
// パターンに一致していればtrue
console.log(pattern.test(value1)); // => true
// パターンに一致していなければfalse
console.log(pattern.test(value2)); // => false