【Javascript基礎】Javascriptにおけるデータ型

# ◆データ型とは
データの種類のこと。

プログラミング言語には、データの型を強く意識するものと、逆にほとんど意識しないものがある。

JavaやC#のような言語は前者に属し、
数値を格納するために用意された変数に文字列を格納する事は許されない。
**例） Java**
```java
int num = 100;

num = "100"; // 構文エラーなのでNG
```
これらの言語は、変数とデータ型は常にワンセットになる。

Javascriptは後者に属し、データ型についてかなり寛容である。
変数側が代入される値に応じて形や大きさを変えてくれるため、開発者がデータ型を意識することはあまり多くない。
```javascript
let num = 100;

num = "100"; // OK
```

# ◆Javascriptの主なデータ型
| 分類 | データ型 |
|:-:|:-:|
| 基本(プリミティブ)型  | 数値型(number)  |
| 基本(プリミティブ)型  | 文字列型(string)  |
| 基本(プリミティブ)型  | 真偽値型（boolean）  |
| 基本(プリミティブ)型  | シンボル型(Symbol)  |
| 基本(プリミティブ)型  | 特殊型(null / undefined)  |
| オブジェクト型  | 配列(array)  |
| オブジェクト型  | オブジェクト（object）  |
| オブジェクト型  | 関数(function)  |

Javascriptのデータ型は、基本型と参照型の2つに分類できる。

両者の違いは、
* **`基本型　→　変数に値そのものが直接格納される。`**

* **`オブジェクト型　→　参照値（値を実際に格納しているメモリ上のアドレス）を格納する。`**
（参照値を代入することから、オブジェクト型は参照型とも呼ばれる。）
にある。

# ◆リテラル
リテラルとは、**<font color="blue">データ型に格納できる値そのもの</font>**、また、**<font color="blue">値の表現方法</font>** のことを指す。

## ・ 数値リテラル（number）
| リテラル | 概要 | 例 |
|:-:|:-:|:-:|
| １０進数  | 0 ~ 9 | 10, 100, 26 |
| ２進数  | 0b + 0 ~ 1  | 0b01, 0b101 |
| ８進数  | 0o + 0 ~ 7  | 0o600, 0o644, 0o777 |
| １６進数  | 0x + 0~9 A~F  | 0xCC55CC, 0xFFffFF |
| 浮動小数点  | 小数点がつく  | 1.5, 3.14 |

さまざまな表現方法があるが、どれを使っても本質的にこれらの違いは見かけ上に過ぎない。

## ・ 文字列リテラル（string）
シングルクォーテーション（'）か、ダブルクォーテーション（"）で囲う必要がある。
```javascript
// ダブルクォーテーション
let str = "Javascript";

// シングルクォーテーション
let str = 'Javascript';
```
どちらを利用しても基本的には問題はないが、
文字列の中にシングルクォーテーション or ダブルクォーテーションが含まれている場合は、それぞれ文字列に含まれない方のクォートで囲う必要がある。
```javascript
// ×
let str = 'He's Smiths';

// ○
let str = "He's Smiths";
```

# ・ エスケープシーケンス
文字列リテラルでは、特別な意味を持つ文字（キーボードから直接に表現できない文字など）を、**<font color="red">「\ + 文字」</font>** という形式で表現することができる。
このような文字を **<font color="red">エスケープシーケンス</font>** という。
| 文字 | 概要 |
|:-:|:-:|
| \b  | バックスペース  |
| \f  | 改ページ  |
| \n  | 改行  |
| \r  | 復帰  |
| \t  | タブ文字  |
| \ \  | バックスラッシュ  |
| \ '  | シングルクォーテーション  |
| \ "  | ダブルクォーテーション  |

エスケープシーケンスを用いることで、シングルクォーテーションで囲った文字列を、シングルクォーテーションで囲うことも可能になる。
```javascript
let str = 'He\'s Smith'; // OK
```
このように記述することで、Javascriptは「\'」を文字列の終了ではなく、ただの「'」として認識する。
このように、**ある文脈の中で意味を持つ文字を、あるルールに基づいて無効化する**ことを、**<font color="red">エスケープ処理</font>** という。

