ES6 進階 — let、const

實戰運用技巧

避免汙染全域變數的方法：

1. 使用「立即函示」將程式碼包起來。

2. 使用 let 宣告變數。

兩者 console 結果相同，且都不會污染全域變數。

在 {}裡，用 let 宣告的變數，只會存活在 {} 裡，用來限制作用域。

經典案例：

for 迴圈裡使用 var 宣告變數，並執行 setTimeout。由於 setTimeout 是非同步的程式，會等到所有程式碼都執行完之後，才開始執行，所以 setTimeout 裡的 i 為 全域變數的 i ，未能如預期跑10次 console。

修正方法：

使用 let 宣告變數，不會產生全域變數，作用域只會在 {} 裡面，因此 setTimeout 在執行時，就能取到正確的 i，如預期跑10次 console。

Const 特性

1. 用來宣告「唯讀變數」，也就是只能讀取、不能做修改的「常數」。
2. 通常用在不能被變更的變數，如：url 網址。
3. 如果宣告變數為「物件」或「陣列」時，則變數內容可以被修改。
4. 搭配使用 Object.freeze( ) 使物件不能被修改，也不能被複製。

Var — Object.freeze( )

物件內的屬性不能被修改，但是可以被複製。

Const — Object.freeze( )

物件內的屬性不能被修改，也不能被複製。

Let 有沒有 Hoisting？暫時性死區介紹

Hoisting

簡單來說，會分為「創造」與「執行」階段。當我們宣告一個變數：

var a = 1;

實際運行會按照下圖所示：

// 創造
let number; // 暫時性死區 TDZ
// 執行
connsole.log(number);
number = 18;

1. let 一樣有「創造」階段。
2. 從「創造」到「實際宣告」的階段會出現 TDZ，這個區域無法呼叫變數。
3. 有創造到執行的概念，但不會預先出現 undefined 而是出現錯誤提示。

（文件不會表明這與 var 的 Hoisting 相同）

使用 ESlint 工具輔助學習

ESlint

JavaScript 的一種風格規範，透過風格規範就可使團隊，所撰寫的程式碼風格一致。

相關連結

Airbnb 規範文件 (ES6 版本)：
https://github.com/airbnb/javascript

ESLint 安裝教學：
https://www.youtube.com/watch?v=WiommcFaYvY

透過 ESLint 學習 JavaScript ES6
https://wcc723.github.io/javascript/2018/01/01/javascript-eslint/