ES6 的 let 與 const

開始填 ES6 的坑。

let 與 const 的差異

let 基本上跟 var 大致上差不多，只差在「作用域」的範圍不同，等一下會解釋什麼是作用域。

const 就比較不一樣了，const 的意思是「Constant」（常數），所以用 const 宣告的變數「值不會改變」，而且在宣告的時候就必須賦值。（畢竟都是常數了，沒有理由宣告的時候不能賦值）

let 與 const 的區塊作用域

什麼是作用域？簡單來說就是一個「變數的生存範圍」。例如說 var 的作用域就是在 function 的範圍內：

function varScope () {
  var a = 20
  console.log(a)
}
varScope() // 20
console.log(a) // ReferenceError: a is not defined

但其實大部分的程式語言是以 block（區塊）來劃分作用域的，所以 JavaScript 算是一個比較特別的案例。

而 let 與 const 的作用域就是在 block 的範圍內：

function blockScpoe() {
  if(true) {
    let a = 10
    const b = 20
    console.log(a)  // 10
    console.log(b)  // 20
  }
  console.log(a)  //  ReferenceError: a is not defined
  console.log(b)  //  ReferenceError: b is not defined
}
blockScpoe()

區塊作用域有什麼好處？

你可能會想說這樣子跟用 var 有什麼差嗎？

其實是有的，因為以 function 來做切割的作用域範圍比較大，會比較容易有「衝突」跟「互相干擾」的問題，看看這個例子：

function abc() {
  var count = 0
  for(var i=0; i<10; i++) {
    var count = 'ddd'
    console.log(count) // ddd
  }
  console.log(count) // ddd
}
abc()

先說聲對不起這例子實在有點爛，不過我想表達的是如果你在 for 裡面也剛好宣告一個「跟外面同名稱的變數」，那就會不小心把外面的變數值給覆寫掉。而大部分的情況我們不會希望這種事情發生。

但如果是區塊作用域的話就能避免掉這個問題產生：

function abc() {
  var count = 0
  for(var i=0; i<10; i++) {
    let count = 'ddd'
    console.log(count) // ddd
  }
  console.log(count) // 0
}
abc()

所以為了降低這種衝突發生，最好是改用 let 與 const 會是比較好的做法。