JavaScript 核心觀念(62) - ES6 章節：Let 及 Const - 學好 ES6 - 使用 ESlint 工具輔助學習

發表於 2021-07-25 更新於 2022-01-29 分類於 JavaScript

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇文章如果對你有幫助，你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你可以請我喝一杯咖啡。

如果想讓自己的 JavaScript 再更上一層樓的話，就會建議嘗試使用 ESLint。

前言

如果想讓自己的 JavaScript 再更上一層樓的話，就會建議嘗試使用 ESLint。

學好 ES6 - 使用 ESlint 工具輔助學習

這邊就不贅述如何替自己專案加入 ESLint 了，如果不知道該怎麼加的人，我會建議你參考這一篇「五分鐘快速替專案加上 ESLint」。

那麼什麼是 ESLint 呢？簡單來講它是一個 JavaScript 風格管理工具，什麼是風格管理工具呢？我們在實際開發時，一定會與團隊合作，而每個人的開發習慣也不同，舉例來講原有的開發者可能習慣使用 var 宣告變數，後來進來的人則習慣使用 ES6 的 let 與 const 語法。

前面我們也說明過許多次 var 與 ES6 的 let 與 const 語法差異，那麼如果一直沒有制定一個公司開發規範，專案是有可能非常混亂：

1
2
3

var myName = "Ray";

let maName = "is Ray not Array";

又或者是結尾分號要加不加的問題：

1
2
3

var myName = "Ray"

let obj = {};

整體下來程式碼就會越來越混亂且混淆，最終就會導致難以維護。

而在學習過程中，也會推薦使用 Airbnb 風格，而 Airbnb 的風格簡單來講，它會希望你盡可能的使用 ES6 語法而不是使用 ES5 語法。

當然，如果你覺得 Airbnb 的挫折感太重的話，可以考慮先使用 Standard 風格，Standard 風格相對就比較寬鬆。

那麼最後這邊也會建議你可以嘗試閱讀一下 Airbnb 的官方文件：

我個人會推薦閱讀原文版本，畢竟翻譯的版本必須看 Fork 出來的作者有沒有空更新與其他成員發起 Pr merge 回去。

那你可能會想說，真的必須全部看完再來寫嗎？你可以直接上 ESLint 透過邊開發來學習，當遇到提示時，再去查詢解法了解為什麼這樣子改也是可以的。

那麼每個專案都必須安裝一次，因為 ESLint 是依據專案導向來去分析的。

最後以下這個功能我會希望你是已經掌握 ES6 的人在使用，也就是「VSCode 自動修正 ESLint 錯誤」。

為什麼 var 不要與 ES6 let、const 混用

最後聊一下為什麼 var 不要與 ES6 let、const 混用，首先先看一段範例程式碼：

var myName = 'Ray';
if(true) {
  let myName = 'Ray1';
}

console.log(myName); // ?

我相信聰明的你很快就知道 console.log(myName); 的結果是 Ray，let 的作用域是以 block(花括號)為主，因此只會存活於 if 陳述式內，但你有想過，如果變成這樣呢？

let myName = 'Ray';
if(true) {
  var myName = 'Ray1';
}

console.log(myName); // ?

答案會是 Ray或是 Ray1 嗎？結果都不是。

而是 Uncaught SyntaxError: Identifier 'myName' has already been declared 這一段變數已經被宣告的錯誤訊息，雖然看起來都是在我們可以掌握的範圍內，但是你有沒有發現一件事情就是，如果當這兩種宣告方式混用時，你必須思考一下兩者的作用域?

var 函式作用域
let、const 區塊作用域

還有什麼呢？暫時性死區與提升等等，因此這樣子對於開發者來講，是必須額外花心思去閱讀邏輯的，所以會建議 var 與 let 不要混用。

參考文獻

JavaScript 核心篇