【JavaScript】暗黙的な型変換

# 概要
JavaScriptを学習、理解を深めるため「[JavaScript Primer 迷わないための入門書](https://jsprimer.net/)」を読み、
理解した内容等を記載していく。

「[【JavaScript】JavaScript入門一覧](https://qiita.com/andota05/items/22fae452225b785fd405)」に他の記事をまとめています。

# この記事で理解できること
* 暗黙的な型変換とは
* 明示的な型変換方法

# 暗黙的な型変換とは
* ある処理過程で`意図していない`・`明示的ではない`型変換が行われること。
* 演算子による演算や、関数内での処理中に行われる。

|パターン|特性|
|--|--|
|等価演算子(==)での比較|オペランドを同じ型となるように変換する|
|プラス演算子(+)で数値と文字列を処理|数値 -> 文字列へと変換する|
|マイナス演算子(-)で数値と文字列を処理|文字列 -> 数値へと変換する|

## 等価演算子(==)での比較
* 暗黙的な型変換による予測不可能な結果のパターン数が多く、把握は現実的ではない。
* 等価演算子より`厳密等価演算子(===)`での比較が推奨される。
```js
// 例:文字列と数値を比較
console.log("1" == 1);  // => true(暗黙的に型が同じになるよう変換されている)

// 参考:厳密等価演算子(===)での比較
console.log("1" === 1); // => false
```

## プラス演算子(+)での比較
* 文字列としての結合が優先されるため、数値が文字列へと変換される
```js
// 例:文字列と数値を比較
console.log("2" + 1);  // => 21
```

## マイナス演算子(-)での比較
* 文字列に対するマイナス演算子の定義がないため、文字列が数値へ変換される
```js
// 例:文字列と数値を比較
console.log("2" - 1);  // => 1
```

# 明示的な型変換
* 演算対象に異なるデータ型の値が混ざっているオペランドが３つ4つとなった場合、さらに複雑となり、`演算する順番`によっても結果が変わってくる。
* 暗黙的な型変換による想定外の結果が発生することを避けるには、`明示的に型変換`を行う。

```js
// 例：異なるデータ型の値を持つオペランドが3つの場合
console.log(1 + "2" + 3); // => 123
console.log(1 + 2 + "3"); // => 33
```

## 任意の値を真偽値へ変換

* Booleanコンストラクタを使用する。
* [falsyな値](https://qiita.com/andota05/items/1bd440d07660bda0558e)は`false`、それ以外は`true`になる。

```js
// falsyな値はfalseになる
console.log(Boolean(false));        // => false
console.log(Boolean(0));            // => false
console.log(Boolean(-0));           // => false
console.log(Boolean(0n));           // => false
console.log(Boolean(""));           // => false
console.log(Boolean(null));         // => false
console.log(Boolean(undefined));    // => false
console.log(Boolean(NaN));          // => false

// falsyな値以外はtrueになる
console.log(Boolean(true));         // => true
console.log(Boolean(1));            // => true
console.log(Boolean("1"));          // => true
console.log(Boolean({}));           // => true
```

## 数値を文字列へ変換
* Stringコンストラクタを使用する。
* 数値以外にも使用できるが、`プリミティブ型`の値にのみ使用することが推奨される。<br>(配列やオブジェクトにはそれぞれに適切な方法があるため)

```js
// プリミティブ型の値
console.log(String("str"));                         // => "str"
console.log(String(true));                          // => "true"
console.log(String(null));                          // => "null"
console.log(String(undefined));                     // => "undefined"
console.log(String(Symbol("シンボルの説明文")));       // => "Symbol(シンボルの説明文)"

// プリミティブ型以外の値
console.log(String([1, 2, 3]));                     // => "1,2,3"
console.log(String({ key: "value" }));              // => "[object Object]"
console.log(String(function() {}));                 // "function() {}"

// 参考:配列、オブジェクトをより適切な方法で値を返す
console.log([1, 2, 3].join(','));                   // => "1,2,3"
console.log(JSON.stringify({ key: "value"}));       // => {"key":"value"}
```

## 文字列を数値へ変換
* Numberコンストラクタを使用する。
* 数値へ変換できない値は`NaN`へ変換される。<br>(どの数値とも一致しない特性を持つが、Number型の値を表現しているもの)
* Numberオブジェクトには、文字列から数字を取り出す`Number.parseInt`、`Number.parseFloat`関数が存在する。

```js
// 文字列を数値へ変換
console.log(Number("1"));                           // => 1
console.log(Number("A"));                           // => NaN

// parseIntは文字列から整数を取り出す
console.log(Number.parseInt("100歳"));              // => 100

// parseFloatは文字列から浮動小数点数を取り出す
console.log(Number.parseFloat("0.5px"));            // => 0.5
```