(javascript) データ型のリテラルについて

#はじめに
今回は、Javascriptの"超基本"
<strong>データ型のリテラルについて</strong> について記録します。

過去に5点オブジェクトについて、記事を投稿しました。

・<a href="https://qiita.com/Tateishi0819/items/10168748360409f38d82" terget="blank">(Javascript) オブジェクト指向 と オブジェクト&配列 の違い</a>
・<a href="https://qiita.com/Tateishi0819/items/bf2f340941b7a10a0bfa" terget="blank">(Javascript) インスタンス化 と コンストラクター</a>
・<a href="https://qiita.com/Tateishi0819/items/00b5adde47a40e3bd1a7" target="blank">(Javascript) 静的プロパティと静的メソッド</a>
・<a href="https://qiita.com/Tateishi0819/items/fb64ecfb87a387989fad" target="blank">(Javascript) 組み込みオブジェクトとnew演算子によるインスタンス化</a>
・<a href="https://qiita.com/Tateishi0819/items/51777538dacf0bc7cbc1" target="blank">(Javascript) データ型と参照型</a>

##リテラルとは？
リテラルとは、<strong>直接データ型に格納できる値</strong>のことです。
また、リテラルは <strong>数値型・文字列型・真偽値型・シンボル型・特殊型</strong> など の型にそれぞれの表現方法があります。

#それぞれの型のリテラル表現
※こちらで記載するのは、各リテラルのアバウトな説明です。
以降、深堀した記事をアウトプットしたいと思います。

##数値リテラル(number)
数値リテラルには <strong>整数リテラル</strong> と <strong>浮動小数点リテラル</strong> の2点があります。

→<a href="https://ja.wikipedia.org/wiki/%E6%B5%AE%E5%8B%95%E5%B0%8F%E6%95%B0%E7%82%B9%E6%95%B0" target="blank">浮動小数点(ふどうしょうすうてん)</a> 

><strong>整数リテラル</strong>
10進数
16進数
8進数
2進数

><strong>浮動小数点リテラル</strong>
通常の小数表現と指数表現

##文字列リテラル
文字列リテラルは、<strong>シングルクォート・ダブルクォート</strong> で囲む必要がある物です。

```javascript
'こんにちは'
"こんばんは"
```

###エスケープシーケンス
また、<strong>エスケープシーケンス</strong>を利用することも可能です。

```javascript
window.alert('大丈夫 \n 頑張ろう!')
```

> \n
改行のエスケープシーケンス

###テンプレート文字列(ES2015)
<strong>テンプレート文字列</strong>を利用すると、文字列への変数埋め込みを行うことができます。

```javascript
let name = '福沢諭吉'
let text = '一万円札は${name}である'

comsole.log(text)
//出力→ 一万円札は福沢諭吉である
```
小説サイトの"任意名前"の設定みたいで、面白いですね。

><strong>テンプレート文字列</strong>
${name}
${変数名}

##配列リテラル
配列とは<strong>データの集合</strong>になります。
配列では、1つの変数に対して<strong>複数</strong>の値を格納できます。
また、格納された各1つ1つの値を<strong>要素</string>と言います。

また、配列は<strong>インデックス番号をキーにアクセス</strong>します。

###ブランケット構文 と インデックス番号

```javascript
let country = ['Japan','China','North Korea'];
console.log(country[0]);
//出力→ Japan
```

><strong>ブランケット構文</strong>
['Japan','China','North Korea']</strong>;
↑の['・・・・']

><strong>インデックス番号</strong>
<strong>(data[0])</strong>
↑インデックス番号は 0 1 2 3 4 5 ・・・ と番号が割り振られます。  

><strong>要素</strong>
先のソースコードでは、ブランケット構文上にある 
'Japan','China','North Korea' になります。

####配列リテラルは入れ子も可能

```javascript
let country = ['America',['Italia','Spain'],'France'];
console.log(country[1][0])
//出力→ Italia
```
ここでは、インデックス番号1の"['Italia','Spain']"を選択して、その中から 番号0の'Italia' を出力しています。


##オブジェクトリテラル
<strong>オブジェクト</strong>は、<strong>名前をキーにアクセスできる配列</strong>のことです。
配列リテラルだと、インデックス番号でしかキーにできないことに対して、オブジェクトは<strong>文字列</strong>をキーアクセスができることが特徴です。

また、配列では個々のデータを要素と言いましたが、オブジェクトでは<strong>プロパティ</strong>と言います。プロパティの中には関数も格納することができますよ。

###オブジェクトリテラルの記述方法

```javascript
let country = { a:'Germany', b:'Austria', c:'Switzerland' };
console.log(country.a);
//出力→ Germany
console.log(country['a']);
//出力→ Germany
```

```javascript
{ キー名:値, キー名:値, キー名:値 };
```

また、console.log で出力している 2種の構文で出力させることがきます。

```javascript
console.log(country.a);
//ドット演算子
console.log(country['a']);
//ブランケット構文

console.log(オブジェクト名.プロパティ名);
//ドット演算子
console.log(オブジェクト名[プロパティ名]);
//ブランケット構文
```

###ドット演算子の注意

```javascript
console.log(オブジェクト名.プロパティ名);
```

は、ブランケット構文よりシンプルな見た目をしていますが、プロパティ名が<strong>識別子</strong>と見なされてしまうので、識別子の命名規則に反していると予期せぬアクシデントが発生します。

```javascript
country.555
//識別子に違反しているためエラー
country['555']
//OK
```

またブランケット構文は、555のような数字を使っても、<strong>プロパティ名を文字列</strong>として返すので問題はありません。


##関数リテラル
<strong>関数</strong>とは、、入力値に引数を与えることにより処理を行い、その結果(返り値)を返す仕組みのことです。

>引数(パラメーター/処理素材) → 関数(処理) → 戻り値(結果)

###未定義値
<strong>未定義関数(undefined)</strong>は、値が定義されていない値を表します。

```javascript
let japan;
let country = { c:japan };

console.log(japan);
//出力→ undefined 値が設定されていない
console.log(country.nihon);
//出力→ undefined プロパティが存在しない
```
個人的に馴染む深い。

##null
javascriptでは、先の undefined の他に<strong>該当する値がない</strong>ことを意味する<strong>null</strong>があります。
2つは、類似して煩わしいですが明確な違いがあります。

><strong>undefined</strong>
定義されていない

><strong>null</strong>
空である



#あとがき
以上が、<strong>データ型のリテラルについて</strong> でした。
いかがでしたか？
役に立っていれば嬉しいです。
では!

#Myリンク
また、Twitter・Portfolio のリンクがありますので、気になった方は
ぜひ繋がってください。プログラミング学習を共有できるフレンドが出来るととても嬉しいです。

<a href="https://twitter.com/0819_tateishi" target="blank">Twitter</a>
<a href="https://ayu-portfolio.herokuapp.com/" target="blank">Portfolio</a>
<a href="https://github.com/ayu0819" target="blank">Github</a>
<a href="https://note.com/ayu0819" target="blank">Note</a>