第三節:型別與運算子
==
###### tags: `JavaScript`
## <font color="#3733FF"> 觀念小叮嚀:型別與 JavaScript</font>
Dynamic Typing
That means that you don't tell the JavaScript engine what type of data a variable holds.
JS的型別都是執行時才自動判斷變數型別,沒有關鍵字宣告
## <font color="#3733FF"> 純值</font>
### Primitive Type
| name | description |
| -------- | -------- |
| Undefined | you should't set a variable to this |
| null | you can set a variable to this |
| boolean | true or false |
| number | floating point number |
| string |
| symbol | used in ES6 |
## <font color="#3733FF"> 觀念小叮嚀:運算子</font>
```javascript!
var a = 3 + 4
console.log(a) //7
```
為什麼JavaScript知道要相加?
JavaScript engine provides,along with many programming languages, the option for the ability to write in what's called **infix notation(中綴表示法)**.
Infix means that the function name, the operator, sits between the two parameters.
==所有的運算子都是function==
## <font color="#3733FF"> 運算子的優先性與相依性</font>
[運算子優先序](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Operator_precedence#表格table)
1. Precedence 數字越大,越先被執行
```javascript!
var a = 3 + 4 * 5
console.log(a) //23
```
2. 當Precedence一樣,比較 Associativity相依性
```javascript!
var a = 2, b = 3, c = 4;
a = b = c
console.log(a) //4
```
運算子通常需要兩個參數來回傳一個值,
等號是右相依性(right to left),所以會從右邊運算到左邊,從 `b = c ` 開始,回傳右邊的參數,value = 4,然後 a = 4 會被呼叫,所以 a 被設值為4
---
```javascript!
console.log( 1 < 2 < 3) //true
```
電腦想的和你想的可能不同,< 是左相依性
```javascript!
//執行順序
console.log( 1 < 2) // true
console.log( true < 3) // true
```
```javascript!
console.log( 3 < 2 < 1) //true
```
JS會強制轉換型別,false 會被視為 0
```javascript!
//執行順序
console.log( 3 < 2) // flase
console.log( false < 1) // true
```
## <font color="#3733FF"> = 運算子</font>
當我們使用 `==` or `===` or `object.is`的差別
[相等性比較表格](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)
==always use triple quuals==

## <font color="#3733FF">Existence And Booleans </font>
下面這些都表示不存在,這些值都會印出 false,
```javascript!
Boolean(undefined)
Boolean(null)
Boolean("")
```
if () 條件判斷都會轉換成布林值,下方程式碼 a 沒有被賦值
```javascript!
var a
// a = undefined -> false
if (a) {
console.log("There is something")
}
```
```javascript!
var a
a = 0 // 0 會變成 false
if (a || a === 0) {
console.log("There is something")
}
```
|| 的優先度比 === 低,會先執行 a === 0 , 執行順序如下:
```javascript!
( a || true )
( false || true ) // true
```
## <font color="#3733FF">Default values 預設值</font>
沒有傳入參數時, name 會變成 undefined,且印出Hello undefined
```javascript!
function greet(name) {
console.log('Hello' + name )
}
greet() //Hello undefined
```
設定一個預設值給參數
```javascript!
function greet(name) {
name = name || '<Your name here>'
console.log('Hello' + name )
}
greet('Tony') // 'Hello Tony'
greet() //Hello <Your name here>
```
JS會優先回傳可以被強制轉型為true的值
```javascript!
true || false // true
undefined || 'hello' //hello
null || 'hello' //hello
'' || 'hellp' //hello
'hi' || 'hello' // hi
0 || 1 //1
```
`name = name || '<Your name here>`
use the or( || ) to say if something does not exist or is an empty string or is a null , give me `<Your name here>` back instead
## <font color="#3733FF">Framework aside 框架小叮嚀</font>
假設有些一些library 匯入專案: lib1 、lib2
```
<script src="lib1.js"></script>
<script src="lib2.js"></script>
<script src="app.js"></script>
```
這三個script不會創造新的執行環境,會把程式碼堆在對方上面,然後執行所有JavaScript檔案,好像他們是在同一個檔案裡,所以這三個檔案互不衝突很重要
```javascript!
window.libraryName = window.libraryName || 'Lib 2'
```
當看到類似的句子時,其實是在設定,定義框架的物件或函數
要瞭解這是在檢查全域命名空間(global namespace)或全域物件,看是否已經有那個名稱了