let 和 const

範疇

在 ES6 之前，在 Javascript 要宣告變數必須要用 var。

var a = 100

以 var 宣告的變數，作用範疇以 function(函式) 為基準，如果在 funciton 以外宣告，叫做全域變數，在檔案的各個位置都能使用。

在 function 以內宣告，叫做區域變數，它的作用範疇只存在於其宣告的 function 之內，離開該 function，此變數將不能再被使用。

var a = 1  //宣告全域變數a
function (){
  var a = 2  //宣告區域變數a
  console.log(a)  //2
}
console.log(a)  // 1

簡單的了解 var 之後，開始來介紹ES6 新增的變數宣告方式：let 跟 const，相對於 var 是函式作用域(function scope)，let 與 const 是區塊作用域(block scope)，這表示我們只需要一對｛⋯⋯｝就能建立一個範疇。

let a = 10
{
  let a = 20
  console.log(a)  // 20
}
console.log(a)    // 10

上例中第一個 console.log(a) 只接受 ｛⋯⋯｝區塊裡所宣告的變數a，所以 console.log 的結果是 20，換句話說，let a = 20 的結果只存在於｛⋯⋯｝的區塊之中，而離開了｛⋯⋯｝之後，再一次 console.log(a) 只會找到第一行的 let a = 10。

const 宣告即需給值

const 定義常數，常數在一宣告時就必定要指定給值，換言之，想要先宣告後才指定值，就要用 let。

const a = 10   // ok 
const a        // wrong

禁止重複宣告

let 與 const 禁止 在同一範疇中 再次宣告 相同名稱的變數，這點與 var 大相徑庭，var 無視重複宣告，只管指派變數值，但重複宣告的 let 與 const 會被視為語法錯誤。

{
let a = 1
let a = 2  //回報錯誤，因為 a 已宣告過。

let b = 20
b = 35     //ok, let 雖不可重複宣告，但可接受重複指派新值
}

{
const i = 5
const i = 10  //回報錯誤，const 是常數，不能重複宣告。
}

禁止在宣告之前就使用它

var 宣告的變數在未宣告使用，會產生 Hosting 變數提升，然而 let 與 const 並不會產生 Hosting，所以養成良好的習慣，把宣告變數盡量寫在最上方比較不容易出錯。

{
  console.log(a)  //undefined
  console.log(b)  //ReferenceError!
  var a = 1
  let b = 2
}

let 與 const 都是區域變數

在函式以外的範圍用 var 宣告變數是全域變數 ，然而 let 與 const 並沒有全域變數的概念，他們永遠都是區域變數。

const ironman = 'Tony Stark'
console.log(window.ironman) // undefined

暫時死亡區(TDZ, Temporal Dead Zone)

在區塊範疇中，過早存取由 let, const 宣告的變數，由於 let , const 並無 Hosting，所以會造成存取已宣告但未初始化的變數，進而造成錯誤 ReferenceError。

console.log(q) // q 為 undefined, 因為 hoisting
var q = 5;
{
  console.log(x)
  console.log(y)
  let x = 3;
  const y = 5; 
  // let 跟 const 沒有 hoisting，所以會進入暫時性死區

}

參考連結:
React 16 - The Complete Guide
ECMAScript 6 入门
React - DOM界的彼方(繁中)
前端，沒有極限 - 鐵人賽：ES6 開始的新生活 let, const