---
# System prepended metadata

title: 第三節：型別與運算子
tags: [JavaScript]

---

第三節：型別與運算子
==
###### 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==

![](https://i.imgur.com/N0Mty4L.png)

## <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）或全域物件，看是否已經有那個名稱了
