# Operator 運算子 📝
###### tags: `JavaScript`
> JavaScript 的運算子很多，這裡只有紀錄一些比較常用但稍稍不直覺的 🐠
> 完整的運算子介紹：[MDN的文章](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators#%E7%AE%97%E8%A1%93%E9%81%8B%E7%AE%97%E5%AD%90)

### Arithmetic Operators 算數運算子

| 運算子 | 描述 | 類別
| -------- | -------- | --------
| % | 取餘數 | `二元運算子`
| ** | 計算平方 2**3=8 | `一元運算子`
| + | 會將數字以外的運算元強制轉換成字串 | `一元運算子`
| ++ | 遞增 （a++ 相當於 a=a+1） | `一元運算子`
| - - | 遞減 （b++ 相當於 b=b+1 | `一元運算子`

:::warning
**++ 和 - - 放的位置不同，得到的回傳值會不一樣！**
- Postfix（接在運算元後面）: 回傳的結果會是「原始的數值」。
- Prefix（接在運算元前面）：回傳的結果會是「運算後的值」。

:::

var a = 10;
var b = 10;

console.log(a++); // 10
console.log(++b); // 11

console.log(a); // 11 // a 還是有被運算 只是當下的回傳值是原始的數值
console.log(b); // 11

### Comparison Operators 比較運算子
#### =
> 一個等號不是比較運算子，而是 Pass 賦值的意思。 [詳細說明](https://hackmd.io/dgLu-GFJTYW6X8QC1rYxxQ?view)

#### == vs ===

| | == | === |
| -------- | -------- | -------- |
| 流程 | 先強制轉型後比較 | 不會強制轉型 |

| | != | !== |
| -------- | -------- | -------- |
| 流程 | 先強制轉型後比較 | 不會強制轉型 |

<!-- ### Type Conversion
### Implicit Coercion 隱含的強制轉型
- **in a Boolean context**

-
### Explicit Coercion 明確的強制轉型

### Falsy
>A falsy value is a value that is considered false when **encountered in a Boolean context**.

JavaScript 在需要用到 boolean 值的上下文中使用強制類型轉換(Type Conversion )將值轉換為 boolean value，例如 conditionals and loops。

[MDN: Falsy
](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)

### truthy
>**All values are truthy unless they are defined as falsy** -->
### Type Conversion 型別轉換

#### **Explicit Coercion 明確的強制轉型**

| | 字串 | 數字 | 布林值 |
| -------- | -------- | -------- | -------- |
| 1 | .toString() | .toNumber() | .toBoolean() |
| 2 | String() | | |

> .toString() vs String()
>

| | .toString() | String() |
| -------- | -------- | -------- |
| null, undefined | X | O |
| 轉進位制字串 | O | X |

false.toString()  // "false"
undefined.toString() // TypeError 

// .toString() 括號中的可以寫一個數字，代表進位制。
.toString(2)  // 2進位
.toString(8)  // 8進位

#### **Implicit Coercion 隱含的強制轉型**
- **`+`** (運算子)
> 若條件符合，`+` 會優先進行字串的串接，然後才是數字。

| 情境 | 強制轉型 |
| -------- | -------- |
| 當其中一方為字串時 | 會將另一方強制轉值為字串，做字串的串接。 |
| 當為布林值時 另一方為數字時 | 會將 `true` 轉為 1；`false` 轉為 0，做數字加法。 |

const a = '1';
const c = [1, 2];
const d = [3, 4];

a + 1; // "11"
b + ''; // "1"
c + d; // "1,23,4" 
//陣列 c 和 d 分別先會使用 toString 轉為 '1, 2' 與 '3, 4'。

- 設定條件判斷（強制轉型成布林值）
> - 條件判斷 (if/for/while)
> - 三元運算式（a=b?c:d）
> - 邏輯運算子（|| or && and）

| 常見 falsy values 列表|
| -------------------------- |
| `false`|
| 0, -0 |
| `""` , `''` , `` (空字串) |
|`null`|
|`undefined`|
|`NaN`|

// 陷阱題 👿：
// 以建構式建立的物件都會辨別為 truthy!

new Boolean(false);  // truthy
new Number(0);  // truthy

#### eval(string)
###### tags: `eval`

const sum = eval('10*10+5');
console.log(sum); //105(number)

> - 可以將傳入的字串以數字符號進行運算。
> - 參數的字串需要為合法的表達式，否則會報錯 SyntaxError。
> - 由於安全性和效能的問題，==**MDN強列建議不要使用**==。

---
### 參考資料：
[eval MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/eval)