# JS(1/10) Day 9 五倍紅寶石(第八屆共筆)(2021/7/08)
## JS：
用途：增添HTML元素(Tag)的功能，增加一些互動式的體驗。
是一款直譯式程式語言，可以用Node.js來輸出。

直譯式：需要在特定環境(Node.js)下執行檔案(.js)，檔案小。
編譯式：環境已安裝在檔案裡，可以直接執行，檔案較大。

程式碼意義：

console.log().abc()  // 執行console物件裡的log方法裡的abc方法。
                     // console.log沒有回傳值

字串可用""''``框住：
console.log("hi 中文也行");
console.log('hi 中文也行');
console.log(`hi 中文也行`);

---

## 宣告（定義）變數：
variable = 代數 = 名牌

What?
創造一個盒子，用來擺放資料用的。

Why?
方便修改，遇到有重複的部分只需要修改源頭就好。

命名規則：
第一個字母必須為英文字母、底線 _ 或是錢字號 $ ，
後面可以是英文字母、底線 _ 或是錢字號 $ 以及數字。
不能為關鍵字或保留字。

var a            // undefined ，存在，但尚未定義
var b = "111"    // 定義b，並且把值"111"指定給他
console.log(c)   // not define ，不存在，沒有定義
null             // 存在，有定義，是一個空值

---

## 資料型態

- 3 數字(Number)
- "hello" 字串(String)
- undefined Undefined
- null Null
- true/false 真假值/布林值（Boolean）
- [ ] 陣列（Array）

[1, 2, "aa", "xyz", true, null]

- { } 物件（Object）

 { 
   name: "kk",    // 前面的變數在物件裡會稱之為key
   age: 18, 
   isAdult: false 
 } 

在JS的世界裡，數字 + 字串會強制轉型成字串 + 字串

console.log(1+"2") => 12

---

## 變數提升：
JS裡才特有的東西，若用var將變數定義在函式下方，執行結果不會跑出not define，而是跑出undefined，是因為JS把變數提升到函式上方(仿間說法)，但事實是裡面的程式碼都不會上下變動。

實際上在JS發生的事：
為什麼用var宣告會有變數提升?
=> 需要先從JS程式碼的執行階段開始敘述。
JS執行程式時會經歷兩段時期，按照順序執行：
1. 建立期：JS會先分配記憶體給宣告的變數及函式，其中函式又會比變數優先被宣告，
在建立期會做兩件事情：
1A：註冊名稱 = 建立罐子，JS會執行宣告變數，但不會給變數的值。
1B：初始化 = 給他空氣，因為沒有值的關係，這個變數的值會是undefined。
2. 執行期：由上而下一行一行執行程式碼
在執行期會依照程式碼由上至下的順序做兩件事情：
2A：把宣告變數裡的值指定給變數。
2B：執行函式。

console.log(a)
var a = 1

// 程式碼由上開始往下讀取
// 1.跳過console.log
// 2.執行1A  var a
// 3.執行1B  var a = undefined
// 4.執行2B  console.log(a) = undefined => 被印出
// 5.執行2A  var a = 1

為什麼同樣是宣告，用let宣告不會有變數提升?
=> 用var在宣告時，變數會變成全域變數。
用let或const宣告時，變數會變成區域變數，JS在1A時會用一個TDZ(暫時死區)把變數蓋住，當給予值後才能把蓋子打開。

console.log(a)
let a = 1

// 程式碼由上開始往下讀取
// 1.跳過console.log
// 2.執行1A  let a 並且給他一個TDZ
// 3.執行1B  變數a因為有TDZ，所以無法執行初始化
// 4.執行2B  因為a被蓋住無法讀取， Cannot access 'a' before initialization => 被印出
// 5.執行2A  let a = 1

---

## if .. else ..
只能選其中一條路，選到就會跳出來。

var age = 22

if (age >= 20) {
  console.log("投票")
}

var age = 22

if (age >= 20) {
  console.log("可以投票")
} else {
  console.log("不能投票")
}

// 複雜版
var age = 22
var citizen = true

if (age >= 20) {
	if (citizen == true) {
		console.log("可以投票")
	} else {
		console.log("不能投票")
	}
} else {
  console.log("不能投票")
}

// 簡化版
var age = 22
var citizen = false

if (age >= 20 && citizen) {
	console.log("可以投票")
} else {
  console.log("不能投票")
}

## 強迫轉型：
當兩個 + 放一起會連同後面的字串一同變成NaN。

console.log("b" + "a" + + "a" + "a") => baNaNa

## 短路求值：
目的為節省效能。

// &&只要執行到false就會停住，因為&&要兩個都為true結果才會是true
var a = 10, b = 2
console.log(a && b) => 印出2

var a = 0, b = 2
console.log(a && b) => 印出0

// ||只要執行到true就會停住，因為||只要其中一個為true，結果就會是true
var a = 10, b = 2
console.log(a || b) => 印出10

var a = 0, b = 2
console.log(a || b) => 印出2

## Falsy Value

1. false
2. undefined
3. null
4. ""
5. 0
6. NaN

P.S. 任何字元都會被判斷為True

## 歷史故事：

- ECMA
- ECMAScript
- TC39
- ES6 => ES2015

補充：
檔案的附檔名不是很重要，只是用來呈現檔案內各程式語法的顏色。

---
### Xmind：
[JavaScript指令](https://www.xmind.net/m/hid6Ki)
---
###### tags: `JavaScript`