今天就來談談昨天提到的建議以 const/let 取代 var 的原因吧

Hoisting

首先先來簡單介紹一下JS的 Hoisting 特性，JS中，宣告變數 var 、建立函式 function () {...}，會被提到最前面先執行。
想像成看電影前，只先看了演員名單，提前知道有哪些演員，但他們可能在電影中段才出現，而你已經知道該演員會出現在這部電影。

console.log(a)

結果：a is not defined（a 這個變數不存在）

console.log(a)
var a

結果：undefined（存在 a 這個變數，但他是未定義的變數）

也就是說，在第2例中 var a 雖然寫在後面，但他會被提到最前面先執行，所以 a 已經被宣告了，這就是Hoisting的結果。
更深入內容可參考這篇

Scope

可以想像成在每個 scope 中，擁有他各自獨立的變數，而JS在查找變數時，會先在當前的 scope 中查詢，若無該變數，再往其上一層 scope 查找。
舉例：

var a = 1
var b = 3
function f(){
  var b = 2
  console.log(a+b)
}
f()

其中，在 function f( ) 中，有變數b，則取得變數b為2，而其中無變數a，則往上一層找到變數a，則取得變數a為1，因此結果a+b為3。

• Blobal scope：範圍含括全域，在最外層宣告的變數，在任何地方皆可使用。
• Function scope 範圍含括在該function中的變數
• Block scope 則是指各別 {...} 內的範圍。

const/let 取代 var

• 在前章節有提到，建議將變數都放在開頭時宣告。然而因為Hoisting的規則， var 在較後面宣告變數，能使得該變數附有值 undefined，而 const/let 則會提示錯誤為 not defined ，因此更能避免變數未在使用前宣告。
• 因為在ES6前，只有 function 可以建立 scope，而 var 只能在 function scope 中建立獨有的變數。 const/let 伴隨著 block scope 的誕生，在 block scope 中以 const/let 宣告變數，則可建立在該 block scope 中獨有的變數，更容易防止與其他 scope 的變數衝突。