前言

此篇文章是要介紹，在學習 React 之前，一定要知道的 JavaScript ES6 語法 (之後會簡稱為 JS or ES6)，這是因為在撰寫 React 時，一定都是在撰寫 JS 程式碼，像筆者很習慣地寫 jQuery 程式碼，在 React 就幾乎派不上用場，而且整個團隊的開發也已講好，也一定會以 ES6 撰寫模式為優先，所以，就趁這次的鐵人賽，也把自己所學到的前端知識，一邊整理寫成文章，一邊培養自己的能力，以求未來更好的發展。
這個章節將會講到var、let、const (let、const為 ES6 新增加的宣告指令)三者宣告指令的特性及變數可被參考的區域也就是所謂的變數作用範圍 (Scope)。

何謂變數作用範圍 ?

在撰寫 JS 程式碼時，所宣告變數的位置不同就會影響該程式碼中變數的使用方式。如果我們將變數宣告在函式裡，那麼此變數就僅能在該函式中使用，這就是所謂的變數作用範圍。JS 的作用範圍可分為以下兩類。

• 可在整個程式中參考的全域範圍。
• 只能在定義的函式中參考的區域範圍。
  簡單地用白話的方式來講，又可以以下兩類。
• 在函式外宣告的變數 => 全域變數。
• 在函式內宣告的變數 => 區域變數。

var status = 'failed'; // 全域變數
function getStatus() {
  var status = 'ok'; // 區域變數
  return status
}
console.log(getStatus())
console.log(status)

宣告時必須加上 var 的理由為何 ?

如果在宣告變數時，忘記加上var會發生什麼事呢 !?

status = 'failed'; // 全域變數
function getStatus() {
  status = 'ok'; // 區域變數
  return status
}
console.log(getStatus()) // 印出 ok
console.log(status) // 預期要印出 failed，結果卻印出 ok

1. 第一個要說明的是程式可以正常運作，是不會有錯誤發生的。
2. 第二個要說明的是在範例二中第七行要印出的是 failed ，但是確印出 ok，這是因為第一行定義的全域變數被第三行中定義的變數覆蓋了。
3. 由第二點的結果我們得知未使用 var 指令宣告的變數，都會被視為全域變數。
4. 最後我們可以推論，一定要用 var 指令定義區域變數。

要注意區域變數宣告的順序 !

程式碼都是由上而下一行一行讀下來的，這裡的範例是指如果，全域變數及區域變數在還未宣告時，而先輸入了 console.log，哪這個時候又會出現什麼狀況呢 !?

onsole.log(status) // 會印出 failed
var status = 'failed';
function getStatus() {
  console.log(status)  // 會印出 undefined (未定義)
  var status = 'ok';
  return status
}

• 第一個 console.log(status) 會印出 failed，雖然還未讀到宣告為 status 為 failed，但因為這是全域變數的特性，我們又可以稱為提升 (hosting)。
• 第二個 console.log(status) 會印出 undefined (未定義)，這是因為在 JS 中區域變數在函式整體內有效，卻尚未執行變數指派，所以區域變數 status 的內容是 undefined (未定義)，因此，得知一個結論區域變數要在函式開始時先宣告。

支援區域範圍的 let、const 指令

ES6 新增了支援區塊範圍的let、const宣告指令，首先簡單的舉以下範例說明。

function vipName() {
  let customer = 'Acer'
}
console.log(customer) // 會出現 customer is not defined

function cityName() {
  const city = 'Taipei'
}
console.log(city) // 會出現 city is not defined

• 由於以 let、const 指令宣告的變數在區塊外無效，因此會出現錯誤 (customer is not defined) and (city is not defined)。
• 因此，在 ES6 之後的環境中，撰寫 JS 程式碼時會選擇一般程式設計『盡可能限定範圍』的規則，強烈建議使用 let、const指令來取代var指令。

我們整理了 var、let、const 三者的變數作用範圍：

• var：scope
• let、const：block

var x = 1;
{
  var x = 2;
  console.log(x)
}
console.log(x)  // console 會印出 2 跟 2

let x = 1;
{
  let x = 2;
  console.log(x)
}
console.log(x)  // console 會印出 2 跟 1

• var的宣告範圍為 scope，以上是 block 而不是 function 就不需要執行，console 會印出 2 跟 2
• let、const的宣告範圍為 block，console 會印出 2 跟 1。

結論

以現在這個時候在撰寫 JavaScript 程式碼時，請務必使用let、const來取代var，避免var的特性導致錯誤發生，結果花了很多時間 debug，這是很得不償失的。
還要特別注意const宣告指令的特性，一旦使用了const宣告一個變數，就不能再使用該變數宣告其他的值，這也是會有錯誤的，反之let就沒有這個問題。