JavaScript学習 - 値の型・計算関連

## JavaScript データの種類・計算関連
JavaScript学習のアウトプット、兼自分用メモとして作成。
今回は値の型・計算関連についてです。
前の記事はコチラから↓↓

https://qiita.com/Kiku-cha/items/1bd1f80febd9d0a610fb



:::note warn
**目次**
[01_データの種類について](#01_データの種類について)
[02_計算関連](#02_計算関連)
　└ 四則演算
　└ 余りの計算
　└ べき乗
　└ 計算の優先順位について
[次回の予定](#次回の予定)

:::

## 01_データの種類について
JavaScriptのデータの種類は、以下の６種類。
| 種類 | 　表記　| 説明 |
|:-----------: |:-----------:|:------------:|
| 文字列            | String  | 「あいうえお」や「Hello」など       |
| 数値     　       | Number  | 数字(1,2,3,4,5...)       |
| undifinde        |         | **定義されていない**<br>宣言したが、値を代入していない変数などがどがなる値 |
| Null             | null        | 値がないことを示している特殊な値 |
| 真偽値（boolean）   |         | true , false       |
| オブジェクト(object)|         | {abc:5, def:10}     |

データの種類がどれなのかを調べたい場合、以下のように
先頭に`type of`をつけて記述して確認することができます。
```JavaScript:js/main.js
'use strict';

// 文字列 - String
console.log(typeof '反映テストです。');

// 数値 - Number
console.log(typeof 1);

// 真偽値 - Boolean
console.log(typeof true);

// undefind - undefind
console.log(typeof undefind);

// オブジェクト(object)
console.log(typeof null);
```
`console.log(typeof null);`は「object」が反映されます。
これはJavaScriptのバグのため、こういうものだという認識で大丈夫とのことです。

![スクリーンショット 2022-03-05 23.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/cee520e6-c35f-ec5a-8255-6452381c23ac.png)|
---|



## 02_計算関連
### 四則演算
四則演算は `足し算・引き算・掛け算・割り算` のことを指します。
以下、各計算方法で用いる記号と記述れいになります。
| 計算方法    | 　記号　|　記述例　|
|:-----------:|:-----------:|:-----------:|
|足し算 | + | 10+5 |
|引き算 | - | 10-2 |
|掛け算 | * | 10*2 |
|割り算 | / | 10/5 |

以下のように記述をし、反映させてみました。

```JavaScript:js/main.js
'use strict';

// 15
console.log(10+5);

// 8
console.log(10-2);

// 20
console.log(10*2);

// 2
console.log(10/5);
```

![スクリーンショット 2022-03-05 23.56.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/495c69a6-30e3-4010-1760-84936cb4470f.png)|
---|


### 余りの計算
`10 ÷ 4 = 2.5`のように、余りが出る計算は`%`を使って、記述をします。
`%`を使って計算していますが、割合との関係は特にありません。
また、consoleでは整数である`2`しか表示されません。

```JavaScript:js/main.js
'use strict';

// 10 ÷ 4 = 2.5
// 表示されるのは「2」
console.log(10%4);
```


![スクリーンショット 2022-03-06 21.00.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/361106cb-0c4d-fd0e-e921-3d95bb72f9a6.png)|
---|

### べき乗
`１０の４乗`などの「べき乗」は
`**`を使って、以下のように記述します。
```JavaScript:js/main.js
'use strict';

// 10の4乗：10000
console.log(10**4);
```
![スクリーンショット 2022-03-06 0.15.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/46d395ff-defa-4544-b4af-4093bef8cd4f.png)|
---|

### 計算の優先順位について
JavaScrptの計算でも、算数で習ったように計算の優先順位があります。
`掛け算が優先 ： 5 + 10 × 3 = 35`
`足し算が優先 ： (5 + 10) × 3 = 45`
上記2点の計算は、以下のように記述します。
```JavaScript:js/main.js
'use strict';

// 5 + 10 × 3 = 35
console.log(5+10*3);

// (5 + 10) × 3 = 45
console.log((5+10)*3);
```
以下のように、consoleに表示されます。
![スクリーンショット 2022-03-06 21.14.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/e72753a6-d1b7-3946-2c67-8b7b6438a12c.png)|
---|

### 文字列も計算できる
実は、文字列と数値は計算することができます。
ですが、`+`は別物です。
`+`を使うと、文字列の連結が行われてしまうからです。

```JavaScript:js/main.js
'use strict';

// 20 が表示される
// 文字列：１０　　数値：2
console.log('10'*2);

// 7 が表示される
// どちらも文字列
console.log('14'-'7');

// 102　が表示される（文字列の連結）
// 文字列：１０　　数値：2
console.log('10'+2);
```
consoleで以下のように表示されます。
![スクリーンショット 2022-03-06 21.25.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/a205fe51-a499-3820-542b-10e003bf19d9.png)|
---|


もし、文字列で足し算をさせたいというのであれば、
**`parseInt()`という命令を使って、文字列を10進数の整数値に変換させることで計算できるようになります。**
```JavaScript:js/main.js
'use strict';

// 12　が表示される
// 文字列：１０　　数値：2
console.log(parseInt('10',10)+2);
```
consoleで以下のように表示されます。
![スクリーンショット 2022-03-06 21.34.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/0e19fed6-7f1f-e320-1833-14891f0562b9.png)|
---|

それと、文字列の部分を数値に変換できない文章にした場合、
`NaN(Not a Number)`と表示されます。
```JavaScript:js/main.js
'use strict';

// NaN　が表示される
// 文字列：あいうえお　　数値：2
console.log(parseInt('あいうえお',10)+2);
```
![スクリーンショット 2022-03-06 21.41.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1142450/3b3c4e22-1fbf-d0e2-d0f5-808b50e30b12.png)|
---|


## 次回の予定
次は定数・変数を交えて、比較演算子について書こうかと思います〜。