今天要來介紹 ES6 中新的變數宣告方式的 let、const 並且跟過去我們常用的 var 做比較，我們先來看 airbnb 中關於變數的撰寫建議：

ESLint airbnb 規則

• 2-1.對於所有的參考使用 const；避免使用 var
• 2.2 如果你需要可變動的參考，使用 let 代替 var
• 2.3 請注意，let 與 const 的作用域都只在區塊內

所以 airbnb 的規則就是 不要使用var了，而究竟 let 有什麼好處？要殘忍的拋棄陪伴我們多年的 var 呢？今天就來介紹 let 跟 const 的特性，並且跟過去的 var 做比較吧！

變數的有效範圍

在了解新的變數之前，我們要先知道變數的「有效範圍」，變數的宣告位置，是會影響他們執行的有效範圍的！而有效範圍主要分為「全域變數」跟「區域變數」兩種：

• 全域變數：在函式外宣告的變數，在整個程式中都可以被存取與修改

var price = 30 ; //這是全域變數  
function count() {
…
}

• 區域變數：在區塊內等被 { } 包起來的地方宣告的變數（例如 if、else、for、while）

if (true) {
var price = 30 ; //這是區域變數  
}

【var】

var的作用域

var的作用域是「函式作用域」，也就是在 function 內宣告的 var，要在該 function 才有作用啦～會以該 function 範圍為界線，在 function 外面的區域就無法取用了！

function count() {
      var price = 100;
      console.log(price); //出現100，function內的var變數只會存在在function內
}
console.log(price); //出現錯誤，無法存取price

var的缺點

那在這裡 var 有一個大大的缺點，也就是在一些區塊語句（if、else、 for、 while等）裡面用 var 宣告的變數，是會洩漏到全域中的！這樣就有可能會導致一些副作用，可能會彼此影響，或是在工程師交接中增加維護難度。
以下兩個範例：

var price = 20;
If (true) {
      var price = 30;
}
console.log(price) // 出現 30，區域變數覆蓋全域變數

for (var i = 0; i<10 ; i++) {
      …
}
console.log(i) // 出現 10，循環變數洩漏為全域變數

而在 ES6 的版本中，推出了新的變數宣告關鍵字 let 與 const，不會有var的副作用，以下跟大家詳解。

【let】

let的作用域

let 與 var 其實差不多，主要的差別在於 let 所宣告的變項只有在代碼塊區域（block scope）內有效，也就是 { } 包住的區域，所以只要是被所屬{ }包起來的let變數，都不會跑到外面（全域）去！

if (true) {
      let price = 100; // 因為用let宣告，所以price只會存在在if{}大括弧包起來的區塊內
}
console.log(price) // 出現錯誤，無法存取

所以在下方的例子中，兩個 let 互不干擾，if 內的 price 不會覆蓋全域變數的 price 囉！

let price = 20;
if (true) {
      let price = 30;
}
console.log(price) // // 出現20 區域變數不會覆蓋全域變數

有沒有發現～只要是被{ }包起來的區域，就不能在全域存取囉！

【const】

const 就是指「常數」，簡單來說就是不變的數值（例如圓周率）。
宣告上有一些規定：

• 宣告時就要同時賦值，不然會報錯！
• 賦值後就不能被更動了！

例如：圓周率

const Pi = 3.14159265 ; //因為圓周率是永恆不變的數值，所以很適合用const來宣告！
console.log(Pi)

let跟const的共同特性

• 同個區塊上不能重複命名
• 區塊內宣告，都不會洩漏到全域

結語

以上介紹完畢！希望大家有了解到 let 跟 const 的美好了，未來為了讓開發的專案更加穩定，建議可以使用 const或者 let 這兩種嚴謹的宣告變數來取代 var，讓 var 走入歷史囉～～