## ・ テンプレート文字列
テンプレート文字列を利用することで、以下の表現が可能になる。

**・文字列に変数を埋め込む**

**・複数行にまたがる（＝改行文字を含んだ）文字列**

テンプレート文字列は、<font color="blue">バッククォーテーション（`）</font>で文字列を括る。

```javascript
let name = "smith";

console.log(
    `Hello, Mr.${name}.
    Nice weather today.
    `);

/**
 * 出力結果
 * Hello. Mr.smith.
 * Nice weather today.
 */
```
::: note info
${~}で変数を埋め込むことが可能。
:::

::: note info
「'」 や 「"」ではエスケープシーケンスでしか表現できなかったものが、テンプレート文字列ではそのまま表現する事が可能。（今回の例であれば改行）
:::

がテンプレート文字列の特徴。

## ・ 配列リテラル
配列とは、**データの集合**のこと。
配列は**1つの変数に対し、複数の値を格納できる**のが特徴。

１つ１つの格納された値のことを**要素**とよぶ。

```javascript
let nums = [123, 456, 789];

let strs = ["javascript", "java", "C#"];
```

配列は上記のように、
カンマ区切りの値を[]（ブラケット）で括った形式で表現する。

配列には **<font color="red">インデックス番号</font>** と呼ばれる番号が割り振られ、この番号を利用して配列内の値にアクセスする。

※配列にアクセスするためのものを **<font color="red">キー（key）</font>** とよぶ。

与えられる順番は、先頭から0, 1, 2 ...という形で割り振られる。
アクセスするときは、**<font color="red">配列名[インデックス番号]</font>** でアクセスする。
```javascript
let nums = [123, 456, 789];

console.log(nums[0]);  // 123
```

# ・ オブジェクトリテラル
オブジェクトとは、
**名前をキーとしてアクセスする配列**である。
**ハッシュ**、**連想配列**と呼ばれることもある。

また、配列では格納したデータを「要素」と呼ぶのに対し、
オブジェクトでは **「プロパティ」** と呼ぶ。

オブジェクトリテラルの記法とアクセスする方法は、通常の配列とは異なる。
```javascript
// 記法 { キー名: 値(プロパティ) }
let obj = { x: 1, y: 2, z: 3 };

// アクセス方法
console.log(obj.x); // 1

// アクセス方法②
console.log(obj['x']); // 1
```

:::note warn
オブジェクトリテラルでは、{}で括る点に注意。
:::

アクセス方法は2つ。

**<font color="red">① オブジェクト名.プロパティ名;  （ドット演算子)</font>**

**<font color="red">② オブジェクト['プロパティ名']; （ブラケット構文）)</font>**


基本的にはドット演算子を用いてアクセスする事が多いが、以下の2つの場面ではブラケット構文でのアクセスが適している。

:::note info
① ブラケット構文では、「'プロパティ名'」のところに変数を入れる事ができる。

→ アクセスするプロパティを動的に変更したい場合におすすめ。
:::

:::note warn
② ブラケット構文では、「'プロパティ名'」の箇所は文字列として判定される。
→ ドット演算子の場合、プロパティ名は<font color="blue">**識別子**</font>として認識されるので、「123」のような命名規則に反するキーは使えない。
:::

## ・ 未定義(undefined)
undefinedは、ある変数の**値がそもそも定義されていない**事を表す値。
以下のようなケースで返される。

・ ある変数に対し、宣言はされているものの値を与えられていない。
・ 未定義のプロパティを参照した。
・ 関数で値が返されない。

```javascript
let x;
console.log(x);

let obj = {x: 1};
console.log(obj.y);
```

## ・ ヌル(null)
nullは、**該当する値がないこと**を意味する値である。
undefinedと区別が付きづらいが、

**undefined　→　定義されていない　・　参照されることを想定していない**

**null　→　空である**

という状態を表す。

# 参考文献

https://gihyo.jp/book/2016/978-4-7741-8411-1